Unsure why value becomes undefined in listener event for Google Maps

Question

I am trying to get a string from an array of arrays. I want to get the first property [0] into an info window. I am able to use the second and third values to set the placement of markers and I am also able to console.log the first value.

The particular JavaScript code is here:

markers = [
["4841 Bethesda Avenue (Elm Street)", 38.980724, -77.0964],
["7171 Woodmont Avenue", 38.980097, -77.093662],
["921 Wayne Avenue", 38.995740, -77.025652],
["801 Ellsworth Drive",38.997778, -77.025071]
];

infoWindow = new google.maps.InfoWindow()

for (var i = 0; i < markers.length; i++) {
    console.log("markers: " + markers[i][0]);
    position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    marker = new google.maps.Marker({
        position: position, 
        map: map,
        title: markers[i][0]
    });
    console.log("markers 2: " + markers[i][0]);
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent("<div>Hello, World" + markers[i][0] + "</div>");
        infoWindow.open(map, this);
    });
};

When I console.log(markers[i][0]) it produces what I want. However, once it enters the addListener event, it loses it and I am not sure why.

Why does it become undefined?

Fiddle here.

HTML:

<h1 style="text-align: center;">Parking Garage Availability</h1>

<div id="map"></div>

<ul id="list"></ul>
<p id="GAR57"></p>
<p id="GAR31"></p>
<p id="GAR60"></p>
<p id="GAR61"></p>

CSS:

#map {
    height: 300px;
    width: 500px;
    margin: 0 auto;
    border: 1px solid black;
}

JavaScript:

var map;
var mapProp;
var marker;
var markers;
var url;
var myData;
var time;
var available;
var total;
var facility;
var position;
var infoWindow;

function initialize() {
    mapProp = {
        center: new google.maps.LatLng(38.994890, -77.063416),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);
}
$(document).ready(function() {
    initialize();
    url = 'https://data.montgomerycountymd.gov/resource/qahs-fevu.json';
    $.getJSON(url, function(data) {
        myData = data;
        for (i = 0; i < myData.length; i++) {
            time = (myData[i].asofdatetime).slice(11);
            available = myData[i].space_count;
            total = myData[i].total_spaces;
            facility = myData[i].facilitynumber;
            if (facility === "GAR 57") {
                facility = "4841 Bethesda Avenue (Elm Street)";
                $('#GAR57').html('As of ' + time + ' there are ' + available +
                    ' of ' + total + ' at ' + facility);
            } else if (facility === "GAR 31") {
                facility = "7171 Woodmont Avenue";
                $('#GAR31').html('As of ' + time + ' there are ' + available +
                    ' of ' + total + ' at ' + facility);
            } else if (facility === "GAR 60") {
                facility = "921 Wayne Avenue";
                $('#GAR60').html('As of ' + time + ' there are ' + available +
                    ' of ' + total + ' at ' + facility);
            } else {
                facility = "801 Ellsworth Drive";
                $('#GAR61').html('As of ' + time + ' there are ' + available +
                    ' of ' + total + ' at ' + facility);
            }
        }
    });
    //set markers
    markers = [
        ["4841 Bethesda Avenue (Elm Street)", 38.980724, -77.0964],
        ["7171 Woodmont Avenue", 38.980097, -77.093662],
        ["921 Wayne Avenue", 38.995740, -77.025652],
        ["801 Ellsworth Drive", 38.997778, -77.025071]
    ];
    infoWindow = new google.maps.InfoWindow();
    for (var i = 0; i < markers.length; i++) {
        console.log("markers: " + markers[i][0]);
        position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
        console.log("markers 2: " + markers[i][0]);
        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent("<div>Hello, World" + markers[i][0] + "</div>");
            infoWindow.open(map, this);
        });
    };
});

[Updated fiddle](http://jsfiddle.net/geocodezip/kb9v4fe5/5/) using code function closure as in [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Nov 18 '15 at 17:01
@geocodezip what is `(marker, i)` doing at the end of the function? — adin, Nov 18 '15 at 17:49
Those are the parameters to the anonymous function that returns the click listener function (` (function (marker, i) { return function () { ...` — geocodezip, Nov 18 '15 at 18:20

score 0 · Answer 1 · answered Nov 18 '15 at 16:39

Markers[i][0] becomes undefined because it does not exist in the scope of the function within addListener i.e. you're not passing markers into the function.

Instead, you're passing in marker

 for (var i = 0; i < markers.length; i++) {
    console.log("markers: " + markers[i][0]);
    position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    marker = new google.maps.Marker({
        position: position, 
        map: map,
        title: markers[i][0]
    });
    console.log("markers 2: " + marker.title);
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent("<div>Hello, World " + marker.title + "</div>");
        infoWindow.open(map, this);
    });
};

This shows an example displaying the title when the marker is clicked. Which I'm assuming is what you wanted to achieve.

Unsure why value becomes undefined in listener event for Google Maps

1 Answers1