javascript - google map cluster not working - Stack Overflow

admin管理员组

文章数量:1022705

<script>
    var lat = "";
    var map = "";
    var markers = [];
    function initMap() {
        if ($("#map").length) {
            var mapOptions = {
                zoom: 13, 
                center: new google.maps.LatLng(37.498214, 127.027535), 
                scrollwheel: true, 
                mapTypeControl: false 
            };
            var geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById('map'), mapOptions); 
            var image = 'img/marker.png'; 
            for (i = 0; i < 1; i++) { // this database size
                var address = 'addressvalue';
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        lat = results[0].geometry.location;
                        lat = lat.toString().split(" ");
                        lat[0] = lat[0].replace('(', '');
                        lat[0] = lat[0].replace(',', '');
                        lat[1] = lat[1].replace(')', '');
                        map.setCenter(new google.maps.LatLng(lat[0], lat[1]));
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon: image,
                            title: 'test'
                        });
                        markers.push(marker);
                        var infowindow = new google.maps.InfoWindow({
                            content: '<div>1234</div>'
                        });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
            markerClusterer = new MarkerClusterer(map, markers, {
                maxZoom: 10,
                gridSize: 10
            });
            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });
        }
    }
</script>
<script src=".0/src/data.json"></script>
<script src=".0/src/markerclusterer.js"></script>

I followed google map API but I got the problem.

I want marker and cluster. this is problem.

When click markers, show window title. this is not problem.

Where did I did wrong?

<script>
    var lat = "";
    var map = "";
    var markers = [];
    function initMap() {
        if ($("#map").length) {
            var mapOptions = {
                zoom: 13, 
                center: new google.maps.LatLng(37.498214, 127.027535), 
                scrollwheel: true, 
                mapTypeControl: false 
            };
            var geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById('map'), mapOptions); 
            var image = 'img/marker.png'; 
            for (i = 0; i < 1; i++) { // this database size
                var address = 'addressvalue';
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        lat = results[0].geometry.location;
                        lat = lat.toString().split(" ");
                        lat[0] = lat[0].replace('(', '');
                        lat[0] = lat[0].replace(',', '');
                        lat[1] = lat[1].replace(')', '');
                        map.setCenter(new google.maps.LatLng(lat[0], lat[1]));
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon: image,
                            title: 'test'
                        });
                        markers.push(marker);
                        var infowindow = new google.maps.InfoWindow({
                            content: '<div>1234</div>'
                        });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
            markerClusterer = new MarkerClusterer(map, markers, {
                maxZoom: 10,
                gridSize: 10
            });
            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });
        }
    }
</script>
<script src="http://google-maps-utility-library-v3.googlecode./svn/tags/markerclusterer/1.0/src/data.json"></script>
<script src="http://google-maps-utility-library-v3.googlecode./svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>

I followed google map API but I got the problem.

I want marker and cluster. this is problem.

When click markers, show window title. this is not problem.

Where did I did wrong?

• javascript
• google-maps
• google-maps-api-3
• markerclusterer

Share Improve this question Follow edited Feb 17, 2016 at 22:38 geocodezip 161k1414 gold badges227227 silver badges255255 bronze badges asked Feb 17, 2016 at 7:57 차원준차원준 2311 silver badge22 bronze badges 2

• What's the problem? You don't see any markers? You get markers but no clusters? Can you attach a screenshot or a link to a working example showing what's not working – duncan Commented Feb 17, 2016 at 9:10
• oh, sorry.. my problem is get markers but no clusters!! – 차원준 Commented Feb 17, 2016 at 10:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The problem is you're doing the geocoder.geocode() function call, which is asynchronous, to get the data to create your markers. However the line where you create the MarkerClusterer isn't within that geocode function's callback. So it will be happening before the markers are created, and just using an empty array at that point.

I'm not entirely sure of the point of your for loop. But assuming you're needing it, the trick might be to create an empty MarkerClusterer before your geocoding. Then within the callback, add each marker into the MarkerClusterer as soon as you create it.

Something like this:

var markerClusterer = new MarkerClusterer(map, [], {
    maxZoom: 10,
    gridSize: 10
});

for (i = 0; i < 1; i++) { // this database size
    var address = 'addressvalue';
    geocoder.geocode({'address': address}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: image,
                title: 'test'
            });
            markers.push(marker);

            markerClusterer.addMarker(marker);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

