Google Maps API autocomplete search without a drop-down list

Question

I use the Google Maps API and the autocomplete search feature. At this time, you should start entering the location (city, state, zip code, etc.), and then select the result from the drop-down list so that the map is the center in this place. However, I would like to make this proof of a fool and set it up so that if someone enters only a city or just a state and gets “enter” without selecting an autocomplete result, it will still work. For example, if someone types “New York” and presses “enter” without selecting a result from the drop-down list, he will still be concentrated in New York.

I assume this is achieved by grabbing the first result from the Autocomplete drop-down list if it is not manually selected.

I have added an event listener to represent the form, but am not sure how to pass the first result to the "place" variable.

Here is my code:

function searchBar(map) { var input = document.getElementById('search-input'); var searchform = document.getElementById('search-form'); var place; var options = {componentRestrictions: {country: 'us'}}; var autocomplete = new google.maps.places.Autocomplete(input, options); //Add listener to detect autocomplete selection google.maps.event.addListener(autocomplete, 'place_changed', function () { place = autocomplete.getPlace(); center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); map.setCenter(center); map.setZoom(5); }); //Add listener to search searchform.addEventListener('submit', function() { center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); map.setCenter(center); map.setZoom(5); }); //Reset the inpout box on click input.addEventListener('click', function(){ input.value = ""; }); }; 

And here is the JSFiddle for experimentation.

Answer 1

There is no implemented way to access places in the drop-down list. Basically, what you see in the drop-down list is not places, there are only forecasts. Details for the forecast will be loaded when you select a forecast.

Therefore, you must choose the software option.

How to do it:

Another way than clicking on the prediction is to use the down key, the key code is 40. The API listens for I / O events.

So, when you press enter:

• starting a key using key code 40 (down)

• starting a key using key code 13 (input)

   google.maps.event.addDomListener(input,'keydown',function(e){ if(e.keyCode===13 && !e.triggered){ google.maps.event.trigger(this,'keydown',{keyCode:40}) google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true}) } }); 

Note. To avoid an infinite loop for enter , I added a custom triggered property, so I can bypass the running keyboard inside the function.

Demo: http://jsfiddle.net/4nr4tdwz/1/

Answer 2

I added a filter to avoid keydown when the user has already selected any result from autocomplete:

 google.maps.event.addDomListener(input,'keydown',function(e){ if(e.keyCode===13 && $('.pac-item-selected').length == 0 && !e.triggered){ google.maps.event.trigger(this,'keydown',{keyCode:40}) google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true}) } }); 

Answer 3

An auxiliary function for setting the initial / standard location programmatically - for example. from the geolocation API.

  var triggerLocation = function(autocompleteInput, addressString) { var $locationInput = $(autocompleteInput).val(addressString).trigger('focus'); var maxTries = 500; var autocompleteSelectionInterval = setInterval(function() { if (!--maxTries) { clearInterval(autocompleteSelectionInterval); } if ($('.pac-container .pac-item').length) { google.maps.event.trigger($locationInput[0], 'keydown', { keyCode : 40 }); google.maps.event.trigger($locationInput[0], 'keydown', { keyCode : 13 }); clearInterval(autocompleteSelectionInterval); } }, 10); }; 

Example:

 var autocomplete = new google.maps.places.Autocomplete($('#location')[0]); triggerLocation('#location', 'New York');