How to programmatically enter a search bar and run place_changed for the Google Maps API?

Question

So, I have a search page with a location entry. If the user comes from another page with a search query, I want to programmatically enter this query into the input and run the changed location.

Here is what I still have:

var searchBox = new google.maps.places.SearchBox(input); $('input#location').val(searchQuery); google.maps.event.trigger(searchBox, 'places_changed'); 

However, this gives me the Cannot read property 'length' of undefined error for this line of my places_changed function:

 var places = searchBox.getPlaces(); if (places.length == 0) { return; } 

Thus, the searchBox returns undefined for getPlaces() when the input is populated programmatically. How can I get around this?

UPDATE: Here is a JSFiddle example to show what I mean.

Answer 1

Let's see what in the SearchBox workflow:

• User enters a string
• API provides a list with forecasts
• User selects prediction
• The API performs TextSearch based on the selected forecast and returns a list of places

Conclusion: When you know searchTerm, and you do not need to select a forecast, just skip steps 1-3 and directly run TextSearch. Assign the returned array to places in places -property SearchBox ( places_changed -event will be triggered automatically since SearchBox is an MVCObject where property changes will be observed and corresponding events will be fired automatically)

 function initialize() { var goo = google.maps, map = new goo.Map(document.getElementById('map_canvas'), { zoom: 1, center: new goo.LatLng(0, 0), noClear: true }), input = map.getDiv().querySelector('input'), ac = new goo.places.SearchBox(input), service = new goo.places.PlacesService(map), win = new goo.InfoWindow, markers = [], request; map.controls[goo.ControlPosition.TOP_CENTER].push(input); if (input.value.match(/\S/)) { request = { query: input.value }; if (ac.getBounds()) { request.bounds = ac.getBounds(); } service.textSearch(request, function(places) { //set the places-property of the SearchBox //places_changed will be triggered automatically ac.set('places', places || []) }); } goo.event.addListener(ac, 'places_changed', function() { win.close(); //remove previous markers while (markers.length) { markers.pop().setMap(null); } //add new markers (function(places) { var bounds = new goo.LatLngBounds(); for (var p = 0; p < places.length; ++p) { markers.push((function(place) { bounds.extend(place.geometry.location); var marker = new google.maps.Marker({ map: map, position: place.geometry.location }), content = document.createElement('div'); content.appendChild(document.createElement('strong')); content.lastChild.appendChild(document.createTextNode(place.name)); content.appendChild(document.createElement('div')); content.lastChild.appendChild(document.createTextNode(place.formatted_address)); goo.event.addListener(marker, 'click', function() { win.setContent(content); win.open(map, this); }); return marker; })(places[p])); }; if (markers.length) { if (markers.length === 1) { map.setCenter(bounds.getCenter()); } else { map.fitBounds(bounds); } } })(this.getPlaces()); }); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map_canvas { height: 100%; margin: 0; padding: 0 } strong{ font-weight:bold; } 

 <div id="map_canvas"> <input value="berlin"> </div> <script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>