开发者

Autocomplete Google Map V3 Places impossible to customize?

开发者 https://www.devze.com 2023-04-08 02:02 出处:网络
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.

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 i开发者_C百科s 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); 


Nowadays, you can restrict to a country with:

componentRestrictions: {country: 'us'},


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.


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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号