Integrating Google Maps in an APEX Application

Here is how you can integrate Google Maps in an APEX Application.This video was created using the PDF document available at URL http://www.oracle.com/technology/products/database/application_express/pdf/Integrating_Application_Express_with_Google_Maps.pdf . Some of the codes were changed to make it work in the demonstrated scenario. This Google map was integrated in "Add/Modify Customers" page of Sample Application.

Tip
1. Click on play and select '720p' from the toolbar to view the video in high resolution
2. Click on icon  to view the video in full screen



These are the steps involved in integrating Google Maps in your APEX Application

1. Embedding Google Maps is accomplished using JavaScript to invoke the Google Maps API. So the first step is sign up for the Google Maps API Key, which is required to use the API in your application. You can sign up for API Key at URL http://code.google.com/apis/maps/signup.html
2. Create substitution string in your APEX application for the API Key
3. Edit the page where you want to show Google Maps. Add 3 items to the page that will store the location co-ordinates.
4. Create a process "Call Google Geocode Service" to get the location co-ordinates based on customer's address

DECLARE
   l_address   VARCHAR2(4000);
   l_url       VARCHAR2(32000);
   l_response  VARCHAR2(3200);
BEGIN 
   l_address := :P7_CUST_STREET_ADDRESS1 ;
   IF :P7_CUST_CITY IS NOT NULL THEN
      l_address := l_address || ',' || :P7_CUST_CITY ;
   END IF;
   IF :P7_CUST_STATE IS NOT NULL THEN
      l_address := l_address || ',' || :P7_CUST_STATE ;
   END IF;
   IF :P7_CUST_POSTAL_CODE IS NOT NULL THEN
      l_address := l_address || ',' || :P7_CUST_POSTAL_CODE ;
   END IF;  
   l_address := REPLACE(l_address,' ','+');
   l_url := 'http://maps.google.com/maps/geo?q='||l_address||'&'||'output=csv'||'&'||'key='||:API_KEY;
   l_response := UTL_HTTP.REQUEST(l_url, APEX_APPLICATION.G_PROXY_SERVER);
   :P7_RESPONSE  := l_response;
   :P7_LATITUDE  := SUBSTR(l_response,INSTR(l_response,',',1,2)+1,(INSTR(l_response,',',1,3)-INSTR(l_response,',',1,2))-1);
   :P7_LONGTITUDE := SUBSTR(l_response,INSTR(l_response,',',1,3)+1);
END;

5. Create a process to get the location co-ordinates based on customer's address
6. Add a region to the page to display map. Set the region source to following

<div id="map" style="width: 600px; height: 400px"></div>

7. Add JavaScript to the HTML Header attribute of the page

<script src="http://maps.google.com/maps?file=api&v=2&key=&API_KEY." type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//globals
var bounds = new GLatLngBounds();
function initMap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var title = "&P7_CUST_STREET_ADDRESS1.";
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var point = new GLatLng($v('P7_LATITUDE'),$v('P7_LONGTITUDE'));
bounds.extend(point);
map.setCenter(point);
map.setZoom(map.getBoundsZoomLevel(bounds)-4);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
//]]>
</script>

8. Add the following onload event HTML Body Attribute of the page.

onload="initMap()" onunload="GUnload()"