Autocomplete Google Map V3 Places impossible to customize?

问题

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);

回答1:

Nowadays, you can restrict to a country with:

componentRestrictions: {country: 'us'},

回答2:

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.

回答3:

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

回答4:

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.

来源：https://stackoverflow.com/questions/7562889/autocomplete-google-map-v3-places-impossible-to-customize

标签

google-maps

autocomplete

google-geocoder