Trouble creating Google Map infowindow by passing information into an IIFE

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);
    }

Please provide a [mcve] that demonstrates your issue. – geocodezip Jul 02 '17 at 02:13 — geocodezip, Jul 02 '17 at 02:13

score 0 · Accepted Answer · answered Jul 02 '17 at 02:33

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>

you are LOVELY! As for my syntax linter and my own self, I am at a lost for words - literally 2-3 hours on this! WOW! — , Jul 02 '17 at 04:28

Trouble creating Google Map infowindow by passing information into an IIFE

1 Answers1