<script>
    var lat = "";
    var map = "";
    var markers = [];
    function initMap() {
        if ($("#map").length) {
            var mapOptions = {
                zoom: 13, 
                center: new google.maps.LatLng(37.498214, 127.027535), 
                scrollwheel: true, 
                mapTypeControl: false 
            };
            var geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById('map'), mapOptions); 
            var image = 'img/marker.png'; 
            for (i = 0; i < 1; i++) { // this database size
                var address = 'addressvalue';
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        lat = results[0].geometry.location;
                        lat = lat.toString().split(" ");
                        lat[0] = lat[0].replace('(', '');
                        lat[0] = lat[0].replace(',', '');
                        lat[1] = lat[1].replace(')', '');
                        map.setCenter(new google.maps.LatLng(lat[0], lat[1]));
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon: image,
                            title: 'test'
                        });
                        markers.push(marker);
                        var infowindow = new google.maps.InfoWindow({
                            content: '<div>1234</div>'
                        });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
            markerClusterer = new MarkerClusterer(map, markers, {
                maxZoom: 10,
                gridSize: 10
            });
            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });
        }
    }
</script>
<script src=".0/src/data.json"></script>
<script src=".0/src/markerclusterer.js"></script>

I followed google map API but I got the problem.

I want marker and cluster. this is problem.

When click markers, show window title. this is not problem.

Where did I did wrong?

<script>
    var lat = "";
    var map = "";
    var markers = [];
    function initMap() {
        if ($("#map").length) {
            var mapOptions = {
                zoom: 13, 
                center: new google.maps.LatLng(37.498214, 127.027535), 
                scrollwheel: true, 
                mapTypeControl: false 
            };
            var geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById('map'), mapOptions); 
            var image = 'img/marker.png'; 
            for (i = 0; i < 1; i++) { // this database size
                var address = 'addressvalue';
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        lat = results[0].geometry.location;
                        lat = lat.toString().split(" ");
                        lat[0] = lat[0].replace('(', '');
                        lat[0] = lat[0].replace(',', '');
                        lat[1] = lat[1].replace(')', '');
                        map.setCenter(new google.maps.LatLng(lat[0], lat[1]));
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon: image,
                            title: 'test'
                        });
                        markers.push(marker);
                        var infowindow = new google.maps.InfoWindow({
                            content: '<div>1234</div>'
                        });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
            markerClusterer = new MarkerClusterer(map, markers, {
                maxZoom: 10,
                gridSize: 10
            });
            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });
        }
    }
</script>
<script src="http://google-maps-utility-library-v3.googlecode./svn/tags/markerclusterer/1.0/src/data.json"></script>
<script src="http://google-maps-utility-library-v3.googlecode./svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>

I followed google map API but I got the problem.

I want marker and cluster. this is problem.

When click markers, show window title. this is not problem.

Where did I did wrong?

• javascript
• google-maps
• google-maps-api-3
• markerclusterer

Share Improve this question Follow edited Feb 17, 2016 at 22:38 geocodezip 161k1414 gold badges227227 silver badges255255 bronze badges asked Feb 17, 2016 at 7:57 차원준차원준 2311 silver badge22 bronze badges 2

• What's the problem? You don't see any markers? You get markers but no clusters? Can you attach a screenshot or a link to a working example showing what's not working – duncan Commented Feb 17, 2016 at 9:10
• oh, sorry.. my problem is get markers but no clusters!! – 차원준 Commented Feb 17, 2016 at 10:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The problem is you're doing the geocoder.geocode() function call, which is asynchronous, to get the data to create your markers. However the line where you create the MarkerClusterer isn't within that geocode function's callback. So it will be happening before the markers are created, and just using an empty array at that point.

I'm not entirely sure of the point of your for loop. But assuming you're needing it, the trick might be to create an empty MarkerClusterer before your geocoding. Then within the callback, add each marker into the MarkerClusterer as soon as you create it.

Something like this:

var markerClusterer = new MarkerClusterer(map, [], {
    maxZoom: 10,
    gridSize: 10
});

for (i = 0; i < 1; i++) { // this database size
    var address = 'addressvalue';
    geocoder.geocode({'address': address}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: image,
                title: 'test'
            });
            markers.push(marker);

            markerClusterer.addMarker(marker);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

本文标签： javascriptgoogle map cluster not workingStack Overflow