Follow Us on Twitter

Integrating Google Maps in Oracle Apex

by Marcel van der Plas on October 4, 2009 · 23 comments

In some cases, you might want to integrate Google Maps in Oracle Apex. An application which shows locations of a company’s clients for instance. It is quite simple to embed a Google map into Apex. In this article I will show you how to embed a Google Map, including controls, markers and the possibility to find locations.

Before you can start you need to get a key from Google. This key is needed in the header section when using the Google Maps API. You can get one at the Google Maps API signup page.

Simple map

To embed a simple map with controls, take the following steps:

Step 1: Create an empty page.

Step 2: Edit the page. click on the edit icon in the page section on the left side.

Step 3: In the HTML header section, include the folowing code:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"))
map.setCenter(new GLatLng(52.0000, 5.0000), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
}
</script>

Some explanation of the script code:

Actually, you make use of the Google Maps API. Google developed the API to enable developers to use the maps in websites. In the HTML header section, this API is called as script source. In the first line, you can also see the key which you need to get.

In the function initialize, map.setcenter displays the location. In GLatLng, the coordinates are entered. 52.0000, 5.0000 is a coordinate of a place somewhere in the Netherlands. 13 is the zoom level. To zoom out, use a lower number. Map.addcontrol displays different types of control on the map. On the left side, there is the navigation control where you can move to another location and where you can zoom in or zoom out. This is controlled by GSmallMapControl. You can also use GLargeMapControl to display the zoom level. On the right side there is the maptype control where you can use the map or the satellite pictures.

Step 4: create a HTML region an put the following code in the region source:

<body style="font-family: Arial;border: 0 none;">
  <div style="width: 500px; height: 300px"></div>
</body>

And that’s about it! Mind the name of the div which is referred to by the call in the HTML header. The screen should look like following:

maps

Map with search

It’s also possible to add an address field where you can search for locations in the world. Follow these steps:

Step 1: create an empty page.

Step 2: Click on the edit icon in the page section on the left side to edit the page.

Step 3: include the following code in the HTML header section:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script>
var map;
var geocoder;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(52.0000, 5.000), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
geocoder = new GClientGeocoder();
}
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
</script>

Step 3: create an HTML region and include the following:

<body style="font-family: Arial;border: 0 none;">
<form action="#">
<p>
<b>Search for an address:</b>
<input value="" size="40" />
<button(document.getElementById("q").value);>Search</button>
</p>
</form>
<div style="width: 500px; height: 300px"></div>
<p>
<b>Try these:</b><br />
<a href="javascript:void(0)"
onclick="findLocation('Schlueterstrasse 1, Duesseldorf, Deutschland');return false;">Schlueterstrasse 1, Duesseldorf, Deutschland</a><br />
<a href="javascript:void(0)"
onclick="findLocation('fultonbaan 20, nieuwegein, nederland');return false;">Fultonbaan 20, Nieuwegein, Nederland</a><br />
<a href="javascript:void(0)"
onclick="findLocation('Champ de Mars 75007 Paris, France');return false;">Champ
de Mars 75007 Paris, <b>France</b></a><br />
</p>
</body>

The result:

maps_search

Map with markers

A map with markers can be made with the following steps:

Step 1: create an empty page

Step 2: edit the page and click the edit icon in the page section.

Step 3: include the following code in the HTML header section:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(52.0000, 5.0000), 13);
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
}
</script>

Step 4: create an HTML region and include the following in the source section:

Mind the map.addoverlay command which adds the markers to the map. The result should be something like this:

maps_markers

Map with markers read from a table

You can also read data from a table and display as markers in a map. For instance the location of clients:

Step 1: create a new blank page

Step 2: in the database, create a table where client name, address, city and country are stored. In this case, the table is called cv_klanten.

Step 3: in the database, create the following procedure:

create or replace procedure show_markers is
cursor c_klt is
  select address||', '||city||', '||country geoloc
  from cv_klanten
  order by id;
