How to show multiple markers in google map using google map API? This tutorial will explain how to create Responsive Google Map with multiple markers with live demo. You can use your Google Map API key for this. But for the demo purpose I’m using without google map API key.
1. Create the map location element
Here, I’m using a div with full width and full height of the screen. the style height 100vh means full height of the screen and width as 100%. So the view will be responsive for all devices.
<div id="map-wrapper" style="width: 100%; height: 100vh; margin:0 auto;"></div>
You can read users location in google map using address in PHP and JavaScript my another article.
2. Add Google Map API Key with map library
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
OR using API Key
<script type="text/javascript" async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
3. Get your list of locations into JavaScript Array
var locations = [
['Sri Lanka', 6.7106408,79.3470383, 1],
['India', 13.0478221,80.0685805, 5],
['Brazil', -13.6546815,-69.7509821, 3],
['Australia', -33.8473551,150.6510978, 2],
['United States', 36.2370315,-113.7824561, 4]
];
4. Final Step
var map = new google.maps.Map(document.getElementById('map-wrapper'), {
zoom: 2,
center: new google.maps.LatLng(6.7106408,79.3470383), // Center location when load the map on first time
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));
}
Put all together
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Google Map with multiple markers | WebExplorar.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="map-wrapper" style="width: 100%; height: 100vh; margin:0 auto;"></div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var locations = [
['Sri Lanka', 6.7106408,79.3470383, 1],
['India', 13.0478221,80.0685805, 5],
['Brazil', -13.6546815,-69.7509821, 3],
['Australia', -33.8473551,150.6510978, 2],
['United States', 36.2370315,-113.7824561, 4]
];
var map = new google.maps.Map(document.getElementById('map-wrapper'), {
zoom: 2,
center: new google.maps.LatLng(6.7106408,79.3470383), // Center location when load the map on first time
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));
};
</script>
</body>
</html>
Download “Responsive Google Map with multiple markers” responsive-google-map-multiple-markers-WebExplorar.com_.zip – Downloaded 579 times – 1.15 KB
