CODEWITHSUNDEEP
javascriptarraysgoogle-mapsgoogle-maps-api-3google-maps-markers
James Andrew Smith
James Andrew Smith

Reputation: 1568

Google maps info windows displaying same information

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.com/default.html

Upvotes: 1

Views: 1283

Answers (3)

exaviore
exaviore

Reputation: 101

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);
}

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272266

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.

Upvotes: 14

davidkonrad
davidkonrad

Reputation: 85558

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);
}

Upvotes: 1

Related Questions