Googleオートコンプリートの結果を市と国のみに制限する方法

198

私は検索ボックスの推奨結果を返すためにGoogleオートコンプリートプレイスのJavaScriptを使用しています。必要なのは、入力された文字に関連する都市と国のみを表示することですが、Google APIは必要のない一般的なプレイスの結果をたくさん提供するので、方法結果を都市と国のみを表示するように制限します。

次の例を使用しています。

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>
javascript  autocomplete  google-maps-api-3 
— ジョンター
ソース

回答:

372

国の制限を試すことができます

function initialize() {

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

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

より詳しい情報：

ISO 3166-1 alpha-2を使用して、結果を特定のグループに制限できます。現在、componentRestrictionsを使用して国でフィルタリングできます。

国は、ISO 3166-1 Alpha-2互換の国コードの2文字として渡す必要があります。

正式に割り当てられた国コード

— フランソワ
ソース
マップをロードしていない場合に、オートコンプリートクエリに使用制限があるかどうかを知っていますか？私がマップをロードする場合、25,000の使用制限があることを知っています
— Mithil
4
2014年8月です。国と都市のみを表示することはすでに可能ですか？たとえば、「ミル」と入力すると、結果はミラノ、ベルガモ、イタリアになります。私はミラノ、イタリアだけが必要です。すべての国を1つずつ追加することはできません。
— erdomester 2014
2
複数の国を指定することは可能ですか？
— バート
2
@bartは明らかにそれは不可能です。この機能が必要な場合は、この問題にスターを付けてください。
— dlsso 2015
1
タイプ：['（cities）']を使用する場合、ここで郵便番号で検索することはできません。
— Mohneesh Agrawal
23 

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var options = {
        types: ['geocode'] //this should work !
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>
スニペットを展開

var options = {
  types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

他のタイプへの参照：http : //code.google.com/apis/maps/documentation/places/supported_types.html#table2

— UnLoCo
ソース
1
グーグルから直接このコードを確認してください。彼らは、フィルタリングの例を作っcode.google.com/apis/maps/documentation/javascript/...
— UnLoCo
オートコンプリートオブジェクトは2つの変数を受け入れません。受け入れられるのは「ジオコード」という1つの変数のみです。この問題を解決する方法がわかりません。Googleのドキュメントには多くのタイプがリストされていますが、受け入れることはできません。
— JohnTaa
同じパラメータが機能しAutocompleteServiceますか？
— Steven Aguilar
12

これを試して 

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&region=in" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>
スニペットを展開

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places "type =" text / javascript "

これを次のように変更します： "region = in"（in = india）

" http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in " type = "text / javascript"

— ラビンドラ
ソース
都市のリスト、州のリスト、地域のリストなどが必要です
— Shadab K、
これは受け入れられる答えになるはずです。OPが要求する結果を達成する最も簡単で最速の方法。そしてそれは私のために働いた。
— user2056633
9

答え国からのすべての都市をリストにフランソワ結果によって与えられます。ただし、国または地域の施設のすべての地域（都市+州+その他の地域など）をリストする必要がある場合は、タイプを変更することで結果をフィルターできます。

国内の都市のみをリストします 

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

国のすべての都市、州、地域をリストする

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "us"}
 };

国内のレストラン、店舗、オフィスなど、すべての施設を一覧表示します

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };

詳細と利用可能なオプション

https://developers.google.com/maps/documentation/javascript/places-autocomplete

これが誰かに役立つことを願っています

— キラン・ムラリー
ソース
9

基本的に承認された回答と同じですが、新しいタイプと複数の国の制限で更新されました：

function initialize() {

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: ["us", "de"]}
 };

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

の'(regions)'代わりにを'(cities)'使用すると、郵便番号および都市名で検索できます。

公式ドキュメントを参照してください、表3：https : //developers.google.com/places/supported_types

— seBaka28
ソース
8

私は少しの間Google Autocomplete APIをいじっていますが、結果を国のみに制限するために見つけることができる最良の解決策は次のとおりです。

var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components

for(var i = 0; i < result.address_components.length; i += 1) {
  var addressObj = result.address_components[i];
  for(var j = 0; j < addressObj.types.length; j += 1) {
    if (addressObj.types[j] === 'country') {
      console.log(addressObj.types[j]); // confirm that this is 'country'
      console.log(addressObj.long_name); // confirm that this is the country name
    }
  }
}

返された結果オブジェクトを見ると、住所のさまざまな部分を表すいくつかのオブジェクトを含むaddress_components配列があることがわかります。これらの各オブジェクト内には「types」配列が含まれ、この「types」配列内には、国のラベルを含む、住所に関連付けられたさまざまなラベルが表示されます。

— wmock
ソース
米国の特定の州のみに制限する方法、または特定の州を除外する方法はありますか？
— Martin Erlic 2016年
@santafebound私は同じことをしようとしています（オーストラリアの特定の州について）。ドキュメントからは答えは「いいえ」のようですが、responseオブジェクトを傍受してデータ内の他のキーで制限する方法を見つけたいと思っています。
— GT。
4

また、国の制限により、地図をズームして中央に配置する必要があります。

ズームとセンターのパラメーターを使用するだけです！;）

function initialize() {
  var myOptions = {
    zoom: countries['us'].zoom,
    center: countries['us'].center,
    mapTypeControl: false,
    panControl: false,
    zoomControl: false,
    streetViewControl: false
  };

  ... all other code ...

}
— キル・マズール
ソース
4

自分のための解決策を見つけた

var acService = new google.maps.places.AutocompleteService();
var autocompleteItems = [];

acService.getPlacePredictions({
    types: ['(regions)']
}, function(predictions) {
    predictions.forEach(function(prediction) {
        if (prediction.types.some(function(x) {
                return x === "country" || x === "administrative_area1" || x === "locality";
            })) {
            if (prediction.terms.length < 3) {
                autocompleteItems.push(prediction);
            }
        }
    });
});

このソリューションは都市と国のみを表示します。

— センク・ヤグムル
ソース
オートコンプリートを含む完全なコードリストを提供できますか
— Volodymyr Khmil
2 
<html>
  <head>
    <title>Example Using Google Complete API</title>   
  </head>
  <body>

<form>
   <input id="geocomplete" type="text" placeholder="Type an address/location"/>
    </form>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
  <script>
   $(function(){        
    $("#geocomplete").geocomplete();                           
   });
  </script>
 </body>
</html>

詳細については、このリンクにアクセスしてください

— ひなバハ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.