简体   繁体   中英

Google Maps Multiple Markers are showing the same title and Infowindow on Geocode

I am trying to display multiple markers using JSON with geocoding. My code shows all the markers at the correct place but does not show the Correct Infowindow on them or the Correct title. I know it has something to do with closures. But I do not understand it. Please help me out and kindly edit my code and explain why it needs to be edited? HELP PLEASE!!

points = data.POINTS;
var geocoder;
//var map;

geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.2324, - 98.4160);
var mapOptions = {
    zoom: 4,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var infoWindow = new google.maps.InfoWindow();

for (var i = 0, length = points.length; i < length; i++) {
    data = points[i],
    address = data[1] + ", " + data[2] + ", " + data[3] + ", " + data[4] + ", " + data[5];

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            //Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: data[4],
                animation: google.maps.Animation.DROP
            });
            // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
            (function (marker, points) {
                // Attaching a click event to the current marker
                //console.log(data[6]);
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data[6] + " " + data[0]);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        } else {
            //alert("Geocode was not successful for the following reason: " + status);
        }
    });

}

});

The Answer is the following:
What I needed was to call the add marker function outside the Loop. Thanks for all of your kind consideration of my problem. Hope my Solution will help someone else.

points = data.POINTS;
var geocoder;
//var map;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.2324, - 98.4160);
var mapOptions = {
    zoom: 4,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < points.length; i++) {
    var myLoc = points[i];
    var geoOptions = {
        address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4] + "," + myLoc[5]
    }
    geocoder.geocode(geoOptions, addMarkers(myLoc[6]));
}

function addMarkers(myTitle) {
    return function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: myTitle,
                zIndex: i
            });
            (function (marker, myTitle) {

                // Attaching a click event to the current marker
                //console.log(data[6]);
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(myTitle);
                    infoWindow.open(map, marker);
                });
            })(marker, myTitle);
        }
    };
}

It is because you are always setting the content to data[6] + data[0].

As you are iterating through your markers you need to change the content of the infowindow for each iteration.

infoWindow.setContent(data[i] + " " + data[i]);

Something like the above should do the trick, but I don't know what you want for data. HTH

...you have the same issue with the title you area always setting it to title[4]

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM