How to add multiple markers on google map
In the previous tutorial about "Creating Marker on Google Maps", we have discussed how to add google map on the web and create one marker on the location that we want. But the marker that we created is only for one position location (latitude, longtitude).To create multiple markers on google maps, we have to determine which locations to mark it. A location on map is a value in the form of latitude and longitude coordinates. Then a new iteration to set the marker based on the location we have set.
Here is the expected output at the end of this tutorial, as shown in Figure 1 below:
Step by Step Guide: Create Multiple Marker On Google Maps
1. Loading the Google Maps JavaScript APIThis script is required to connect to Google Maps Services
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>2. Set position coordinates of location (latitude and longitude)
Because we are going to create marker for many locations, so we have to prepare which location that we want to mark it. In this tutorial, we will create a marker for five locations :
// Menentukan lokasi berdasarkan latitude dan longitude
var locations = [
['<h4>Ibukota Provinsi Aceh</h4>', 5.550176, 95.319263],
['<h4>Ibukota Kab.Aceh Jaya</h4>', 4.727890, 95.601373],
['<h4>Ibukota Abdya</h4>', 3.818570, 96.831841],
['<h4>Ibukota Kotamadya Langsa</h4>', 4.476020, 97.952447],
['<h4>Ibukota Kotamadya Sabang</h4>', 5.909284, 95.304742]
];3. Add property to map object
var options = {
zoom: 8,
center: new google.maps.LatLng(4.845582, 96.271539),
mapTypeId: google.maps.MapTypeId.ROADMAP
}Please read the tutorial about Google Maps display properties
4. Create a map
This step is to create a map with parameters of the variable / object options above:
// Pembuatan petanya
var map = new google.maps.Map(document.getElementById('map_canvas'), options);5. Create markers and event clicks
In step 5, we will create a marker for each of the different locations and add an event click for each marker whose function is to display the information that we define.
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));
}Complete Source Code
In this example we will create a marker for five cities: Banda Aceh, Sabang, Calang, Langsa and Blangpidie. Each city will display information when the markers is clicked, as shown in Figure 1 above.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Multi Marker Map </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var locations = [
['<h5>Ibukota Provinsi Aceh</h5>', 5.550176, 95.319263],
['<h5>Ibukota Kab.Aceh Jaya</h5>', 4.727890, 95.601373],
['<h5>Ibukota Abdya</h5>', 3.818570, 96.831841],
['<h5>Ibukota Kotamadya Langsa</h5>', 4.476020, 97.952447],
['<h5>Ibukota Kotamadya Sabang</h5>', 5.909284, 95.304742]
];
var infowindow = new google.maps.InfoWindow();
var options = {
zoom: 8,
center: new google.maps.LatLng(4.845582, 96.271539),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
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>
</head>
<body onload="initialize()">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br></br>
<div class="container" style="margin-top:10px">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">Marker Google Maps</div>
<div class="panel-body">
<div id="map_canvas" style="width: 700px; height: 600px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>