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!

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!