Friday, June 20, 2008

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

12 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete