How can I make the individual markers clickable as well.
Markj89 opened this issue · 1 comments
Markj89 commented
I'm using this tool for JSON data being pulled from my company's API.
I was able to use the markerCluster, however it does make the single markers clickable any more.
Has anyone else ran into this problem before
function initMap() {
var map = null;
var markers = [];
var infoWindow = null;
var json = $scope.response;
var markerClusterer = null;
var imageUrl = null;
$.each(json, function(key, val) {
var center = new google.maps.LatLng(val.lat, val.lng);
var options = {
"center": center,
"zoom": 3,
"mapTypeId": google.maps.MapTypeId.ROADMAP,
"sensor": false
};
var map = new google.maps.Map(document.getElementById("map"), options);
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=' + 'FFFFFF,008CFF,000000&ext=.png';
var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(24, 32));
var marker = new google.maps.Marker({
"position": latLng,
"icon": markerImage
});
markers.push(marker);
(function(markers, data) {
google.maps.event.addListener(markers, "click", function() {
infoWindow.setContent(data.description);
infoWindow.setPosition(latLng);
infoWindow.open(map, markers);
});
})(markers, data);
}
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
});
}
initMap();
Markj89 commented
I solved this issue.