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!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTMobile Web TechnologyTutorialsadvance web technology,configurable settings,CSS framework,elements,Embed GMap,Embed Google map,Google Map API,Google maps javascript API,GoogleMap,graphical user interface,html basics,html5,javascript,javascript functions,jquery mobile tricks,Multiple Locations,open source javascript,page elements,technology,tips and tricksNowadays, 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....Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.