How to put multiple markers on Google Maps

If you are looking for How to put multiple markers on Google Maps then this post will be effective for you. Google Maps provides many features to mark a distinct location but in case you need multiple markers for pointing to different places i.e restaurants then this tutorial will provide the step and full source code to do so. I will highlight code by blue color.

How to put multiple markers on Google Maps

how to put multiple markers on Google Maps

First Make an HTML page like below

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>

Add up below script tag to <head> tag . Replace API key with Yours.

<script src=”http://maps.google.com/maps/api/js?key=AIzaSyC4TTm61R0CzyACTuJ7iE9SE_B0ElMmwxc&sensor=false”
type=”text/javascript”></script>

Make a div to load map.

<div id=”map” style=”width: 500px; height: 400px;”></div>

Now Time for actual JavaScript Code to Place Markers on Google Maps

Copy and Paste Below Code inside body in your HTML page

<script type=”text/javascript”>
var locations = [
[‘Kathmadnu Nepal’, 27.736371976933608, 85.31812490845948, 2],
[‘Samakhsui Dang’, 27.736580890387906, 85.32009901429444, 1],

];

var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 10,
center: new google.maps.LatLng(27.7375115, 85.31894030000001),
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>

You can change the desire marker location by changing below code i.e Location variable

var locations = [
[‘Kathmadnu Nepal’, 27.736371976933608, 85.31812490845948, 2],
[‘Samakhsui Dang’, 27.736580890387906, 85.32009901429444, 1],
];

First or 0th position is the Marker and Location name i.e  1st Position of array is for the location latitude and longitude. Enter the desired co-ordinates that you want to locate in the map. You can easily get location latitude and longitude number on Google Maps or Bing Maps. Here, I have made only two markers but You can add another array in the ‘var location ‘ and easily map to the maps.

For centering the Google Map to your location then change the coordinates below. If you don’t change then markers and the map camera position will be on different location.

center: new google.maps.LatLng(27.7375115, 85.31894030000001)

If you want more zoom then increase the zoom value below and If you need less zoom then decrease the zoom value below and paste it into your code.

zoom: 10,

This is the end of this tutorials. To get the latest update please allow the notification so that you can get the latest news earlier than others.

More tutorials

Which Linux should I choose?

Related posts

Leave a Comment