Apex with Google Maps: Markers (Map Pins)
This is the second in a series of blog posts on using Google maps in Oracle Application Express. Other posts:
Apex With Google Maps: Getting Started
After displaying a map, the next thing you probably want to do is drop some markers, or map pins on it. For this we will go into a bit more detail. Not only will we drop a marker on the map, but I will drop multiple markers, with info bubbles, and marker clusters.
Single Marker
To display a simple marker you create a new marker object, along with some properties, such as location and icon image.
marker = new google.maps.Marker({
map:map,
icon: "#APP_IMAGES#beachflag.png",
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(59.327383, 18.06747)
});
[/sourcecode]
Note that the position parameter requires a Google maps LatLng object. The icon parameter takes a URL in which you can also use the Apex substitution strings for application or workspace images. If you leave the icon parameter null, the default, red Google map marker will be used.
In order to make the marker clickable, and have an info window appear, we need to add an InfoWindow, and an event listener that opens the InfoWindow object:
google.maps.event.addListener(marker,’click’,function(){
iw.open(map,marker);
iw.setOptions({content: "Hello World!"});
});
[/sourcecode]
Multiple Markers
Most likely you may want to display multiple markers, each with its own info window. In this case you need to store the coordinate data and the info window text in an array, and loop through it to draw the markers.
Lets store our map marker data in an array:
var data = [{name: ‘Label 1’,lat: ‘59.32’,lng: ‘18.08’}
,{name: ‘Label 2’,lat: ‘59.33’,lng: ‘18.06’}
,{name: ‘Label 3’,lat: ‘59.34’,lng: ‘18.07’}
,{name: ‘Label 4’,lat: ‘59.35’,lng: ‘18.07’}];
[/sourcecode]
After initializing the map, create a function to handle the markers ,the loop through the array and invoke the function:
function addMarker(pData){
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(pData.lat,pData.lng)
});
google.maps.event.addListener(marker,’click’,function(){
var iw = new google.maps.InfoWindow();
iw.setOptions({content: "InfoWindow: " + pData.name + "<hr>"});
iw.open(map,this);
map.setCenter(this.getPosition());
});
}
[/sourcecode]
Note the use of the this keyword in the iw.open function. This is to ensure that each marker gets its own info window. You can also use HTML for the info window content to make it look pretty. On line 11, I’ve added a call to center the map on the coordinates of the marker.
Complete code to render the map, markers and info windows:
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var marker
var map
var data = [{name: ‘Label 1’,lat: ‘59.32’,lng: ‘18.08’}
,{name: ‘Label 2’,lat: ‘59.33’,lng: ‘18.06’}
,{name: ‘Label 3’,lat: ‘59.34’,lng: ‘18.07’}
,{name: ‘Label 4’,lat: ‘59.35’,lng: ‘18.07’}
,{name: ‘Label 5’,lat: ‘59.35’,lng: ‘18.08’}
,{name: ‘Label 6’,lat: ‘59.34’,lng: ‘18.08’}
,{name: ‘Label 7’,lat: ‘59.32’,lng: ‘18.00’}
,{name: ‘Label 8’,lat: ‘59.32’,lng: ‘18.01’}
,{name: ‘Label 9’,lat: ‘59.30’,lng: ‘18.00’}
,{name: ‘Label 10’,lat: ‘59.34’,lng: ‘18.09’}];
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
function addMarker(pData) {
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(pData.lat, pData.lng)
});
google.maps.event.addListener(marker, ‘click’, function () {
var iw = new google.maps.InfoWindow();
iw.setOptions({
content: "InfoWindow: " + pData.name + "<hr>"
});
iw.open(map, this);
map.setCenter(this.getPosition());
});
}
for (var i = 0; i < data.length; i++) {
addMarker(data[i]);
}
}
[/sourcecode]
I did something similar earlier this year – I’m glad to see we came to a similar method – although your use of arrays intrigues me. I generate my javascript from a loop of records, I might check if I can improve performance.
Yup – it’s amazing what a good refactor does, now I’ve got my head around JSON