StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You are having <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures#Creating_closures_in_loops.3a_A_common_mistake" rel="noreferrer">a very common closure problem</a> in the following loop:</p> <pre><code>for(x in locations){ console.log(x); infowindow[x] = new google.maps.InfoWindow({content: x}); marker[x] = new google.maps.Marker({title:locations[x][0],map:map,position:locations[x][2]}); google.maps.event.addListener(marker[x], 'click', function() {infowindow[x].open(map,marker[x]);}); } </code></pre> <p>Variables enclosed in a closure share the same single environment, so by the time the <code>click</code> callbacks are executed, the loop has run its course and the <code>x</code> variable will be left pointing to the last entry.</p> <p>You can solve it with even more closures, using a function factory:</p> <pre><code>function makeInfoWindowEvent(map, infowindow, marker) { return function() { infowindow.open(map, marker); }; } for(x in locations){ infowindow[x] = new google.maps.InfoWindow({content: x}); marker[x] = new google.maps.Marker({title: locations[x][0], map: map, position: locations[x][3]}); google.maps.event.addListener(marker[x], 'click', makeInfoWindowEvent(map, infowindow[x], marker[x]); } </code></pre> <p>This can be quite a tricky topic, if you are not familiar with how closures work. You may to check out the following Mozilla article for a brief introduction:</p> <ul> <li><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures" rel="noreferrer">Working with Closures</a></li> </ul> <hr> <p><strong>UPDATE:</strong></p> <p>Further to the updated question, you should consider the following:</p> <ul> <li><p>First of all, keep in mind that JavaScript does not have block scope. Only functions have scope. </p></li> <li><p>When you assign a variable that was not previously declared with the <code>var</code> keyword, it will be declared as a global variable. This is often considered an ugly feature (or flaw) of JavaScript, as it can silently hide many bugs. Therefore this should be avoided. You have two instances of these implied global variables: <code>the_marker</code> and <code>infowindow</code>, and in fact, this is why your program is failing.</p></li> <li><p>JavaScript has closures. This means that inner functions have access to the variables and parameters of the outer function. This is why you will be able to access <code>the_marker</code>, <code>infowindow</code> and <code>map</code> from the callback function of the <code>addListener</code> method. However, because your <code>the_marker</code> and <code>infowindow</code> are being treated as global variables, the closure is not working.</p></li> </ul> <p>All you need to do is to use the <code>var</code> keyword when you declare them, as in the following example:</p> <pre><code>$(function() { var latlng = new google.maps.LatLng(45.522015,-122.683811); var settings = { zoom: 15, center: latlng, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); $.get('mapdata.xml', {}, function(xml) { $('location', xml).each(function(i) { var the_marker = new google.maps.Marker({ title: $(this).find('name').text(), map: map, clickable: true, position: new google.maps.LatLng( parseFloat($(this).find('lat').text()), parseFloat($(this).find('lng').text()) ) }); var infowindow = new google.maps.InfoWindow({ content: $(this).find('description').text(); }); new google.maps.event.addListener(the_marker, 'click', function() { infowindow.open(map, the_marker); }); }); }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload