Integrating Google Maps

Following up on a discussion on the APEX OTN forum today, here's some additional information on integrating Google Maps. There are different techniques for integrating Google maps, and we actually have a Whitepaper available online, that explains working with Google maps in much detail:

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();
  }