link markers to custom styled map - google-maps

Question

Using samples from Customizing the Map I created two custom styled map types. Now my map has four tabs.
I would like to display green markers on the green map (tab), and red markers on the red map (tab). I haven't seen a similar question, is this even possible with this approach or do I need to look into something else?
EDIT: during preview I could see red and green maps (tabs) but after posting they are not showing in the snippet. There should be four options for the map:
Map Satellite red green
Not sure why it looks different after posting.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(51, 4),
zoom:8,
mapTypeControlOptions: {
mapTypeIds: ["roadmap", "satellite", "red", "green"],
},
});
var red = new google.maps.StyledMapType(
[
{
"featureType": "administrative",
"stylers": [
{
"visibility": "on"
}
]
}
],
{ name: "red" }
);
map.mapTypes.set("red", red);
map.setMapTypeId("red");
var green = new google.maps.StyledMapType(
[
{
"featureType": "administrative",
"stylers": [
{
"visibility": "on"
}
]
}
],
{ name: "green" }
);
map.mapTypes.set("green", green);
map.setMapTypeId("green");
var markers = [];
// make random red, yellow, blue markers
for (var i = 0; i < 20; i++) {
var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
var marker = new google.maps.Marker({
position: latLng,
icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
label: '${i}',
map: map
});
markers.push(marker);
}
for (var i = 0; i < 20; i++) {
var latLng = new google.maps.LatLng(51.11 - Math.random(),4.11 - Math.random());
var marker = new google.maps.Marker({
position: latLng,
icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
label: '${i}',
map: map
});
markers.push(marker);
}
for (var i = 0; i < 20; i++) {
var latLng = new google.maps.LatLng(51.11 - Math.random(),4.11 - Math.random());
var marker = new google.maps.Marker({
position: latLng,
icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
label: '${i}',
map: map
});
markers.push(marker);
}
// match cluster icon to markers
var calc = function(markers, numStyles) {
for (var i = 0; i < markers.length; i++) {
if (markers[i].getIcon().indexOf("red.png") > -1) {
return {text: markers.length, index: 3}; // index of red
}else if (markers[i].getIcon().indexOf("yellow.png") > -1) {
return {text: markers.length, index: 2}; // index of yellow
}else if (markers[i].getIcon().indexOf("green.png") > -1) {
return {text: markers.length, index: 1};// index of blue
}
}
}
// define cluster icons
var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{
height: 50,
url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m1.png",
width: 50
},
{
height: 50,
url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m2.png",
width: 50
},
{
height: 50,
url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m3.png",
width: 50
}]
};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
markerCluster.setCalculator(calc);
}
#map {
height: 80%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<script defer src="https://maps.googleapis.com/maps/api/js?v=3.42&key=YOUR_API_KEY&callback=initMap"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>

Answer 1

From the question one thing that was not overly clear is whether or not the colour of the cluster icon should be the same as the colour of the icons. The default, numerically indexed, available colours do not include green yet your code does specifically reference this colour - as an icon green is perfectly fine however. Because of this the following might only be "close" to the initial requirement as there is no Green.
If you were hosting the various cluster images on your own server it is trivial to create a new icon in green!
With that in mind perhaps the following will be of use -
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: Clustered Markers with Custom "Map Stylers"</title>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
.label{
padding:0.25rem;
border:2px solid gray;
border-radius:0.5rem;
background:whitesmoke;
text-align:center;
}
.blue{}
.yellow{color:black!important;background:yellow}
.red{}
.pink{color:black!important;background:pink;}
.purple{}
</style>
<script src='//developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
<script>
const additional_stylers=true;
// pseudo random number generator
const mt_rand=function(a,b){
return Math.floor( Math.random() * ( b - a + 1 ) + a );
};
/*
These correspond to the colours of the icons available within
the default icons found number 1-5:
https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m[N].png
There is no Green...
*/
const colours={
'Blue':{
color:'#0000ff',
compliment:'#ff8000'
},
'Yellow':{
color:'#fbf6d1',
compliment:'#f1d1fb'
},
'Red':{
color:'#f1d7d7',
compliment:'#d89595'
},
'Pink':{
color:'#f08194',
compliment:'#f09381'
},
'Purple':{
color:'#9365f7',
compliment:'#a387de'
}
};
function initMap(){
/*
set the map with basic options
- append the new MapTypeIds
*/
let latlng=new google.maps.LatLng( 51, 4 );
let options = {
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions:{
mapTypeIds:[ 'roadmap' ].concat( Object.keys( colours ) ),
}
};
const map = new google.maps.Map( document.getElementById('map'), options );
// set up the colours for themes and icons/markers
let rgb={};
/*
for each colour, add a new map styler and
create some markers - these are not yet
added to the map.
*/
Object.keys(colours).forEach( ( colour,index ) => {
/* set the custom style rules */
let rules=[
{ featureType:'administrative', elementType:'all',stylers:[ { visibility:'on' } ] }
];
if( additional_stylers ){
rules.push({ featureType:'road', elementType:'geometry', stylers:[ { color:colours[colour].compliment } ] });
rules.push({ featureType:'water', elementType:'geometry.fill', stylers:[ { color:colours[colour].color } ] });
/* other rules... */
};
rgb[colour]={
'markers':[],
'style':new google.maps.StyledMapType( rules, { name:colour } )
};
map.mapTypes.set( colour, rgb[colour].style );
/*
generate a varying number of markers for each
cluster colour || or just 20 as per original...
*/
for( let i=0; i < ( 20 * ( index + 1 + mt_rand(1,10) ) ); i++ ){
let mkr=new google.maps.Marker({
position: new google.maps.LatLng( 51.11 - Math.random(), 4.11 - Math.random() ),
colour:colour,
title:i.toString(),
icon:{
url:'//maps.google.com/mapfiles/ms/micons/'+colour.toLowerCase()+'.png',
labelOrigin:new google.maps.Point(16,-15)
},
label:{
text:i.toString(),
fontFamily:'monospace',
fontSize:'1rem',
fontWeight:'bold',
color:colour,
className:[ 'label', colour.toLowerCase() ].join(' ')
}
});
// store the new marker
rgb[colour].markers.push( mkr );
}
});
const calculator=function( markers, numStyles ) {
return {
text:[ markers[0].colour, markers.length ].join( String.fromCharCode(32) ),
index:Object.keys(colours).indexOf( markers[0].colour ) + 1
}
};
/*
Create the clusterer with NO markers
and assign the (undocumented) calculator.
The calculator function has been simplified
using the array of colours defined earlier.
*/
let oCluster=new MarkerClusterer( map, [], {
imagePath:'//developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
});
oCluster.setCalculator( calculator );
/*
Listen for maptype change events
and initialise the clusterer with
the respective set of markers if,
and only if, the selected maptype
is a named colour.
*/
map.addListener('maptypeid_changed',()=>{
let colour=map.getMapTypeId();
oCluster.clearMarkers();
if( Object.keys(colours).includes( colour ) ){
oCluster.addMarkers( rgb[colour].markers, false );
oCluster.fitMapToMarkers();
}
});
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap'></script>
</head>
<body>
<div id='map'></div>
</body>
</html>
Proof of concept jsFiddle