Google Maps API Javascript: Activating infowindows on markers from Places search box -

i have implemented places search box strictly following google developer documentation. markers displayed on map, based on specific search term (e.g. "restaurants"). of course want show infowindow when user clicks on marker, give user information place. have followed google developers documentation in order activate infowindows, withouth success (the changes have made in code illustrated comments 1, 2 , 3).

earlier posts here didn't me out either. appreciated.

<script>  function initmap() {   var map = new google.maps.map(document.getelementbyid('map'), {     center: {lat: -33.8688, lng: 151.2195},     zoom: 13,     maptypeid: google.maps.maptypeid.roadmap   });   var input = document.getelementbyid('pac-input'); var searchbox = new google.maps.places.searchbox(input); map.controls[google.maps.controlposition.top_left].push(input);   map.addlistener('bounds_changed', function() {     searchbox.setbounds(map.getbounds()); });   // 1: variables infowindow , service:  var infowindow = new google.maps.infowindow(); var service = new google.maps.places.placesservice(map);  var markers = [];  searchbox.addlistener('places_changed', function() {    var places = searchbox.getplaces();       if (places.length == 0) {       return;     }      markers.foreach(function(marker) {       marker.setmap(null);     });     markers = [];      var bounds = new google.maps.latlngbounds();    places.foreach(function(place) {       var icon = {         url: place.icon,         size: new google.maps.size(71, 71),         origin: new google.maps.point(0, 0),         anchor: new google.maps.point(17, 34),         scaledsize: new google.maps.size(25, 25)       };        markers.push(new google.maps.marker({         map: map,         icon: icon,         title: place.name,         position: place.geometry.location       }));        if (place.geometry.viewport) {          bounds.union(place.geometry.viewport);       } else {         bounds.extend(place.geometry.location);       }   });  // 2: getdetails, referring "places" (var places = searchbox.getplaces();) on map // 3: addlistener on markers, show infowindow upon clickevent       service.getdetails(places, function(place, status) {     if (status === google.maps.places.placesservicestatus.ok) {       google.maps.event.addlistener(markers, 'click', function() {         infowindow.setcontent('<div><strong>' + place.name + '</strong><br>' +           'place id: ' + place.place_id + '<br>' +           place.formatted_address + '</div>');         infowindow.open(map, this);       });     }   });      map.fitbounds(bounds); });   }   </script> 

you need details request when marker clicked (if run details requests when create markers run query limit).

then open infowindow on marker when response comes back.

code snippet:

function initmap() {    var map = new google.maps.map(document.getelementbyid('map'), {      center: {        lat: -33.8688,        lng: 151.2195      },      zoom: 13,      maptypeid: google.maps.maptypeid.roadmap    });        var input = document.getelementbyid('pac-input');    var searchbox = new google.maps.places.searchbox(input);    map.controls[google.maps.controlposition.top_left].push(input);    map.addlistener('bounds_changed', function() {      searchbox.setbounds(map.getbounds());    });    // 1: variables infowindow , service:    var infowindow = new google.maps.infowindow();    var service = new google.maps.places.placesservice(map);    var markers = [];    searchbox.addlistener('places_changed', function() {      var places = searchbox.getplaces();      if (places.length == 0) {        return;      }      markers.foreach(function(marker) {        marker.setmap(null);      });      markers = [];      var bounds = new google.maps.latlngbounds();      places.foreach(function(place) {          var icon = {            url: place.icon,            size: new google.maps.size(71, 71),            origin: new google.maps.point(0, 0),            anchor: new google.maps.point(17, 34),            scaledsize: new google.maps.size(25, 25)          };            var marker = new google.maps.marker({            map: map,            icon: icon,            title: place.name,            position: place.geometry.location,            placeid: place.place_id          });          markers.push(marker);          google.maps.event.addlistener(marker, 'click', function(evt) {            // 2: getdetails, referring "places" (var places = searchbox.getplaces();) on map            // 3: addlistener on markers, show infowindow upon clickevent                 service.getdetails({              placeid: this.placeid            }, (function(marker) {              return function(place, status) {                if (status === google.maps.places.placesservicestatus.ok) {                  infowindow.setcontent('<div><strong>' + place.name + '</strong><br>' +                    'place id: ' + place.place_id + '<br>' +                    place.formatted_address + '</div>');                  infowindow.open(map, marker);                }              }            }(marker)));          });          if (place.geometry.location) {            bounds.extend(place.geometry.location);          }        })        // map.fitbounds(bounds);    });  }  google.maps.event.adddomlistener(window, "load", initmap);

html,  body,  #map {    height: 100%;    width: 100%;    margin: 0px;    padding: 0px  }

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>  <input id="pac-input" type="text" />  <div id="map"></div>