Google Maps show marker inside a cluster - google-maps

Question

Is it possible to zoom to a marker if it's inside a marker cluster? I am changing the color of the markers if a user hovers over a html div. But if the marker is inside a cluster, the color won't change since the marker itself is not shown. Could anyone provide me with possible ways of solving this issue?
var allMarkers = [];
(function($) {
"use strict";
// Custom options for map
var options = {
zoom: 12,
mapTypeId: 'Styled',
disableDefaultUI: true,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeControlOptions: {
mapTypeIds: ['Styled']
}
};
var styles = [{
stylers: [{
hue: "#cccccc"
}, {
saturation: -100
}]
}, {
featureType: "road",
elementType: "geometry",
stylers: [{
lightness: 100
}, {
visibility: "simplified"
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "on"
}]
}, {
featureType: "poi",
stylers: [{
visibility: "off"
}]
}];
var newMarker = null;
var markers = [];
// json for properties markers on map
var props = < ? php echo json_encode($map_flats); ? > ;
// custom infowindow object
var infobox = new InfoBox({
disableAutoPan: false,
maxWidth: 202,
pixelOffset: new google.maps.Size(-101, -285),
zIndex: null,
boxStyle: {
background: "url('images/infobox-bg.png') no-repeat",
opacity: 1,
width: "202px",
height: "245px"
},
closeBoxMargin: "28px 26px 0px 0px",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
pane: "floatPane",
enableEventPropagation: false
});
// function that adds the markers on ma
var addMarkers = function(props, map) {
$.each(props, function(i, prop) {
var latlng = new google.maps.LatLng(prop.position.lat, prop.position.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
id: +prop.id,
icon: new google.maps.MarkerImage(
'images/' + prop.markerIcon,
null,
null,
null
),
draggable: false,
animation: google.maps.Animation.DROP,
});
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
allMarkers.push(marker); //Add it to allMarkers
var infoboxContent = '<div class="infoW">' +
'<div class="propImg">' +
'<img src="uploads/' + prop.image + '">' +
'<div class="propBg">' +
'</div>' +
'</div>' +
'<div class="paWrapper">' +
'<div class="propTitle">€' + prop.title + '</div>' +
'<div class="propAddress">' + prop.address + '</div>' +
'</div><br>' +
'<ul class="propFeat">' +
'<li><span class="fa fa-moon-o"></span> ' + prop.bedrooms + ' room(s)</li>' +
'<li><span class="icon-frame"></span> ' + prop.area + ' m<sup>2</sup></li>' +
'</ul>' +
'<div class="clearfix"></div>' +
'<div class="infoButtons">' +
'<a class="btn btn-sm btn-round btn-gray btn-o closeInfo">Close</a>' +
'<a target="_blank" href="single.php?id=' + prop.id + '" class="btn btn-sm btn-round btn-green viewInfo">View</a>' +
'</div>' +
'</div>';
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infobox.setContent(infoboxContent);
infobox.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(map, "click", function(event) {
infobox.close();
});
$(document).on('click', '.closeInfo', function() {
infobox.open(null, null);
});
markers.push(marker);
});
//set style options for marker clusters (these are the default styles)
var mcOptions = {
styles: [{
height: 53,
url: "images/m1.png",
width: 53
}, {
height: 54,
url: "images/m1.png",
width: 54
}, {
height: 66,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
width: 66
}, {
height: 78,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
width: 78
}, {
height: 90,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
width: 90
}],
gridSize: 50,
maxZoom: 14
}
//init clusterer with your options
var mc = new MarkerClusterer(map, markers, mcOptions);

Answer 1

The Cluster doesn't change color (yet ?). But I do have code that detects if the client hovers over his marker inside the cluster. So, now it logs a message onyour screen.
Look at the scripts I load. Google Maps, MarkerClustererPlus and a script containing data. Many locations (of photographs).
So, the marker of the client, is the marker in Central Park, New York, USA.
Try it out.
Any other idea how to visualize the detection? Like add a circle around the cluster, ... ?
<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script>
var client_index = 821; // Central Park, New York. Item 821 ( "photo_id": 586159 )
// We run through all the marker-objects inside the cluster; and we see if the marker object of our client marker is inside that array
function clientMarkerInCluster(allMarkers, markersInCluster) {
if(markersInCluster.indexOf( allMarkers[client_index] ) > 0) {
return true;
}
return false;
}
function initialize() {
var center = new google.maps.LatLng(40.480467417349345,-98.80444335937501);
var options = {
'zoom': 4,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var markers = [];
for(var key in data.photos) {
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(data.photos[key].latitude, data.photos[key].longitude),
map: map,
title: key +' '+ data.photos[key].photo_title
})
);
}
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, markers, mcOptions);
google.maps.event.addListener(mc, "mouseover", function (c) {
if(clientMarkerInCluster(markers, c.markers_)) {
log('Client marker is inside the cluster');
}
});
// google.maps.event.addListener(mc, "mouseout", function (c) {});
}
google.maps.event.addDomListener(window, 'load', initialize);
// just a function to show a log on screen
function log(h) {
document.getElementById("log").innerHTML += h + "<br>";
}
</script>
<style>
#map {
height: 400px;
}
</style>
<div id="map"></div>
<div id="log"></div>