How to Add Multiple Locations on Embed Google Maps

Nowadays, it’s a trend to show office locations in contact page. For this, front-end developers always embed Google map API. Sometimes, its required to show multiple office locations in same google map.

In most cases, frontend developer always stuck at this requirement. But, It’s very easy! Thanks to google API. I am sharing this method. HTML, CSS and JavaScript is written after Demo/Preview.

Preview

The HTML

<div id="map"></div>

The CSS

#map {
    height: 400px;
    width: 500px
}

The JS

var locations = [
      ['Vasco da Gama, Goa', 15.4565658,73.691187],
        ['Gokarna Beach, Karnataka', 14.5444702,74.3113765],
        ['Ganpati Pule, Maharashtra', 17.1531319,73.2606766],
        ['Marari Beach Alappuzha, Kerla', 9.6015884,76.2961382],
        ['Kovalam Beach, Tamil Nadu', 12.8235118,80.2430348],
        ['Havelock Island, Andaman and Nicobar Islands', 11.9657763,92.9192513],
        ['Pondicherry', 11.9363886,79.778056],
        ['Mahabalipuram, Tamil Nadu', 12.6227714,80.1572869],
        ['Visakhapatnam, Andhra Pradesh', 17.7390479,82.98162],
        ['Gopalpur, Orissa', 19.2656907,84.7964247],
        ['Mandarmani Sea Beach, West Bengal', 21.6677234,87.7112334],
        ['Tarkarli, Maharashtra', 16.0361114,73.4810613],
        ['Mandarmani Sea Beach, West Bengal', 21.6677234,87.7112334]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: new google.maps.LatLng(22, 74),
      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));
    }

Enjoyed this Post?

If you enjoyed this article, feel free to share this tutorial with your friends. Thanks for reading!