l_t number(3) := 0;
begin
  htp.print('<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"" dirty="false"></script>
       <script>');
  htp.print('function initialize() {');
  htp.print('var map = null;');
  htp.print('var geocoder = null;');
  htp.print('if (GBrowserIsCompatible()) {');
  htp.print('map = new GMap2(document.getElementById("map_canvas"));');
  htp.print('map.setCenter(new GLatLng(51.7500, 5.0000), 7);');
  htp.print('map.addControl(new GLargeMapControl());');
  htp.print('map.addControl(new GMapTypeControl());');
  htp.print('geocoder = new GClientGeocoder();');
  for r_klt in c_klt
  loop
    htp.print('geocoder.getLatLng(');
    htp.print(''''||r_klt.geoloc||''''||',');
    htp.print('function(point) {');
    htp.print('var baseIcon = new GIcon(G_DEFAULT_ICON);');
    htp.print('baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";');
    htp.print('baseIcon.iconSize = new GSize(20, 34);');
    htp.print('baseIcon.shadowSize = new GSize(37, 34);');
    htp.print('baseIcon.iconAnchor = new GPoint(9, 34);');
    htp.print('baseIcon.infoWindowAnchor = new GPoint(9, 2);');
    htp.print('var letteredIcon = new GIcon(baseIcon);');
    htp.print('letteredIcon.image = "http://www.google.com/mapfiles/marker'||chr(65+l_t)||'.png";');
    htp.print('markerOptions = { icon:letteredIcon };');
    htp.print('var marker = new GMarker(point,markerOptions);');
    htp.print('map.addOverlay(marker);');
    htp.print('}');
    htp.print(');');
    l_t := l_t + 1;
  end loop;
  htp.print('}');
  htp.print('}');
  htp.print('</script>');
  htp.print('  <body onload="initialize()" style="font-family: Arial;border: 0 none;">');
  htp.print('    <div id="map_canvas" style="width: 500px; height: 600px"></div>');
  htp.print(' </body>');
end;
/

This script uses iconic markers which are actually images which are stored at Google.com. For each letter icon there is an image available. Furthermore, you can see that the procedure loops all records of the table and for each record it places a marker on the map.

Step 4: in the created page, create a region of type PL/SQL dynamic content and include the following code:

Begin
  Show_markers;
End;

The result:

maps_read

Integrating Google maps in Oracle Apex is quite simple. There are a lot of possibilities to customize. For more information you can take a look at http://code.google.com/apis/ajax/playground/?exp=maps#

Integrating Google Maps in Oracle Apex, 3.5 out of 5 based on 2 ratings
Ratings:
VN:F [1.9.22_1171]
Rating: 3.5/5 (2 votes cast)

23 comments on “Integrating Google Maps in Oracle Apex

  1. Pingback: Tweets die vermelden Integrating Google Maps in Oracle Apex -- Topsy.com

  2. conspiracy on said:

    Where is: Map with markers – step 4 ?

    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Sorry, there was some error at the end of the text. The last step, create a pl/sql block, should be step 4. I modified the text so hopefully everything becomes more clear now.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  3. Henk Kolthof on said:

    Hallo Marcel,
    Het laatste voorbeeld krijg ik niet werkend. Toch ben ik wel geinteresseerd hoe je de gegevens uit de tabel met de markers op de kaart krijgt. Ik zou dan de te volgen stappen om een nieuwe Apexpagina te maken ook wel willen zien.
    Groet,
    Henk

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Hoi Henk, Sorry, bij het laatste stuk, create a pl/sql block, stond step 1. Dat moest step 4 zijn. Verder heb ik nog wat kleine dingen in de tekst aangepast zodat het wat meer duidelijk wordt.

      VN:F [1.9.22_1171]
      Rating: +1 (from 1 vote)
  4. Baloch on said:

    Sorry! Its not working

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Hi Baloch,
      Can you give us some more info on what it is that’s not working? What have you tried and what went wrong?
      Thanks,
      Frank

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  5. Baloch on said:

    sorry Map with search is not working properly

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. Hello Marcel,
    In the “Map with markers read from a table” example, you have also displaying a table next to the map. How is it possible to associate location A to a corresponding address?
    Also, in the map is it possible to show the address when we take the cursor on top of the marker. Example in your example, if we take the cursor to marker A then it should show Herengracht 205.
    Please provide your suggestion. Thanks

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  7. Krzysztof on said:

    Hi Marcel,

    I was searching through the web someone who can help me with Google Maps API and Oracle APEX. I’ve got already page that is working more less like you’ve described. But what I want to do is to show place on the map (place marker) and this information ( lat, lng) I want to send to Oracle DB. So in this situation it is sending variable value from javascript to PL/SQL. Do you have some idea how to do that??

    Thanks,

    Krzysztof

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  8. Hello Krzysztof,

    What you are looking for, requires some more knowledge of the Google Maps API. I’ll see if I can find some more information for you. Will get back to you on that.

    Regards,
    Michel

    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  9. Hi Krzystof,

    It took me a while, but I found the information you are looking for thanks to a colleague. When you want to return the GPS location of a marker from Google Maps to a page item in APEX, you can use the GEvent.addListener in the Google API. Start by making the marker draggable and use the dragstart and dragend functions to allow the user to place the marker.

    markerOptions = { icon:letteredIcon, draggable:true };

    GEvent.addListener(marker, “dragstart”, function() {
    map.closeInfoWindow();
    });
    GEvent.addListener(marker, “dragend”, function() {
    document.getElementById(“P1_ITEM”).value = marker.getPoint().lat();
    });

    By using document.getElementById you can put the data into your page item.

    Hopefully this information is helpful for you.

    Regards,
    Michel

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  10. Hi

    thanks for the scripts “map with markers read from table”
    it rely help me :)
    does is away to save the map with the markers after i run it?

    Thanks,
    shahar

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  11. Andrew on said:

    Hi, thanks for this. Its very helpful. However when I run it all I get is
    “null; null;null;null;” in the pl/sql region that should display the map.

    Any ideas?

    Thanks
    Andrew

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  12. Yohanes on said:

    hai Marcel can you help me? i’m getting error mesage : ‘Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v2 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Patrick Sinke on said:

      Hi Yohanes,

      Have you created your own key? You probably cannot use the key in Marcel’s example. I think more people have reused this key, causing the usage limit to be exceeded. That’s my guess.
      Try making a key for yourself. On the link you provided is a how-to:
      To create your API key, visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.

      Click the Services link from the left-hand menu, then activate the Google Maps API v2 service.

      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      • nalini on said:

        Hi Yohanes,

        I encountered the same problem with map with markers read from table.

        ‘Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v2 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key

        However, I have created and used my key in place of Marcel’s example.

        I’m using oracle apex…any suggestion?

        VA:F [1.9.22_1171]
        Rating: 0 (from 0 votes)
  13. Sunil on said:

    Amazing, Really Good Stuff

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  14. Hi,
    I have region with PL/SQL Dynamic Content which internally calls a procedure which has HTP.P(‘Hi’); stmts like Show_markers procedure in this blog. So i want this Region(plsql Dynamic Content ) to be printed as PDF document.

    Can any one help on this please ?

    Kind Regards,
    D.Dilip Kumar

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  15. Raoult Leclerc on said:

    Hi Marcel
    With some little change I have got the above script working in my Oracle ApEx application. I’m currently trying to migrate this code in v3 Api, my map is displayed as well but the markers do not. Is there a way to get your script above working in v3 api as Gmap v2 api will be deprecated by end of November this year.

    Raoult

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  16. What code should be passed in step 4? Because you’re saying include this code, but i don’t see any, only from step 3.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter