开发者

autocomplete display only results from specific country or zip code

开发者 https://www.devze.com 2023-03-29 17:30 出处:网络
How can I make my autocomplete display only results from specific country or zip code? This is what i did so far

How can I make my autocomplete display only results from specific country or zip code?

This is what i did so far

var input = docu开发者_JS百科ment.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);


You have several types of filters:

  • Viewport Biasing
  • Region Biasing

If you prefer Viewport Biasing, then you should specify a location (the latitude/longitude around which you wish to retrieve Place information) and a radius (the distance (in meters) within which to return Place results). If you prefer Region Biasing, then you must provide a region (a country code, see http://en.wikipedia.org/wiki/CcTLD).

An example using Region Biasing: maps.googleapis.com/maps/api/place/autocomplete/json?input=Vict&types=geocode&region=CA&language=fr&sensor=true&key=AIzaSyAiFpFd85eMtfbvmVNEYuNds5TEF9FjIPI

You can read more in the official google maps api documentation: http://code.google.com/apis/maps/documentation/places/autocomplete.html


You can intercept the JSONP results that are returned by the google.maps.places.Autocomplete functionality and use them as you see fit.

Basically you redefine the appendChild method on the head element, and then monitor the javascript elements that the Google autocomplete code inserts into the DOM for JSONP. As javascript elements are added, you override the JSONP callbacks that Google defines in order to get access to the raw autocomplete data, which you can then limit by country and display.

It's a bit of a hack, here goes (I'm using jQuery but it's not necessary for this hack to work):

//The head element, where the Google Autocomplete code will insert a tag 
//for a javascript file.
var head = $('head')[0];  
//The name of the method the Autocomplete code uses to insert the tag.
var method = 'appendChild';  
//The method we will be overriding.
var originalMethod = head[method];

head[method] = function () {
  if (arguments[0] && arguments[0].src && arguments[0].src.match(/GetPredictions/)) {  //Check that the element is a javascript tag being inserted by Google.
    var callbackMatchObject = (/callback=([^&]+)&|$/).exec(arguments[0].src);  //Regex to extract the name of the callback method that the JSONP will call.
    var searchTermMatchObject = (/\?1s([^&]+)&/).exec(arguments[0].src);  //Regex to extract the search term that was entered by the user.
    var searchTerm = unescape(searchTermMatchObject[1]);
    if (callbackMatchObject && searchTermMatchObject) {
      var names = callbackMatchObject[1].split('.');  //The JSONP callback method is in the form "abc.def" and each time has a different random name.
      var originalCallback = names[0] && names[1] && window[names[0]] && window[names[0]][names[1]];  //Store the original callback method.
      if (originalCallback) {
        var newCallback = function () {  //Define your own JSONP callback
          if (arguments[0] && arguments[0][3]) {
            var data = arguments[0][4];  //Your autocomplete results
            //SUCCESS! - Limit results here and do something with them, such as displaying them in an autocomplete dropdown.
          }
        }

        //Add copy all the attributes of the old callback function to the new callback function. This prevents the autocomplete functionality from throwing an error.
        for (name in originalCallback) {  
          newCallback[name] = originalCallback[name];
        }
        window[names[0]][names[1]] = newCallback;  //Override the JSONP callback
      }
    }

  //Insert the element into the dom, regardless of whether it was being inserted by Google.
  return originalMethod.apply(this, arguments);
};
0

精彩评论

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