CODEWITHSUNDEEP
google-maps-api-3
Artyom Chernetsov
Artyom Chernetsov

Reputation: 1404

Google maps Autocomplete: output only address without country and city

I use Places library to autocomplete address input. Search is limited to only one city, and I get output like this:

"Rossiya, Moskva, Leninskiy prospekt 28"

How to hide "Rossiya, Moskva"? ...

My query:

function() {
        // Search bounds
        var p1 = new google.maps.LatLng(54.686534, 35.463867);
        var p2 = new google.maps.LatLng(56.926993, 39.506836);
        self.options = {
            bounds : new google.maps.LatLngBounds(p1, p2),
            componentRestrictions: {country: 'ru'},
        };

        var elements = document.querySelectorAll('.address');

        for ( var i = 0; i < elements.length; i++) {
            var autocomplete = new google.maps.places.Autocomplete(elements[i],
                    self.options);
        }

Upvotes: 8

Views: 19696

Answers (5)

asanchez
asanchez

Reputation: 116

You can but you have to replace the value of the input field in two places.

Example:

var autocomplete = new google.maps.places.Autocomplete(input, placesOptions);
var input = document.getElementById('searchTextField');

inside the 'place_changed' event you need to do the following:

placeResult = autocomplete.getPlace();
//This will get only the address
input.value = placeResult.name;

This will change the value in the searchtextfield to the street address.

The second place is a bit tricky:

input.addEventListener('blur', function(){
// timeoutfunction allows to force the autocomplete field to only display the street name.
if(placeResult){ setTimeout(function(){ input.value = placeResult.name; }, 1); } });

The reason why we have to do this is because if you only add the event listener for blur, google places will populate the input field with the full address, so you have to 'wait' for google to update and then force your change by waiting some miliseconds.

Try it without the setTimeout function and you will see what I mean.

Upvotes: 6

Daniel Jonsson
Daniel Jonsson

Reputation: 1

I had a very similar problem which indeed was solvable. This in an Angular 2 project but it should be applicable elsewhere as well. I filter my results for establishments, and wanted to show only the name and hide the address part of the result. This did the trick for me, a function executing once you select a suggestion:

   getAddress(place: Object) {
    this.zone.run(() => {
        this.establishment = place['name'];
    });

where zone is an NgZone component injected in the constructor and this.establishment is the variable tied to [(NgModel)] in the input field.

Upvotes: 0

croppio.com
croppio.com

Reputation: 1883

Inside place_changed set a timeout function:

var streetString = place.address_components[0] or place.address_components[1];

window.setTimeout(function() {
  $('input').val(streetString);
}, 200);

This solution worked for me.

Upvotes: -1

lesyk
lesyk

Reputation: 4129

in result u have hash and from it u can get part what u want:

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

now from "place" u can get it

place.geometry.location.lat()

and for address

place.address_components[0] or place.address_components[1] ...

depends on what u want to get

Upvotes: 0

tkone
tkone

Reputation: 22758

EDIT

You can't. I had it the other way around, that you were just looking for a city. There is no way to only print out the street name (I'm assuming that's a street name) from the address component.

OPPOSITE OF WHAT WAS ASKED

From the docs:

the (cities) type collection instructs the Place service to return results that match either locality or administrative_area3.

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['(cities)']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Upvotes: 1

Related Questions