Google Maps API Places Library SearchBox

Question

I am attempting to add infowindows to the markers with PlaceDetails that are returned after a google searchbox search. When I click on the markers no infowindows open. I cannot figure out where I went wrong?

 var infowindow = new google.maps.InfoWindow();
 //Function for search box
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];

google.maps.event.addListener(searchBox, 'places_changed', function() {
  var places = searchBox.getPlaces();

  for (var i = 0, marker; marker = markers[i]; i++) {
    marker.setMap(null);
  }

  markers = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0, place; place = places[i]; i++) {
    var image = new google.maps.MarkerImage(
        'img/pin_blue.png',
        new google.maps.Size(15,29),
        new google.maps.Point(0,0),
        new google.maps.Point(8,29)
      );

      var shadow = new google.maps.MarkerImage(
        'img/pin_shadow.png',
        new google.maps.Size(33,29),
        new google.maps.Point(0,0),
        new google.maps.Point(8,29)
      );

      var shape = {
        coord: [11,1,12,2,13,3,14,4,14,5,14,6,14,7,14,8,14,9,14,10,14,11,14,12,13,13,12,14,11,15,8,16,8,17,8,18,8,19,8,20,8,21,8,22,8,23,8,24,11,25,11,26,11,27,3,27,3,26,3,25,6,24,6,23,6,22,6,21,6,20,6,19,6,18,6,17,6,16,3,15,2,14,1,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,1,3,2,2,3,1,11,1],
        type: 'poly'
      };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      shadow: shadow,
      shape: shape,
      title: place.name,
      position: place.geometry.location
    });

    markers.push(marker);

    bounds.extend(place.geometry.location);
  }

  map.fitBounds(bounds);

  //add an infowindow
  google.maps.event.addListener(markers, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, markers[i]);
  });
});
google.maps.event.addListener(map, 'bounds_changed', function() {
  //var bounds = map.getBounds();
  searchBox.bindTo('bounds', map);
}); 

};

Answer 1

To get the Place Details to use in the InfoWindow, you need to make a second request to the Places API (when the marker is clicked). Inside the createMarker function (which has function closure on the "place"):

var request =  {
   reference: place.reference
};
google.maps.event.addListener(marker,'click',function(){
   service.getDetails(request, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
          var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
          if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
          if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
          contentStr += '<br>'+place.types+'</p>';
          infowindow.setContent(contentStr);
          infowindow.open(map,marker);
       } else { 
          var contentStr = "<h5>No Result, status="+status+"</h5>";
          infowindow.setContent(contentStr);
          infowindow.open(map,marker);
       }
   });
});

Example