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 2 of 9 Next
  1. Gravatar

    Fester

    09 December 2014

    Your code have lots of errors and bad practices. Please don't post, because a lot of newbies can be very confused with that.

  2. Gravatar

    tanami

    28 November 2014

    not usefull script

  3. Gravatar

    Sebastian

    11 November 2014

    Very helpful!
    BUT, I have 4 difficult types in my map and want for every type his own icon.
    E.g. burger icon for type "food". Bit I don't know how I can implement this. Can anyone help me?

  4. Gravatar

    Frank

    21 October 2014

    It's not working, the last 4 lines must be:

    })(marker, i));
    map.fitBounds(bounds)
    }
    }

    Thanks!

  5. Gravatar

    Kevin

    20 October 2014

    Very helpful! Thank you! I will pass my class now. :)

  6. Gravatar

    Akil

    13 October 2014

    I need to add a marker for every 10 second, I have vehicle consider vehicle number 20, Every 10 second I am getting the latest location of the vehicle, so I need to keep the first location as well as second location and SO ON, can help me to solve this...

    Please do the needful. Looking for reply desparatly

  7. Gravatar

    Francisco

    06 October 2014

    "too much recursion " gives me that error

  8. Gravatar

    Pritam Roy Chowdhury

    01 October 2014

    this code isnt working

  9. Gravatar

    subhapriya

    01 October 2014

    how to display all markers using auto zoom in google map

  10. Gravatar

    chirag

    03 September 2014

    Nice code. Its working fine for me. Thanks

Previous Page 2 of 9 Next