Placing multiple markers on a Google Map

13 March 2012

View demo

TL;DR version: Scroll down and copy/paste the last script in the head of your page. Add onLoad="initializeMaps" to you body tag and put an element with id="map_canvas" in your page. Be sure to give it dimensions and your ready to go! Oh, and don't forget to include the Google Maps API..

In the other two tutorials we've learned how to create a map with directions and a map with a custom marker on it and in this tutorial we'll learn how to put multiple markers on your map. With info window popups!

Lets keep it simple. Take the base map script that we also used in our previous tutorials:

function initializeMaps() {
    var latlng = new google.maps.LatLng(-33.92, 151.25);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}

Before we initialize this map you need an array (that's a list) with locations and titles. That looks like this:

var markers = [
      ['Bondi Beach', -33.890542, 151.274856],
      ['Coogee Beach', -33.923036, 151.259052],
      ['Cronulla Beach', -34.028249, 151.157507],
      ['Manly Beach', -33.80010128657071, 151.28747820854187],
      ['Maroubra Beach', -33.950198, 151.259302]
    ];

This code is quite easy. Every line in this array stands for a marker. First value is the title of the marker and the second and last form the locational latitude and longitude.

Now lets add a few lines of code to out base script to loop through these marker list and place those markers on the map:

var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}


That's all. It's that easy!

The complete copy-and-paste script



var markers = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507],
    ['Manly Beach', -33.80010128657071, 151.28747820854187],
    ['Maroubra Beach', -33.950198, 151.259302]
];


function initializeMaps() {
    var latlng = new google.maps.LatLng(-33.92, 151.25);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    var infowindow = new google.maps.InfoWindow(), marker, i;
    for (i = 0; i < markers.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}


Auto-center map around markers



I changed the above script and added a few lines of code to automatically center and zoom the map around the markers. This can easilly be done with the LatLngBounds() function from the Google Maps API (v3):

var bounds = new google.maps.LatLngBounds();
// in the marker-drawing loop:
bounds.extend(pos);
// after the loop:
map.fitBounds(bounds);

If these lines are included in the script, it looks like this:

var markers = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507],
    ['Manly Beach', -33.80010128657071, 151.28747820854187],
    ['Maroubra Beach', -33.950198, 151.259302]
];

function initializeMaps() {
    var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < markers.length; i++) {
        var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(pos);
        marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        }
    })(marker, i));
    map.fitBounds(bounds);
}
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

86 comments

Previous Page 1 of 9 Next
  1. Gravatar

    Nathan

    06 October 2016

    Hi, I was wondering if you had an idea about how you'd alternate between two arrays and their markers? :)

  2. Gravatar

    Mark

    15 June 2016

    Also, I forgot to mention. I'm using a for in loop in my functions.js file.

  3. Gravatar

    Mark

    15 June 2016

    I'm setting-up a map_data.php file with markers very similar to the coded presented above. It seems that the code is javascript. When I save the file as php it converts the var markers into commented code. What can I do to resolve this issue? Any help is greatly appreciated.

  4. Gravatar

    Tim

    27 April 2016

    Very nice coding,.....!!
    Is there anyway to style content (infowindow) since you are using
    infowindow.setContent(markers[i][0]); command and I don't see the way to style infowindow ??

    Would be great if it could!

  5. Gravatar

    Tim

    27 April 2016

    Very nice coding,.....!!
    Is there anyway to style content (infowindow) since you are using
    infowindow.setContent(markers[i][0]); command and I don't see the way to style infowindow ??

    Would be great if it could!

  6. Gravatar

    Alain

    30 November 2015

    Thank you for this, the autocenter function was exactly what I was looking for

  7. Gravatar

    Shrikant Shiledar

    24 June 2015

    Its not useful for my project, Because that code have hard coded longitute and lattitude so not work further.

  8. Gravatar

    Hamdy

    14 April 2015

    who Saying the codes not working , must be careful between 'map_canvas' and 'map-canvas' difference!

  9. Gravatar

    Asmat Ali

    08 March 2015

    The code is not working at all. I have not seen such a useless tutorial yet.

  10. Gravatar

    yamuna

    01 February 2015

    thanks its very much usefull for me its working well

Previous Page 1 of 9 Next