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!
We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
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
Leave a Reply