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&v=2&sensor=false&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:
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&v=2&sensor=false&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:
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&v=2&sensor=false&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:
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&v=2&sensor=false&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:
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#
{ 4 comments… read them below or add one }
Where is: Map with markers – step 4 ?
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.
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
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.
{ 1 trackback }