---- THIS POST IS INCOMPLETE -----
I posted a blog some time ago about integrating Google Maps with ADF. To get this to work you needed to have the geocodes , i.e. longitude and latitude. You may have an application that you want to search for an address. This blog is going to give some guidelines on how to achieve this. Much of the functionality is provided by Google APIs which I'm a novice in.
I want to keep this short so I'm not going to go into details around how to create a page for ADF etc. The aim of this blog is to enter an address in a field and have this represented on a page. I have also put some polygon capability in there so you can get some complex longitude and latitude represented on the map.
If you create a blank JSP page and go to the source. Paste this code. I will provide better instructions in the next few days.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://xmlns.oracle.com/adf/faces/rich" prefix="af"%>
<f:view>
<af:document id="d1">
<af:messages id="m1"/>
<af:form id="f1">
<af:panelGroupLayout id="pgl1">
<af:panelFormLayout id="pfl1">
<af:group>
<div id="map_canvas" style="width: 400px; height: 400px"></div>
</af:group>
</af:panelFormLayout>
<af:inputText value="#{bindings.AddressInput.inputValue}"
label="Address"
required="#{bindings.AddressInput.hints.mandatory}"
columns="#{bindings.AddressInput.hints.displayWidth}"
maximumLength="#{bindings.AddressInput.hints.precision}"
shortDesc="#{bindings.AddressInput.hints.tooltip}"
id="it1" clientComponent="true">
<f:validator binding="#{bindings.AddressInput.validator}"/>
<af:clientListener method="codeAddress" type="valueChange"/>
</af:inputText>
<af:inputText value="#{bindings.LongLat.inputValue}"
label="#{bindings.LongLat.hints.label}"
required="#{bindings.LongLat.hints.mandatory}"
columns="#{bindings.LongLat.hints.displayWidth}"
maximumLength="#{bindings.LongLat.hints.precision}"
shortDesc="#{bindings.LongLat.hints.tooltip}" id="it2"
partialTriggers="cb4"
binding="#{backingBeanScope.backing.polygonResponse}">
<f:validator binding="#{bindings.LongLat.validator}"/>
</af:inputText>
<af:commandButton text="commandButton 1" id="cb1" partialSubmit="true">
<af:clientListener method="clearShapes" type="click"/>
</af:commandButton>
<af:commandButton text="Search" id="cb2" partialSubmit="true">
<af:clientAttribute name="address"
value="#{bindings.AddressInput.inputValue}"/>
<af:clientListener method="codeAddress" type="click"/>
</af:commandButton>
<af:commandButton text="commandButton 3" id="cb3" partialSubmit="true">
<af:clientListener method="showShapes" type="click"/>
</af:commandButton>
<af:commandButton text="Get Poly" id="cb4" partialSubmit="true">
<af:clientListener method="writePolygon" type="click"/>
<af:serverListener type="getPolygon"
method="#{backingBeanScope.backing.getPolygonDetails}"/>
</af:commandButton>
</af:panelGroupLayout>
</af:form>
<f:facet name="metaContainer">
<af:resource type="javascript" source="http://maps.google.com/maps/api/js?sensor=true"/>
<af:resource type="javascript">
var shape;
var overlay = [];
var infoWindow;
var geocoder;
var map;
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapDiv = document.getElementById('map_canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-37.842632,144.977705),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
shape = new google.maps.Polygon({
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
overlay.push(shape);
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(e) {
var vertices = shape.getPath();
vertices.push(e.latLng);
}
// Removes the overlays from the map, but keeps them in the array
function clearShapes() {
if (overlay) {
for (i in overlay) {
overlay[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showShapes() {
if (overlay) {
for (i in overlay) {
overlay[i].setMap(map);
}
}
}
function codeAddress(evt) {
long = evt.getSource().getValue();
geocoder.geocode( { 'address': long}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location)
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
marker.setMap(null);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function writePolygon(evt) {
var sourceComponent = evt.getSource();
var myPoly = shape.getPath();
var polygonOutput = "";
// Iterate over the vertices.
for (var i =0; i < myPoly.length; i++) {
var xy = myPoly.getAt(i);
polygonOutput += xy;
}
var param = {polygon:polygonOutput};
AdfCustomEvent.queue(sourceComponent, "getPolygon", param, true);
evt.cancel();
}
</af:resource>
</f:facet>
<af:clientListener method="initialize" type="load"/>
</af:document>
</f:view>