http://www.oracle.com/technology/products/database/application_express/html/doc.html
This Whitepaper explains how to do the geo-coding, i.e. converting an address (Street/City/State/ZIP/Country) into coordinates that can be used to position a Google map. In this example, the PL/SQL package utl_http is used to connect to Google's geocoding service.
An alternative to this approach is to connect to that service from the client. Both techniques have their advantages and disadvantages. One of the advantages of doing it on the client is that the server doesn't need to be able to connect to Google, i.e. there's no need to define any proxies on the server, and as a result, this approach would work on apex.oracle.com, where external network connections are currently not supported.
The first step for any kind of Google map integration is to register for a Google maps key, which can be done here:
http://code.google.com/apis/maps/
After that, it's just a matter of adding some Java Script to your page that communicates with Google and refreshes the area on your APEX page that you have allocated for the map. Here's a link to my sample page:
http://apex.oracle.com/pls/otn/f?p=52790
You can download this application here:
http://www.sewtz.com/GoogleMaps.zip
I added an address region, where you can enter a city or a full address and then click go and have the map move to the address specified. Here's the JavaScript I added to my page. It's pointing the map to my office on first load, and then re-positions the map based on the address you enter:
var geocoder;
var map;
var bounds = new GLatLngBounds();
var myStreet = "540 Madison Ave";
var myCity = "New York";
var myState = "NY";
var myZIP = "10022";
var myCountry = "USA";
var address = myStreet + "," + myCity + "," + myState + "," + myZIP + "," + myCountry;
var addressMarker = myStreet + "<br />" + myCity + ", " + myState + ", " + myZIP + "<br />" + myCountry;
// On page load, call this function
function load()
{
// Create new map object
map = new GMap2(document.getElementById("map"));
// Create new geocoding object
geocoder = new GClientGeocoder();
// Retrieve location information, pass it to addToMap()
geocoder.getLocations(address, addToMap);
}
// This function adds the point to the map
function addToMap(response)
{
// Retrieve the object
place = response.Placemark[0];
// Retrieve the latitude and longitude
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
// Center the map on this point
bounds.extend(point);
map.setCenter(point, 13);
map.setZoom(14);
// Create our "tiny" marker icon
var oIcon = new GIcon(G_DEFAULT_ICON);
oIcon.image = "#WORKSPACE_IMAGES#opin.png";
oIcon.iconSize = new GSize(32, 40);
oIcon.shadowSize = new GSize(38, 46);
// Set up our GMarkerOptions object
markerOptions = { icon:oIcon };
marker = new GMarker(point, markerOptions);
// Add the marker to map
map.addOverlay(marker);
// Add address information to marker
marker.openInfoWindowHtml(addressMarker);
}
function updateMap() {
myStreet = $v('P1_STREET');
myCity = $v('P1_CITY');
myState = $v('P1_STATE');
myZIP = $v('P1_ZIP');
myCountry = $v('P1_COUNTRY');
address = myStreet + "," + myCity + "," + myState + "," + myZIP + "," + myCountry;
addressMarker = myStreet + "<br />" + myCity + ", " + myState + ", " + myZIP + "<br />" + myCountry;
load();
}
