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
2
: 7116 At:- 9/27/2020 3:32:07 PM
Javascript google maps js api







2 Answers
profileImage 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:

multiple-marker-in-javascript-google-maps-min.png

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

2
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


profileImage 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.

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






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use