Adding Multiple markers in Google Maps using Javascript API?

I am folllowing this tutorial "Using Google maps Javascript api in HTML (Show location with Marker)" but as this example shows how to add only one location with marker in google maps. I would like to add multiple markers in multiple locations of maps. How can I do it. Suppose I have following locations in an array:

var LocationsForMap = [
      ['Delhi',28.704060, 77.102493],
      ['London', 51.507351, -0.127758],
      ['Washington', 47.751076,-120.740135]
    ];

In the above code, we have location name with it's latitude and longitude.

Asked by:- bhanu

: 7296 At:- 9/27/2020 3:32:07 PM

Javascript google maps js api

add comment to question

2 Answers

Answered by:- vikas_jk

You can simply loop through each location with lat/long and add marker by using new "google.maps.Marker", as example below


    for (i = 0; i < LocationsForMap.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(LocationsForMap[i][1], LocationsForMap[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(LocationsForMap[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

Complete HTML/Javascript source code will be

<html>
<head>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script>

var LocationsForMap = [
        ['Delhi',28.704060, 77.102493],
          ['Jaipur',26.9124, 75.7873],
      ['London', 51.507351, -0.127758],
      ['Washington', 47.751076,-120.740135]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(28.704, 77.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

    for (i = 0; i < LocationsForMap.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(LocationsForMap[i][1], LocationsForMap[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(LocationsForMap[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
</script>
</body>
</html>

Note: In the above code, I am not using google api key, please follow the link: https://qawithexperts.com/article/javascript/using-google-maps-javascript-api-in-html-show-location-with/305 on how to configure API key for google maps and use google maps in HTML/JS.

Output:

here is the fiddle link: https://jsfiddle.net/3txsvfL6/ you can verify output using this, but we are using development mode maps in it.

At:- 9/28/2020 11:03:38 AM Updated at:- 10/1/2022 6:21:10 AM

Thanks for Fiddle, it really helped 0

By : bhanu - at :- 10/8/2020 8:39:02 AM

comment to above answer

Answered by:- jaya

Above answer works great and is easy solution to add multiple markers in Google maps using Javascript, but if you are getting performance issue when loading page with multiple markes, you can try MarkerClusterer Javascript plugin for adding multiple markers.

 var LocationsForMap = [
        ['Delhi',28.704060, 77.102493],
          ['Jaipur',26.9124, 75.7873],
      ['London', 51.507351, -0.127758],
      ['Washington', 47.751076,-120.740135]
    ];
 
 function initialize() {
    var center = new google.maps.LatLng(47.4419, -121.1419);

    var gmap = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i <  LocationsForMap.length;  i++) {
      var latLng = new google.maps.LatLng(LocationsForMap[i][1], LocationsForMap[i][2]);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer({gmap, markers});
  }
  google.maps.event.addDomListener(window, 'load', initialize);

That's it.

At:- 10/1/2022 12:55:13 PM