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 and Demo/Preview is also available.

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));
    }

Preview

Enjoyed this Post?

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

http://www.css-jquery-design.com/2017/08/how-to-add-multiple-locations-on-embed-google-map/2018-08-29T21:44:07+00:00DhirajCSS - 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....DhirajDhiraj Kumarmr.dhirajkumar@gmail.comAdministratorA Warm Welcome & Thanks for Visiting my Website!

Dhiraj kumar  is an Information Technology graduate who loves learning new things.  A very popular and colorful individual, he has a particular passion for people, blogs, and the use of technology for social progress. He spends the whole day sitting in front of the computer, making himself updated with the new updates in technologies going on around him. He has more than 15 years of experience in the field of Website designing and Accessibility. He has a strong hand in Flash animation, 2D and 3D Presentation, UI web softwares in Flash with Action Scripting 2.0 / 3.0, Video Presentations, Flash Presentations, HTML, CSS, JavaScript, jQuery, Photoshop, 3Ds Max, Maya etc. read more..

ALSO, TO SAVE BOTH OF US SOME TIME, YOU SHOULD KNOW THAT: Currently, I am not available for any type of freelance projects. Follow @dhiraj_kumarHTML5, CSS3 & jQuery - Web Design / Development