Autocomplete Google Map V3 Places impossible to customize?

Question

I narrowed autocomplete to a region and to a bounds that cover only Australia, but I am still receving autocomplete with Chile and China and other country out of the selected area. Does anyone have a good solution to work this problem? I also can't change the styling off Google autocomplete, it is a self generated Div with style tag that overcomes my style to autocomplete DIV? I started to use Geocoder and Jquery autocomplete to filter the results but it doesn't work as well as Google Autocomplete the results are less than google maps autocomplete?

I call the Library like this:

Here is the code of creating the auto complete:

    var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-47.5765257137462, 106.259765625),
    new google.maps.LatLng(-9.6, 179.359375));

    var options = {
      bounds: defaultBounds,
      types: ['geocode'],
      offset: 5
    };

    var input = document.getElementById('store-locator-header');

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

John Jannotti · Answer 1 · 2012-10-10T21:40:55.030

4

Nowadays, you can restrict to a country with:

componentRestrictions: {country: 'us'},

edited Oct 10 '12 at 21:40

answered Oct 10 '12 at 20:25

John Jannotti

146
1
3

score 2 · Answer 2 · answered Jan 26 '12 at 07:22

When Adding Autocomplete with bounds, results are biased towards, but not restricted to, Places contained within these bounds. This is the same as when using Viewport Biasing in the Geocoding API. I'm afraid I don't have a method to filter out those suggestions that fall outside of the bounds.

score 0 · Answer 3 · answered Oct 28 '14 at 10:53

Another way to qucikly customise can be to set component restriction like shown below

var autocomplete = new google.maps.places.Autocomplete(input);
//autocomplete.bindTo('bounds', map);//restrict to bounds or viewport
autocomplete.setComponentRestrictions({'country': 'uk'});//restrict to country

more about places biasing here

score 0 · Answer 4 · answered Nov 13 '16 at 04:35

The problem is that LatLngBounds expects south-west and north-east corners.

Instead of:

var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-47.5765257137462, 106.259765625),
    new google.maps.LatLng(-9.6, 179.359375));

It should be:

var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-9.6, 106.259765625),
    new google.maps.LatLng(-47.5765257137462, 179.359375));

There is actually documentation to style the UI elements of Autocomplete.

Autocomplete Google Map V3 Places impossible to customize?

4 Answers4

Linked

Related