ウェブサイト検索

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

私は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>

回答 #1

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

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

<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

回答 #3

フランソワによって与えられた答えは、国のすべての都市をリストすることになります。しかし、もし要件が国のすべての地域（都市＋州＋その他の地域など）や国の施設をリストすることであれば、タイプを変更することで結果を適切にフィルタリングできます。

国の都市のみをリストする

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

その国のすべての都市、州、地域を一覧表示

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

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

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

また、このように結果フィルターに複数のタイプを追加することもできます。

学校や薬局に相当するすべての施設、および地区、地域、サブ地域タイプの場所をリストする

  var options = {
      types: ['school','drugstore','neighborhood', 'locality', 'sublocality'],
      componentRestrictions: {country: "us"}
     };

注意: 利用可能なタイプを確認し、テーブル1とテーブル2のアイテムのみを組み合わせることができ、最大で5つのアイテムまで組み合わせ可能です。テーブル3は組み合わせできません。

詳細情報およびオプションは次の場所で入手できます

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

これが誰かの役に立てば幸いです

回答 #4

これを試してみて

<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=インド）に変更してください

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

回答 #5

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

function initialize() {

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

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

'(cities)' の代わりに '(regions)' を使用すると、郵便番号だけでなく都市名でも検索できるようになります。

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

関連記事