Display Google Maps Multiple Markers Different Icons
In this tutorial, we use the icon that we have stored in the local directory. If you want to use url address which provide icon, the principle is same, just change the path of icon.
Here is the output we will create in next stage, as shown in Figure 1 below:
As shown in Fig.1, we have five locations marked with markers. Where each for the location has a different icon marker.
If you're new in this tutorial anda want to know more about how to create marker on google maps, read the tutorial below :
Another Example About Making Markers on Google Maps :
- Display location's information on the marker of Google Maps
- How to add multiple markers on Google Maps
- How to display markers on google map from database using php
As described above, we prepare the icon that we store in the local directory. Here we suppose the marker icon is in the directory: icon.
Here is the script to call the path of each icon:
// we create variabel iconMarker to hold the location of icon
var iconMarker = 'icon/';
// variable uniqueIcons to store different icon
var uniqueIcons = [
iconMarker + 'red-dot.png',
iconMarker + 'green-dot.png',
iconMarker + 'blue-dot.png',
iconMarker + 'orange-dot.png',
iconMarker + 'purple-dot.png',
iconMarker + 'pink-dot.png',
iconMarker + 'yellow-dot.png'
]Completed Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Marker Map with different icons</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 = [
['<h4>Bondi Beach</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]
];
var iconMarker = 'icon/';
var uniqueIcons = [
iconMarker + 'red-dot.png',
iconMarker + 'green-dot.png',
iconMarker + 'blue-dot.png',
iconMarker + 'orange-dot.png',
iconMarker + 'purple-dot.png',
iconMarker + 'pink-dot.png',
iconMarker + 'yellow-dot.png'
]
var iconsLength = uniqueIcons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(4.845582, 96.271539),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var infowindow = new google.maps.InfoWindow();
var markers = new Array();
var iconCounter = 0;
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: uniqueIcons[iconCounter]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
function autoCenter() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
map.fitBounds(bounds);
}
autoCenter();
};
</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">Different Icon On The Location of Google Maps </div>
<div class="panel-body">
<div id="map" style="width: 700px; height: 600px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>