Now that you've learned to create a Google map, as well as to place a standard marker on the map. Now we'll show you how to place multiple markers on the same map. Each marker will have its own name, position and info-window. So make sure you know the coordinates of the points, as well as what you want to display in the info-windows before creating your map.
Now enter the following JavaScript (After the map creation part, each block represents one marker) in the <head> section (don't forget the onload command in the <body> element:
function load() {
var map_center = new google.maps.LatLng(37.775196, -122.419220);
var myOptions = {
zoom: 11,
center: map_center,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// set up the first marker
var point1 = new google.maps.LatLng(37.7250, -122.50);
var marker1 = new google.maps.Marker({
position: point1,
map: map,
title:'Marker 1'
});
var html_text1 = 'This is text for the first marker';
var infowindow1 = new google.maps.InfoWindow({
content: html_text1
});
google.maps.event.addListener(marker1, 'mouseover', function() {
infowindow1.open(map, marker1);
});
// set up the second marker
var point2 = new google.maps.LatLng(37.7750, -122.40);
var marker2 = new google.maps.Marker({
position: point2,
map: map,
title:'Marker 2'
});
var html_text2 = 'This is text for the second marker';
var infowindow2 = new google.maps.InfoWindow({
content: html_text2
});
google.maps.event.addListener(marker2, 'mouseover', function() {
infowindow2.open(map, marker2);
});
// set up the third marker
var point3 = new google.maps.LatLng(37.7800, -122.50);
var marker3 = new google.maps.Marker({
position: point3,
map: map,
title:'Marker 3'
});
var html_text3 = 'This is text for the third marker';
var infowindow3 = new google.maps.InfoWindow({
content: html_text3
});
google.maps.event.addListener(marker3, 'mouseover', function() {
infowindow3.open(map, marker3);
});
}
NOTE: Each marker has its own listener and point defined. If you don't define a new point, every marker will display in the same place, rendering the others invisible. Similarly, without its own "Listener", the pop-up window wouldn't show. FYI: If you don't want to have info-windows pop-up over the marker, you can leave out the html_text, infowindow and "google.maps.event.addListener" lines.
Why not use hard-coded Map Marker data?
If you only need to display a limited amount of markers, then hard-coding the markers (as shown above) is fine. But as soon as you need to display a larger number of markers or the position of the markers changes due to external factors, e.g. if you want to show a map where all the delivery trucks are right now it wouldn't do you any good to have the marker postions hard-coded.
Use a dynamic programming language for dynamic markers
Then it is time to use a dymanic language such as PHP to generate the code for you. Using PHP (or other scripting language) you can extract the information for each marker from a database or an XML file on disk. THe next tutorial shows you how to use a database to create dynamic map markers.