javascript - Google maps info windows displaying same information - Stack Overflow

admin管理员组

文章数量:1308212

I have google maps on my website that displays a list of locations around the UK. But the info window displays the same record for each individual record. My code is underneath. Any reason why?

var locations = [[52.478899, -1.894055, 'test 1', '87', 'Name: test 1'],
[52.479474, -1.895946, 'test 2', '88', 'Name: test 2 '],
[52.477082, -1.893929, 'test 3', '89', 'Name: test 3 ']];


function initialize() {

var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(52.528680, -1.839480),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();


for (var i = 0; i < locations.length; i++) {
    var curLoc = locations[i];
    myLatLng = new google.maps.LatLng(curLoc[0], curLoc[1]);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: curLoc[2],
        data: curLoc[4], //add content to the Marker-object
        zIndex: 50 - i
    });

    var infowindow = new google.maps.InfoWindow({
        content: curLoc[4]
    });

    google.maps.event.addListener(beachMarker, 'click', (function() {
        infowindow.setContent(beachMarker.data);
        infowindow.setPosition(beachMarker.position);
        infowindow.open(map);
    }));

    bounds.extend(myLatLng);
    map.fitBounds(bounds);


}
}

google.maps.event.addDomListener(window, 'load', initialize);

UPDATE: I changed my code but the problem still presists but now clicking on a marker focuses on the last marker not just displays the last markers text.

Here is a sample url .html

I have google maps on my website that displays a list of locations around the UK. But the info window displays the same record for each individual record. My code is underneath. Any reason why?

var locations = [[52.478899, -1.894055, 'test 1', '87', 'Name: test 1'],
[52.479474, -1.895946, 'test 2', '88', 'Name: test 2 '],
[52.477082, -1.893929, 'test 3', '89', 'Name: test 3 ']];


function initialize() {

var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(52.528680, -1.839480),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();


for (var i = 0; i < locations.length; i++) {
    var curLoc = locations[i];
    myLatLng = new google.maps.LatLng(curLoc[0], curLoc[1]);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: curLoc[2],
        data: curLoc[4], //add content to the Marker-object
        zIndex: 50 - i
    });

    var infowindow = new google.maps.InfoWindow({
        content: curLoc[4]
    });

    google.maps.event.addListener(beachMarker, 'click', (function() {
        infowindow.setContent(beachMarker.data);
        infowindow.setPosition(beachMarker.position);
        infowindow.open(map);
    }));

    bounds.extend(myLatLng);
    map.fitBounds(bounds);


}
}

google.maps.event.addDomListener(window, 'load', initialize);

UPDATE: I changed my code but the problem still presists but now clicking on a marker focuses on the last marker not just displays the last markers text.

Here is a sample url http://map.projects.webskii./default.html

• javascript
• arrays
• google-maps
• google-maps-api-3
• google-maps-markers

Share Improve this question Follow edited Jan 28, 2018 at 15:37 Salman Arshad 272k8484 gold badges443443 silver badges534534 bronze badges asked Jun 12, 2013 at 11:45 James Andrew SmithJames Andrew Smith 1,57822 gold badges2323 silver badges4343 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 14

The workaround I use in these situations is to assign an id to the marker upon creation. This id will be available in callbacks so you can use it to fetch the HTML content on demand. Here is how:

var locations = [
    [52.478899, -1.894055, 'test 1', '87', 'Name: test 1'],
    [52.479474, -1.895946, 'test 2', '88', 'Name: test 2'],
    [52.477082, -1.893929, 'test 3', '89', 'Name: test 3']
];
var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(52.528680, -1.839480),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow(); // 2: infoWindow is global
var markerClickHandler = function () {
    infoWindow.setContent(locations[this.dataId][4]); // 3: use dataId stored in marker to fetch content from locations array
    infoWindow.open(map, this);
};
var bounds = new google.maps.LatLngBounds();
var i;
for (i = 0; i < locations.length; i++) {
    var latlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: locations[i][2],
        dataId: i // 1: assign an id
    });
    bounds.extend(latlng);
    google.maps.event.addListener(marker, "click", markerClickHandler);
}
map.fitBounds(bounds);

Demo here. Note that it is also possible to store the Text/HTML into the marker instead of the id.

I guess it always show data for the last record? eg infowindow.setContent(curLoc[4]); curLoc is always the last from dataset locations.

Try this instead

var beachMarker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     title: curLoc[2],
     data : curLoc[4], //add content to the Marker-object 
     icon: image,
     zIndex: 50 - i,
     childMinderId: curLoc[3]
});

...

google.maps.event.addListener(beachMarker, 'click', (function () {
    infowindow.setContent(beachMarker.data);
    infowindow.setPosition(beachMarker.position);
    infowindow.open(map);
}

Just an addendum to davidkonrad response. Had the same issue with last data popping up. If you use the data on the marker and use 'this' , it picks up the data on the marker and it's position for the marker object.

google.maps.event.addListener(beachMarker, 'click', (function () {
    infowindow.setContent(this.data);
    infowindow.open(map,this);
}

本文标签： javascriptGoogle maps info windows displaying same informationStack Overflow