JavaScript: creare correttamente oggetti InfoWindow delle Google Maps API all'interno di un loop

Se avete provato a creare degli oggetti InfoWindow multipli utilizzando le API delle Google Maps vi sarete quasi sicuramente imbattuti nel problema della creazione di tali oggetti nel contesto di un loop JavaScript. Il problema è che il contenuto delle finestre modali impostato attraverso un loop risulta essere sempre lo stesso. Si tratta di un problema che ha a che fare con le closure JavaScript.

La soluzione, presentata nella documentazione delle API, è molto semplice: si tratta di creare una funzione separata per gestire la creazione degli oggetti InfoWindow e del loro contenuto.

var coords = {
	items: [
		{
		  latlong: [ 10.0, 20.0 ],
		  title: "Test 1"
		},
		{
		  latlong: [ 20.0, 30.0 ],
		  title: "Test 2"
		},
		{
		  latlong: [ 30.0, 40.0 ],
		  title: "Test 3"
		}
	]
};

var options = {
	zoom: 7,
	center: new google.maps.LatLng( 44.681773, 10.620747 ),
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	zoomControl: false
};

function addContent( marker, num ) {
	var infowindow = new google.maps.InfoWindow({
    	content: coords.items[num].title
  	});

  	google.maps.event.addListener( marker, "click", function() {
    	infowindow.open( marker.get( "map" ), marker );
  	});
			
}

var _map = new google.maps.Map( document.getElementById( "map" ), options );

for( var i = 0; i < coords.items.length; ++i ) {
	var coord = coords.items[i];
	var latlong = coord.latlong;
	var title = coord.title;
				
	var lat = latlong[0];
	var lg = latlong[1];
				
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng( lat, lg ),
		map: _map,
		icon: new google.maps.MarkerImage( "icon.png" ),
		title: title
	});
				
	addContent( marker, i );
				
				
}

La soluzione ha successo perché la funzione addContent() crea uno scope locale in cui viene istanziato l'oggetto InfoWindow con il contenuto reperito nell'array di oggetti items. In pratica questo scope viene creato ad ogni iterazione, in modo che il contenuto degli oggetti sia quello corretto. Se avessimo usato lo scope globale avremmo invece avuto tre finestre con lo stesso contenuto.