googlearchive / js-marker-clusterer

A marker clustering library for the Google Maps JavaScript API v3.
https://googlemaps.github.io/js-marker-clusterer/docs/reference.html
Apache License 2.0
1.28k stars 775 forks source link

How can I make the individual markers clickable as well. #116

Closed Markj89 closed 7 years ago

Markj89 commented 7 years ago

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 7 years ago

I solved this issue.