Trouble creating Google Map infowindow by passing information into an IIFE - google-maps-api-3

Question

I am trying to create an infowindow with an IIFE. I am having quite a bit of trouble passing information into it.
As you can see I retrieved an array of places using the searchBox Class, which was instantiated and correctly implemented in order to properly use the getPlaces() method.
Places is an array of objects and I use the information to create a marker and infowindow. The markers show up! However, I can't seem to pass the object, places[i], into the IIFE.
There's NOT even an error in the console, which is why I am in desperate need of your help.
My ultimate goal is to have an infowindow open on the clicked marker with the the corresponding information.
Can anyone spot what I am doing wrong here?
var places = searchBox.getPlaces(); // array of place objects
var placeMarkers = [];
var placeInfoWindow = new google.maps.InfoWindow();
var placeBounds = new google.maps.LatLngBounds();
if (!places || places === null || places.length === 0) {
alert("No Places Founds");
} else {
for (var i = 0, l = places.length; i < l; i++) {
// MARKER
var loc = places[i].geometry.location;
var placeMarker = new google.maps.Marker({
position: loc,
title: places[i].name,
animation: google.maps.Animation.DROP,
icon: places[i].icon
});
placeMarkers.push(placeMarker); // save each marker
placeMarker.setMap(map); // display marker immediately
// extend boundary to include each marker location
placeBounds.extend(loc);
//REGISTER MARKER CLICK HANDLER WITH CURRENT places[i] INFO
placeMarker.addListener("click", (function(placeCopy) {
return function() {
var infoWindowContentStr = '<div>';
if (placeCopy.name) {
infoWindowContentStr += '<div>' + placeCopy.name + '</div><br>';
}
if (placeCopy.formatted_address) {
infoWindowContentStr += '<div>' + placeCopy.formatted_address + '</div>';
}
infoWindowContentStr += '</div>';
placeInfoWindow.setContent(infoWindowContentStr);
placeInfoWindow.open(map, this);
};
}), places[i]);
}
map.fitBounds(placeBounds);
}

Answer 1

You have a typo in your IIFE function definition, it isn't executing the function and getting closure until the click happens.
related question: Google Maps API Places Library SearchBox (used to create the MCVE)
placeMarker.addListener("click", (function(placeCopy) {
return function() {
var infoWindowContentStr = '<div>';
if (placeCopy.name) {
infoWindowContentStr += '<div>' + placeCopy.name + '</div><br>';
}
if (placeCopy.formatted_address) {
infoWindowContentStr += '<div>' + placeCopy.formatted_address + '</div>';
}
infoWindowContentStr += '</div>';
placeInfoWindow.setContent(infoWindowContentStr);
placeInfoWindow.open(map, this);
};
})(places[i])); // you had }), places[i]);
proof of concept fiddle
code snippet:
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(41.7033177, -93.0573533),
new google.maps.LatLng(41, -93)
);
map.fitBounds(defaultBounds);
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
searchBox.setBounds(defaultBounds);
var markers = [];
service = new google.maps.places.PlacesService(map);
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces(); // array of place objects
var placeMarkers = [];
var placeInfoWindow = new google.maps.InfoWindow();
var placeBounds = new google.maps.LatLngBounds();
if (!places || places === null || places.length === 0) {
alert("No Places Founds");
} else {
for (var i = 0, l = places.length; i < l; i++) {
// MARKER
var loc = places[i].geometry.location;
var placeMarker = new google.maps.Marker({
position: loc,
title: places[i].name,
animation: google.maps.Animation.DROP,
icon: places[i].icon
});
placeMarkers.push(placeMarker); // save each marker
placeMarker.setMap(map); // display marker immediately
// extend boundary to include each marker location
placeBounds.extend(loc);
//REGISTER MARKER CLICK HANDLER WITH CURRENT places[i] INFO
placeMarker.addListener("click", (function(placeCopy) {
return function() {
var infoWindowContentStr = '<div>';
if (placeCopy.name) {
infoWindowContentStr += '<div>' + placeCopy.name + '</div><br>';
}
if (placeCopy.formatted_address) {
infoWindowContentStr += '<div>' + placeCopy.formatted_address + '</div>';
}
infoWindowContentStr += '</div>';
placeInfoWindow.setContent(infoWindowContentStr);
placeInfoWindow.open(map, this);
};
})(places[i]));
}
map.fitBounds(placeBounds);
}
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#search-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="search-panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id="map_canvas"></div>