Follow Us on Twitter

Integrating Google Maps in Oracle Apex

by Marcel van der Plas on October 4, 2009 · 28 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=";v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></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());

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>

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:


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=";v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></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) {
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],
marker = new GMarker(point);
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;

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

<body style="font-family: Arial;border: 0 none;">
<form action="#">
<b>Search for an address:</b>
<input value="" size="40" />
<div style="width: 500px; height: 300px"></div>
<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 />

The result:


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=";v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></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 = -;

for (var i = 0; i < 10; i++) {
var point = new GLatLng( + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));

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:


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;

  htp.print('<script src=";v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"" dirty="false"></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
    htp.print('function(point) {');
    htp.print('var baseIcon = new GIcon(G_DEFAULT_ICON);');
    htp.print('baseIcon.shadow = "";');
    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 = "'||chr(65+l_t)||'.png";');
    htp.print('markerOptions = { icon:letteredIcon };');
    htp.print('var marker = new GMarker(point,markerOptions);');
    l_t := l_t + 1;
  end loop;
  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>');

This script uses iconic markers which are actually images which are stored at 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:


The result:


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

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

{ 27 comments… read them below or add one }

conspiracy March 5, 2010 at 11:17 am

Where is: Map with markers – step 4 ?


Marcel van der Plas March 17, 2010 at 1:07 am

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.


Henk Kolthof March 16, 2010 at 5:26 pm

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.


Marcel van der Plas March 17, 2010 at 1:09 am

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.


Baloch October 26, 2010 at 9:52 am

Sorry! Its not working


Frank Dorst October 26, 2010 at 9:55 am

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?


Baloch October 26, 2010 at 9:54 am

sorry Map with search is not working properly


san December 30, 2010 at 6:24 pm

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


Krzysztof February 21, 2011 at 2:26 am

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??




Michel van Zoest February 23, 2011 at 11:11 pm

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.



Michel van Zoest April 15, 2011 at 11:15 am

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() {
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.



shahar February 15, 2012 at 11:06 pm


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?



nalini August 24, 2012 at 8:01 pm

how did you get it to work?

I’m getting an error with v2 and v3 google api


Andrew March 21, 2012 at 2:30 pm

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?



Yohanes April 30, 2012 at 8:05 am

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:


Patrick Sinke June 14, 2012 at 1:51 pm

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 and log in with your Google Account.

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


nalini August 22, 2012 at 4:08 pm

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:

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

I’m using oracle apex…any suggestion?


Sunil June 14, 2012 at 1:19 pm

Amazing, Really Good Stuff


dilip October 15, 2012 at 1:15 pm

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


Raoult Leclerc August 22, 2013 at 10:43 pm

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.



elvira October 18, 2014 at 12:26 am

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.


Michel van Zoest October 18, 2014 at 5:06 pm

Hello Elvira,

There are three lines of code mentioned in Step 4:


Hope this helps.


Angel December 29, 2015 at 9:06 pm


I just want to know who we can put many markers without running out of apex resources, actually I’m traying to load hundreds of location in a map using oracle apex and google maps, practically I just can load a few point (less than 20). Is this possible?

Thanks for your comments.


Michel van Zoest December 30, 2015 at 10:13 am

Hello Angel,

I don’t think the APEX resources would be a problem here, since your map is still located on the Google servers.
And since I’ve seen maps with literally thousands of markers on it, I don’t think that should be a problem either.

The only thing I can think of is that Google limits the possibilities of adding markers to outside applications. Anything else should be okay.


mohammad January 15, 2017 at 5:56 am


i want find my location (lat,lon) on apex ?

Thanks for your comments.


Ari February 21, 2017 at 3:56 am


I am trying to implement the Map with markers read from a table however I am not able to compile the procedure,
I am using Application Express ,
I have added my Google APi key as well.
would you be able tell me what I would be possibly doing wrong the error I get is –
Error: ORA-06552: PL/SQL: Compilation unit analysis terminated ORA-06553: PLS-201: identifier ‘ACCOUNT01.SYS_PLSQL_1070379_9_1’ must be declared


mamtha June 29, 2017 at 6:43 am


MAp intergration with webservices.

I have an institution details in my table, Based on the Name Map has to locate in multiple places


Leave a Comment


{ 1 trackback }

Previous post:

Next post:

About Whitehorses
Company profile

Whitehorses website

Home page

Follow us
Blog post RSS
Comment RSS