Question

I have a data which is being pulled in via JSON. It is pulling in correctly and is positioning the markers where they are meant to be.
The issue I’m having is to do with the google.maps.event.addListener, all markers are show the same content in the info window, for some reason it does not seem to be looping through the data correctly.

Below is what I have, any thoughts on why this is not working correctly, thanks.

$.get('http://localhost/map/map/locations', function(result) {
    var locations = $.parseJSON(result);


    // Markers
    var markers = [];

    // Looping through the JSON data
    for (var i = 0, length = locations.length; i < length; i++) {

        var data = locations[i];

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.lat, data.long),
            map: map,
            title: data.title,
            icon: iconSrc[data.category]
        });
        markers.push(marker);


        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent("<div class='cont_box' id='" + data.entry_id + "'> <h2>" + data.title + "</h2> <div class='cont'><p><img src='" + data.infoImage + "' alt='' width='100' height='66' style='float:right;'>" + data.windowText + "</p></div><div style='clear:both;'></div><div class='link'><a href='" + data.moreLink + "' target='_blank'>" + data.moreText + "</a></div></div>");
                infoWindow.open(map, marker);
            }
        })(marker, i));

    }// END for loop

});

Update

After adding the data var into the context it works fine.

I now have to show and hide marker depending on their category. I think this maybe a similar issue. What is the best way to include these hide and show functions with the data var?

Functions:

    /** Shows all markers of a particular category, and ensures the checkbox is checked **/
    function show(category) {
        for (var i=0; i<locations.length; i++) {
            if (data.category == category) {
                markers[i].setVisible(true);
            }
        }
    }// END function show



    /** Hides all markers of a particular category, and ensures the checkbox is cleared **/
    function hide(category) {
        for (var i=0; i<locations.length; i++) {
            if (data.category == category) {
              markers[i].setVisible(false);
            }
        }
    }// END function hide

    /** Show or hide the categories initially **/
    show("financial_services");
    show("government");
    show("identity_access");
    show("machine_to_machine");
    show("telecommunications");
    show("transport");

    /** Action when checkbox is clicked **/
    $(".checkbox").click(function(){
        var cat = $(this).attr("value");

        // If checked
        if ( $(this).is(":checked") ){
            show(cat);
        }
        else {
            hide(cat);
        }
    });

This is how it currently sits with everything, it is withing the $.get call, but outside the for loop which has the data var in it:

    // JSON feed
$.get('http://localhost/map/map/locations', function(result) {
    var locations = $.parseJSON(result);


    // Markers
    var markers = [];

    // Looping through the JSON data
    for (var i = 0, length = locations.length; i < length; i++) {

        var data = locations[i];

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.lat, data.long),
            map: map,
            title: data.title,
            icon: iconSrc[data.category]
        });
        markers.push(marker);


        google.maps.event.addListener(marker, 'click', (function(marker, i, loc) {
            return function() {
                infoWindow.setContent("<div class='cont_box' id='" + loc.entry_id + "'> <h2>" + loc.title + "</h2> <div class='cont'><p><img src='" + loc.infoImage + "' alt='' width='100' height='66' style='float:right;'>" + loc.windowText + "</p></div><div style='clear:both;'></div><div class='link'><a href='" + loc.moreLink + "' target='_blank'>" + loc.moreText + "</a></div></div>");
                infoWindow.open(map, marker);
            }
        })(marker, i, data));

    }// END for loop


    /** Shows all markers of a particular category, and ensures the checkbox is checked **/
    function show(category) {
        for (var i=0; i<locations.length; i++) {
            if (data.category == category) {
                markers[i].setVisible(true);
            }
        }
    }// END function show



    /** Hides all markers of a particular category, and ensures the checkbox is cleared **/
    function hide(category) {
        for (var i=0; i<locations.length; i++) {
            if (data.category == category) {
              markers[i].setVisible(false);
            }
        }
    }// END function hide

    /** Show or hide the categories initially **/
    show("financial_services");
    show("government");
    show("identity_access");
    show("machine_to_machine");
    show("telecommunications");
    show("transport");

    /** Action when checkbox is clicked **/
    $(".checkbox").click(function(){
        var cat = $(this).attr("value");

        // If checked
        if ( $(this).is(":checked") ){
            show(cat);
        }
        else {
            hide(cat);
        }
    });
});

Answer 1

Your addListener open a new context, so your data variable is not available. Add the data var in the context :

google.maps.event.addListener(marker, 'click', (function(marker, i, myData) {
    return function() {
       infoWindow.setContent("<div class='cont_box' id='" + myData.entry_id + "'> <h2>");
       infoWindow.open(map, marker);
    }
})(marker, i, data));