Google Maps API Implementing click event to get the target element - google-maps

Question

Here's a question regarding Google maps API events:
marker.addListener('click', _.bind(function (e) {
}
In the above code I am unable to get e.target element on which I need to call a function.
Basically the situation is I have a list of markers and on click of one, the function needs to be triggered and on click of the same marker the function should unbind.
Can anyone help me with this?

Answer 1

Hello I worked with marker in past and kinda had same issue, I did some research and found this solution on SO and it worked.
you can created function like this
function createCallback(marker, callback) {
google.maps.event.addListener(marker, 'click', function () {
// do whatever you want to do
callback()
});
}
And after that call it like this
var markerPropertyLocation = new google.maps.Marker({
position: {markerPosition},
map : {map},
icon: new google.maps.MarkerImage(
{iconImage},
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(20, 27))
});
createCallback(markerPropertyLocation, function(){
// callback funcation
});
Thanks

Answer 2

To be more precise with my requirements, I have restructured my queries and reposting the same:
On our Google maps implementation we have the following Requirements:
• Getting the target element that is clicked marker, out of all displayed on the screen
• Enlarge the marker once clicked and apply class only to that specific marker(clicked marker)
We have written the following code, but it doesn’t give the above results.
However, a similar interaction works on hover showing the tootip with details
Code Snippet:
ReferenceMap.prototype.showPoint = function showPoint(point, map) {
var location = point.get('location')
, marker = new google.maps.Marker({
store_id: point.get('internalid')
, icon: iconSrc
, map: map
, point: point
, title: point.get('internalid')
});
allMarker.push(marker);
marker.setPosition(new google.maps.LatLng(location.latitude, location.longitude));
marker.setVisible(true);
marker.addListener('mouseover', _.bind(function () {
this.showInfoWindowOnClick(marker, map);
}, this));
marker.addListener('mouseout', _.bind(function () {
hideShowInfoWindow();
}, this));
marker.addListener('click', _.bind(function (e) {
// var markerTitle = marker.title;
// var markerID = marker.store_id;
// var target = markerTitle == markerID;
// if(target == e.target) {
// $('.marker img').css('width',200);
// dealerDetailsLeftBlock();
// }
// else {
// $('.marker img').removeAttr('style');
// }
console.log(e.target);
areaMarkers.reset();
for (var i = 0; i < allMarker.length; i++) {
allMarker[i
].isClicked = 'F';
allMarker[i
].point.set('isClicked', 'F');
marker.set('isClicked', 'T');
if (map.getBounds().contains(allMarker[i
].getPosition())) {
//console.log(allMarker[i]);
if (allMarker[i
].isClicked == 'T') {
$('[title="' + marker.title + '"
]').addClass('marker - design');
console.log($('[title="' + marker.title + '"
]'))
// console.log(allMarker[i]);
allMarker[i
].point.set('isClicked', 'T');
}
areaMarkers.add(allMarker[i
].point);
}
};
//console.log(areaMarkers);
dealerDetailsLeftBlock();
this.trigger('getSideBar')
}, this));
if (this.markerCluster) {
this.markerCluster.addMarker(marker);
}
return marker;
};