Google maps API, custom marker issue (Can't really explain in the title)

Question

So, I have the following Javascript code for some custom markers:

window.addEventListener('load', initialise)

//Initialises the map view
function initialise() {
    var mapOptions = {
        center: new google.maps.LatLng(53.4113594, -2.1571162),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //Creates the actual Map object
    var map = new google.maps.Map(document.getElementById("mapArea"), mapOptions);


    setMarkers(map, myLocations);
}
var myLocations = [
    ['Stockport Town Hall', 'This is the town hall. Where things... happen.', 'townhall.jpg', 53.406, -2.158215, 'images/markers/townhall.png'],
    ['Stockport Town Centre', 'This is the centre of town. Where there are shops. And food. and... stuff', 'stockportcentre.jpg', 53.4175146, -2.1490619,
        'images/markers/shopping.png'
    ],
    ['Stockport College', 'This is Stockport college. Where learning happens.', 'stockportcollege.jpg', 53.4040427, -2.1587963, 'images/markers/Learning.png'],
    ['Stockport Train station', 'This is the train station. Where you catch trains.', 'stockporttrainstation.jpg', 53.4056234, -2.1637525, 'images/markers/train.png']

];



function setMarkers(map, myLocations) {
    for (var i in myLocations) {
        var name = myLocations[i][0];
        var info = myLocations[i][1];
        var image = myLocations[i][2];
        var lat = myLocations[i][3];
        var lng = myLocations[i][4];
        var indivIcon = myLocations[i][5];
        var latlngset;
        latlngset = new google.maps.LatLng(lat, lng);

        var marker = new google.maps.Marker({
            map: map,
            title: name,
            position: latlngset,
            icon: indivIcon
        });


        //content here!

        var infoContent = '<h3>' + name + '</h3>' + info +
            '<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';



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

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

    }
}

Now, the markers work just fine. I can open them up, they auto-close and go to other markers, but the weird issue is: The infoWindows all show the "Stockport Train Station" information and I have no idea why. What is it I'm doing wrong here?

score 0 · Accepted Answer · answered Jul 21 '15 at 19:58

So what's happening is this. You're looping over all your locations, creating a marker for each one, and that's fine. And for each marker, you're creating an event listener, which only gets called when a marker is clicked on.

Within that loop, you're basically doing this for every marker, updating the value of the infoContent variable each time:

var infoContent = "...";

So at the end of the loop, infoContent will be equal to whatever you set it to for the last marker, something like

'<h3>Stockport Train station</h3> etc...'

So then whenever you click on any of the markers, it executes this function:

infowindow.setContent(infoContent);
infowindow.open(map, this);

So it correctly opens the current marker. And it sets the content of the infowindow to whatever infoContent is... i.e. always the value given to it at the end of that loop.

Instead try this, set the content into a property on the marker, then use that:

    var infoContent = '<h3>' + name + '</h3>' + info +
        '<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';

    var marker = new google.maps.Marker({
        map: map,
        title: name,
        position: latlngset,
        icon: indivIcon,
        content: infoContent 
    });

And then in your event listener you can refer to that directly:

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

Google maps API, custom marker issue (Can't really explain in the title)

1 Answers1