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






1 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/

 

1
At:- 9/28/2020 11:03:38 AM
Thanks for Fiddle, it really helped 0
By : bhanu - at :- 10/8/2020 8:39:02 AM






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

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly