javascript - Autocompleting only the place name with Google places API - Stack Overflow

admin管理员组

文章数量:1287867

I have successfully setup autoplete of Google Places API with

var input = document.getElementById('place_name');
var autoplete = new google.maps.places.Autoplete(input);

But that automatically fills the textbox place_name with full address like "ABC, Some Street, Washington, WA, United States" But I want to fill the textbox with only the place name e.g. ABC in my case. How I can do that?

I tried

google.maps.event.addListener(autoplete, 'place_changed', function () {
    var place = autoplete.getPlace();

    $('#place_name').val(place.name);
});

but it didn't do anything. Help please...

I have successfully setup autoplete of Google Places API with

var input = document.getElementById('place_name');
var autoplete = new google.maps.places.Autoplete(input);

But that automatically fills the textbox place_name with full address like "ABC, Some Street, Washington, WA, United States" But I want to fill the textbox with only the place name e.g. ABC in my case. How I can do that?

I tried

google.maps.event.addListener(autoplete, 'place_changed', function () {
    var place = autoplete.getPlace();

    $('#place_name').val(place.name);
});

but it didn't do anything. Help please...

• javascript
• jquery
• google-maps
• google-maps-api-3
• dictionary

Share Improve this question Follow asked Mar 9, 2014 at 13:45 ThompsonThompson 2,0001010 gold badges3737 silver badges5959 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I now realize I pletely misinterpreted the question. I thought it was the content of the dropdown box you wanted to sanitize. To change content of the searchbox, just add

input.value=input.value.split(',')[0]; 

to your place_changed event -> http://jsfiddle/9RkM9/

---

This is how google maps places organizes the results (predictions) in the dropdown box :

Google does not guarantee this structure to be stable in all future, but the fact they actually document the markup structure proofs we can trust it for now.

A typical .pac-item will look like this, here searching for "Los" :

<div class="pac-item">
    <span class="pac-item-query"><span class="pac-matched">Los</span>
    Altos</span><span>CA, United States</span>
</div>

Here with CA and United States present, which you want to avoid. The task is simply to reduce the content of the .pac-item node, so we only keep the name part of the socalled prediction. The autoplete searches each and every time the user hits a key, so you can overrule the autogenerated list of predictions on your own input keyup event. There need to be a little delay, so we actually access the newest list of predictions, not the previous one :

input.onkeyup = function(e) {
   setTimeout(function() {
      var places = document.querySelectorAll('.pac-item');      
      for (var i=0;i<places.length;i++) {
         var place = places[i];
         //get the icon
         var pac_icon = place.querySelector('.pac-icon').outerHTML;
         //get the mathed name only, including markup for precise match, loke "Los" in bold 
         var place_name_reduced = place.querySelector('.pac-item-query').outerHTML;
         place.innerHTML = pac_icon + place_name_reduced;
      }
   }, 150);
}

See it in action here -> http://jsfiddle/8SGvR/

Use address array. It has address in pieces. Just take what you need.

place.address_ponents

To see whats in this array, use console:

console.log(place.address_ponents);

For example, to update value of input

$('#place_name').val(place.address_ponents[0].long_name);

const options = {
    ponentRestrictions: { country: "az" },
    fields: ["geometry", "name"],
    origin: map.getCenter(),
    strictBounds: false,
    types: ["establishment"],
};

const input = document.getElementById('#txtHotels');
const autopleteHotels = new google.maps.places.Autoplete(input, options);

google.maps.event.addListener(autopleteHotels, 'place_changed', function () {
    var near_place = autopleteHotels.getPlace().name;
    input.value = near_place;
});

本文标签： javascriptAutocompleting only the place name with Google places APIStack Overflow