Add infobox to Google Places markers

Question

I'm not entirely clear on why Google shows you how to create a search box using Google Places but then doesn't add a click handler to give you an info box with relevant information. I haven't been able to make it work. Does anyone have any advice as to how I should go about doing that? Is there a writeup somewhere online that I just haven't seen?

Answer 1

I used the sample code from documentation and added some stuff to show info window for each place. Please check the following sample:

code snippet:

 function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -33.8688, lng: 151.2195}, zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Create the search box and link it to the UI element. var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Bias the SearchBox results towards current map's viewport. map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); var infowindow = new google.maps.InfoWindow({ }); var markers = []; // [START region_getplaces] // Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener('places_changed', function() { var places = searchBox.getPlaces(); if (places.length == 0) { return; } // Clear out the old markers. markers.forEach(function(marker) { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. 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) }; // Create a marker for each place. var marker = new google.maps.Marker({ map: map, icon: icon, title: place.name, position: place.geometry.location }); markers.push(marker); //Add info window click events here (function(marker, place){ marker.addListener('click', function() { var content = "<h1>"+place.name+"</h1>"; content += "<p>"+place.formatted_address+"</p>"; if (place.formatted_phone_number) { content += "<p>Phone:&nbsp;"+place.formatted_phone_number+"</p>"; } infowindow.setContent(content); infowindow.open(map, marker); }); })(marker, place); if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); // [END region_getplaces] } 

 html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 300px; } #pac-input:focus { border-color: #4d90fe; } .pac-container { font-family: Roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; } 

 <input id="pac-input" class="controls" type="text" placeholder="Search Box"> <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&v=3&libraries=places&callback=initAutocomplete"></script> 

You can see this example on jsbin as well: http://jsbin.com/gozabuc/edit?html,output

Hope it helps!