Multiple Marker on Google Map

Here is how you can display multiple markers on google map if you have multiple addresses.
You need latitude and longitude of the addresses to display marker on google map.
Don’t worry if you have only the list of address. Google provide service to get latitude longitude of address if you have valid address.

Load map on page

To load Map on page you need google map api js that you can find here. put it into head tag.

Create div tag with id attribute in which we load our Map. For ex.

<div id="map_canvas"></div>

Now load map in div tag by using this code. Here is a map with simple single marker.

$(document).ready(function() {
   var map;
   var bounds = new google.maps.LatLngBounds();
   var elevator;
   var myOptions = {
       zoom: 4,
       center:{lat: -25.363, lng: 131.044},
       mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   map = new google.maps.Map($('#map_canvas')[0], myOptions);

   var marker = new google.maps.Marker({
        position: {lat: -25.363, lng: 131.044},
	map: map,
	});
    });
});

Now test your file and you get simple single marker.

Map with multiple marker

to display multiple marker on map get the array of the addresses and store it in some variable.

for ex. take this sample.

var addresses = [
    {'location': 'The Grand Bhagwati,ahmedabad'},
    {'location': 'Global Pagoda Road, Gorai Island, Borivali West, Mumbai, Maharashtra'},
    {'location': '583 Orchard Rd, B1-25, Singapore'},
];

Now we only have the addresses. we have to get latitude ,longitude of the addresses and put a marker on a map.

to do this write following code.

var marker, i;

for (var i in addresses) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[i].location+ '&amp;amp;sensor=true', null, function(data) {
    var p = data.results[0].geometry.location
    var latlng = new google.maps.LatLng(p.lat, p.lng);
    bounds.extend(latlng);

    marker = new google.maps.Marker({
        position: latlng,
        map: map,
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
            //put infowindow code here
            }
        })(marker, i));
    });
}

Now if you see your code in browser you don’t see all the marker of addresses, but if you zoom out little you get all your markers.

Dynamically set zoom option and bound

to set zoom option dynamically comment zoom option code in myOptions variable in Map object.
we have to dynamically set zoom option and bound of the Map. so all the markers is shown when the map load.

Put this code inside $.getJSON in for loop

bounds.extend(latlng);

and below code in for loop outside $.getJSON

map.fitBounds(bounds);
map.setCenter(bounds.getCenter());

now Map loads with dynamic zoom level and bound of the Map set dynamically according to the addresses.

Display address in Infowindow

you can also display address of that marker when you click on that marker. For that you have to use InfoWindow

Create object of InfoWindow

var infowindow = new google.maps.InfoWindow();

and now attach this infowindow to each marker inside for loop on onclick event.

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent(data.results[0].formatted_address);
        infowindow.open(map, marker);
        window.location.href = marker.url;
    }
})(marker, i));

You may also display infowindow on other mouse event also.
For Ex.
To display infowindow on mouseover event write these code instead of onclick event in for loop

google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
    return function() {
        infowindow.setContent(data.results[0].formatted_address);
        infowindow.open(map, this);
    }
})(marker, i));

google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
    return function() {
        infowindow.setContent(data.results[0].formatted_address);
        infowindow.close(map, this);
    }
})(marker, i));

Now if you change the array of the addresses then the map zoom level and bound changes accordingly to that address.

Below you can download complete code that explained above
Download Now: multiple marker on Google Map

Enjoy 🙂

3 thoughts on “Multiple Marker on Google Map

  • November 22, 2015 at 7:18 am
    Permalink

    Hi..
    I need auto suggested place with drag pin address.. Please, give me few ideas about that.
    Thanks in advance.

    Regards,
    Raghav Parekh.

    Reply
    • November 22, 2015 at 12:02 pm
      Permalink

      For that you have to set dragable option for marker true

      marker = new google.maps.Marker({
          position: latlng,
          map: map,
          url:addresses[i].url,
          draggable:true
      });

      and add the dragend event to the marker.

      google.maps.event.addListener(marker, 'dragend', (function(marker, i) {
          //geocodePosition(marker.getPosition());
          geocoder.geocode({
          latLng: marker.getPosition()
          }, function(responses) {
              if (responses &amp;&amp; responses.length &gt; 0) {
                  infowindow.setContent(responses.results[0].formatted_address);
              } else {
                  alert('ok');
              }
          });
       })(marker, i));
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *