I'm using MarkerClustererPlus and then i made an array for style parameter of MarkerClustererOptions passing different type of icons to be shown in map but it not rendering all. Its just picking up the first icon from style array not others.
function initialize() {
var center = new google.maps.LatLng(63.078877, 21.660509);
var locations = [
{name:'ABB', lat:63.0883633, lon:21.6609529, image:'abb.png', webp:'http://www.abb.fi/'},
{name:'Wartsila', lat:63.102724, lon:21.610709, image:'', webp:'http://www.wartsila.com/'},
{name:'EPV', lat:63.092265, lon:21.55922, image:'', webp:'http://www.epv.fi/'},
{name:'Vacon', lat:63.0597281, lon:21.7370728, image:'', webp:'http://www.vacon.fi/'},
{name:'Vamp', lat:63.06153, lon:21.735314, image:'', webp:'http://www.vamp.fi/'}
];
var clusterStyles = [
{textColor: 'white', url: 'do.png', height: 50, width: 50 },
{textColor: 'white',url: 'do1.png',height: 50,width: 50},
{textColor: 'white', url: 'do2.png', height: 50, width: 50}
];
var clusterOptions = {
styles: clusterStyles
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat, locations[i].lon),
icon:locations[i].image,
url:locations[i].webp
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers,clusterOptions);
}
google.maps.event.addDomListener(window, 'load', initialize); body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map {
width: 600px;
height: 400px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerClusterer v3 Simple Example</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="markerclusterer.js"> </script>
</head>
<body>
<div id="map-container"><div id="map"></div></div>
</body>
</html>Which step i'm missing and how can i fix it.
To choose a specific style you have to set the calculator function:
styles: An array of ClusterIconStyle elements defining the styles of the cluster markers to be used. The element to be used to style a given cluster marker is determined by the function defined by the calculator property.
You can se the rest of the docs here.