learn web technologies, the easy way

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.