Skip links

Responsive Google Map with multiple markers

How to show multiple markers in google map using google map API? This tutorial will explain how to create Responsive Google Map with multiple markers with live demo. You can use your Google Map API key for this. But for the demo purpose I’m using without google map API key.

1. Create the map location element

Here, I’m using a div with full width and full height of the screen. the style height 100vh means full height of the screen and width as 100%. So the view will be responsive for all devices.

<div id="map-wrapper" style="width: 100%; height: 100vh; margin:0 auto;"></div>

 

2. Add Google Map API Key with map library

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

OR using API Key

<script type="text/javascript" async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

 

3. Get your list of locations into JavaScript Array

        var locations = [
          ['Sri Lanka', 6.7106408,79.3470383, 1],
          ['India', 13.0478221,80.0685805, 5],
          ['Brazil', -13.6546815,-69.7509821, 3],
          ['Australia', -33.8473551,150.6510978, 2],
          ['United States', 36.2370315,-113.7824561, 4]
        ];

 

4. Final Step

var map = new google.maps.Map(document.getElementById('map-wrapper'), {
          zoom: 2,
          center: new google.maps.LatLng(6.7106408,79.3470383), // Center location when load the map on first time
          mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

        var marker, i;

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

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

 

Put all together

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">	
    <title>Responsive Google Map with multiple markers | WebExplorar.com</title> 	
    <meta name="viewport" content="width=device-width, initial-scale=1">    
</head>

<body> 
    <div id="map-wrapper" style="width: 100%; height: 100vh; margin:0 auto;"></div>  
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>   
<script>
        var locations = [
          ['Sri Lanka', 6.7106408,79.3470383, 1],
          ['India', 13.0478221,80.0685805, 5],
          ['Brazil', -13.6546815,-69.7509821, 3],
          ['Australia', -33.8473551,150.6510978, 2],
          ['United States', 36.2370315,-113.7824561, 4]
        ];

        var map = new google.maps.Map(document.getElementById('map-wrapper'), {
          zoom: 2,
          center: new google.maps.LatLng(6.7106408,79.3470383), // Center location when load the map on first time
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

        var marker, i;

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

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

[wpdiscuz-feedback id=”pw2uh8wek7″ question=”Please leave a feedback on this” opened=”0″][/wpdiscuz-feedback]

Download “Responsive Google Map with multiple markers” responsive-google-map-multiple-markers-WebExplorar.com_.zip – Downloaded 30 times – 1 KB