以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

住所と検索語句のオートコンプリート

はじめに

オートコンプリートは、Google Maps JavaScript API のプレイス ライブラリの機能です。オートコンプリートを使用して、Google マップ検索フィールドの予測入力検索動作をアプリケーションに組み込むことができます。ユーザーが住所の入力を開始すると、オートコンプリートによって残りが入力されます。

はじめに

Google Maps JavaScript API でプレイス ライブラリを使用するには、まず Google API Console で Google Maps JavaScript API をセットアップしたプロジェクトで、Google Places API Web Service が有効になっていることを確認します。

有効な API のリストを表示するには:

  1. Google API Console に移動します。
  2. [Select a project] ボタンをクリックし、Google Maps JavaScript API を設定している同じプロジェクトを選択して、[Open] をクリックします。
  3. [Dashboard] の API リストで、Google Places API Web Service を探します。
  4. リストに API が表示されていれば、準備は完了です。API がリストに表示されていない場合は、次の手順で有効にします。
    1. ページの上部にある [ENABLE API] を選択し、[Library] タブを表示します。または、左側のメニューで [Library] を選択します。
    2. Google Places API Web Service を検索し、結果のリストからこの API を選択します。
    3. [ENABLE] を選択します。このプロセスを完了すると、[Dashboard] の API リストに Google Places API Web Service が表示されます。

ライブラリのロード

プレイス サービスは、メインの Maps JavaScript API コードから独立した別のライブラリです。このライブラリの機能を使うには、まず Maps API のブートストラップ URL の中で libraries パラメータを用いてライブラリをロードする必要があります。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

詳細については、ライブラリの概要をご覧ください。

使用制限とポリシー

割り当て

Google Places API Web Service と Places Autocomplete は、Google Places API Web Service の使用制限に関するドキュメントで説明されているように割り当て量を共有します。この使用制限は、Places Library in the Google Maps JavaScript API を使用する際にも適用されます。1 日あたりの使用量は、クライアント側およびサーバー側のリクエストの合計数で計算されます。

ポリシー

Places Library in the Google Maps JavaScript API を使用するには、Google Places API Web Service を対象とするポリシーに従う必要があります。

クラスの概要

API は、2 種類のオートコンプリート ウィジェットを提供します。これらは、それぞれ AutocompleteSearchBox クラスを使用して追加できます。また、AutocompleteService クラスを使用して、プログラムによるオートコンプリート結果の取得を行うことができます。

以下に、使用可能なクラスの概要を示します。

  • Autocomplete は、ウェブページにテキスト入力フィールドを追加し、このフィールドの文字入力を監視します。ユーザーがテキストを入力すると、オートコンプリートによりドロップダウン ピックリストの形式でプレイスの予測が返されます。ユーザーがリストからプレイスを選択すると、そのプレイスの情報がオートコンプリート オブジェクトに返され、アプリケーションによる取得が可能になります。詳細については、下記をご覧ください。
  • SearchBox は、Autocomplete とほぼ同様な方法でウェブページにテキスト入力フィールドを追加します。相違点は次のとおりです。
    • 主な相違は、ピックリストに表示される結果にあります。SearchBox では、予測リストが拡張されます。これには、プレイス(Google Places API で定義されたもの)に加え、検索語句の候補が含まれます。たとえば、ユーザーが「東京のピ」まで入力すると、ピックリストには「東京のピザ屋」という語句が含まれ、さらにさまざまなピザ販売店の名前が含まれます。
    • SearchBox で提供される検索を絞り込むためのオプションは Autocomplete の場合より少なくなっています。前者では、指定した LatLngBounds に対して検索に優先度を持たせることができます。後者では、検索を特定の国や特定のプレイス タイプに絞り込むことができ、境界を設定することも可能です。
    詳細については、下記をご覧ください。
  • AutocompleteService オブジェクトを作成して、プログラムによる予測の取得を行うことができます。getPlacePredictions() を呼び出して一致するプレイスを取得するか、getQueryPredictions() を呼び出して一致するプレイスに加えて検索語句候補も取得します。注: AutocompleteService では、UI コントロールは追加されません。代わりに、上記のメソッドは、予測オブジェクトの配列を返します。各予測オブジェクトには、予測のテキストに加え、参照情報、さらに結果がどのようにユーザー入力と一致しているのかの詳細が含まれます。詳細については、下記をご覧ください。

以降では、使用例を示し、上記のクラスを使用する詳細を示します。

オートコンプリートの使用方法

このビデオは、Autocomplete の使用方法を説明しています。ビデオには、デモとコードサンプルが含まれています。

例: 住所フォームのオートコンプリート

アプリケーションに、オンライン ショッピングの配送先住所、クレジット カードの請求先住所、タクシー予約フォームなどの住所フォームが含まれている場合があります。オートコンプリートは、ユーザーによる詳細の入力を支援します。

図 1 は、オートコンプリート テキスト フィールドと、ユーザーが検索クエリを入力すると表示されるプレイス予測のピックリストを示しています。

オートコンプリート テキスト フィールドと、ユーザーが検索クエリを入力すると表示されるプレイス予測のピックリスト。
図 1: オートコンプリート テキスト フィールドとピックリスト

ユーザーがピックリストから住所を選択すると、アプリケーションで住所フォームへの入力が可能になります。

入力が完了した住所フォーム。
図 2: 入力が完了した住所フォーム

実際の住所フォームをご確認ください。例を見る(places-autocomplete-addressform.html)

オートコンプリートをウェブページに追加する方法は、後で説明します。

例: マップ コントロールのオートコンプリート

図 3 に示すように、地図アプリケーションの一部としてユーザーに情報の入力を促すには、オートコンプリートが便利です。

都市検索クエリの部分一致を示しているオートコンプリート テキスト フィールド。
図 3: オートコンプリート テキスト フィールドとピックリスト

実例:例を見る(places-autocomplete-hotelsearch.html)

オートコンプリートをウェブページに追加する方法は、後で説明します。

プレイスと住所のオートコンプリートを追加する

Autocomplete は、ウェブページにテキスト入力フィールドを作成し、UI ピックリスト内にプレイスの予測を提供します。また、getPlace() リクエストのレスポンスとしてプレイスの詳細を返します。ピックリスト内の各エントリは、単一のプレイス(Google Places API により定義されたもの)に対応します。

Autocomplete コンストラクタは、次の 2 つの引数を取ります。

  • text タイプの HTML input 要素。これは、オートコンプリート サービスが監視し、結果を付加する入力フィールドです。
  • options 引数。以下のプロパティを含めることができます。
    • types の配列には、下記のサポートされるタイプに記載されているタイプやタイプ コレクションを明示的に指定します。何も指定しないと、すべてのタイプが返されます。通常、使用できるタイプは 1 つのみです。例外として、geocode タイプと establishment タイプを混在させることもできますが、この場合はタイプを指定しない場合と同じ結果になります。サポートされるタイプは次のとおりです。
      • geocode では、お店やサービスの情報は返されず、ジオコーディングの結果のみが返されます。
      • address では、ジオコーディングの結果のみが、正確な住所とともに返されます。
      • establishment では、お店やサービスの結果のみが返されます。
      • (regions) タイプ コレクションでは次のタイプと一致する結果がすべて返されます。
        • locality(地区)
        • sublocality(下位地区)
        • postal_code(郵便番号)
        • country(国)
        • administrative_area1(行政区画 1)
        • administrative_area2(行政区画 2)
      • (cities) タイプ コレクションでは、locality(地区)または administrative_area3(行政区画 3)と一致する結果が返されます。
    • bounds は、プレイスを検索する領域を指定する google.maps.LatLngBounds オブジェクトです。この領域内に含まれるプレイスが優先されますが、これに限定されません。
    • componentRestrictions を使用して、特定のグループに結果を制限できます。現時点では、componentRestrictions を使って国を基準にフィルタリングできます。国は ISO 3166-1 Alpha-2 に準拠した 2 文字の国コードで指定してください。
    • placeIdOnly を使用して、プレイス ID のみを取得するように Autocomplete ウィジェットに指示できます。Autocomplete オブジェクトの getPlace() を呼び出したとき、提供される PlaceResult には place idtypesname プロパティのみが設定されます。返されたプレイス ID を使用して、プレイス、ジオコーディング、ルート、距離マトリックス サービスへの呼び出しを実行できます。

オートコンプリートのバイアスと境界を設定する

次の方法でオートコンプリートの結果にバイアスをかけて、特定の場所の周辺や範囲を優先させることができます。

  • Autocomplete オブジェクトの作成時に境界を設定する。
  • 既存の Autocomplete の境界を変更する。
  • マップのビューポートに境界を設定する。
  • 検索を特定の国に限定する。

詳細については以降のセクションで説明します。

Autocomplete オブジェクトの作成時に境界を設定する

以下の例では、boundstypes のオプションを使用して「establishment」タイプのお店やサービスをリクエストします。その際、指定された地理範囲のものが優先されます。

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

既存の Autocomplete の境界を変更する

setBounds() を呼び出して、既存の Autocomplete の検索範囲を変更します。

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

例を見る(places-autocomplete-addressform.html)

マップのビューポートに境界を設定する

bindTo() を使用して、ビューポートが変更されても、マップのビューポートに結果をバイアスします。

autocomplete.bindTo('bounds', map);

例を見る(places-autocomplete.html)

検索を特定の国に限定する

componentRestrictions オプションを使用して、オートコンプリート検索を特定の国に限定できます。次のコードは、結果をフランス内の都市に限定します。

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

次の例では、ユーザーは国を選択して、次にオートコンプリートの結果をその国に制限できます。

// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
  var country = document.getElementById('country').value;
  if (country == 'all') {
    autocomplete.setComponentRestrictions([]);
    map.setCenter({lat: 15, lng: 0});
    map.setZoom(2);
  } else {
    autocomplete.setComponentRestrictions({'country': country});
    map.setCenter(countries[country].center);
    map.setZoom(countries[country].zoom);
  }
  clearResults();
  clearMarkers();
}

例を見る(places-autocomplete-hotelsearch.html)

オートコンプリートのプレースホルダ テキストをカスタマイズする

デフォルトでは、オートコンプリート サービスにより作成されるテキスト フィールドには、標準のプレースホルダ テキストが含まれています。このテキストを変更するには、input 要素の placeholder 属性を設定します。

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

注: デフォルトのプレースホルダ テキストは自動的にローカライズされます。独自のプレースホルダ値を指定した場合は、アプリケーションでその値のローカライズを処理する必要があります。Google Maps JavaScript API が使用する言語を選択する仕組みについては、ローカライズのドキュメントをお読みください。

オートコンプリートからプレイスの情報を取得する

ユーザーがオートコンプリート テキスト フィールドに付加された予測からプレイスを選択すると、place_changed イベントが発行されます。Autocomplete オブジェクト上で getPlace() を呼び出して、PlaceResult オブジェクトを取得できます。

デフォルトでは、オートコンプリートにより完全な住所が 1 行のテキストとして提供されます。住所フォームに対しては、構造化された形式の住所を取得すると便利です。Autocomplete.getPlace() を使用して、構造化された住所など、各オートコンプリート予測の完全な詳細を取得できます。

placeIdOnly オプションを使用すると、Autocomplete オブジェクトはプレイスの詳細を取得せず、PlaceResult オブジェクトには place_idtypesname プロパティのみが設定されます。

プレイスの詳細を取得するには、place_changed イベントを取得する際に、Autocomplete オブジェクトの getPlace() を呼び出して、PlaceResult オブジェクトを取得します。その後、ジオコーディングを使用して場所の座標を取得したり、プレイス サービスを使用して選択したプレイスの詳細情報を取得したりできます。

PlaceResult オブジェクトの詳細については、プレイス詳細結果のドキュメントをご覧ください。

次の例では、オートコンプリートを使用して住所フォームのフィールドに入力します。

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

例を見る(places-autocomplete-addressform.html)

SearchBox により、ユーザーはテキストベースの地理検索(「東京のピザ屋」や「銀座周辺の靴屋」など)を実行できるようになります。SearchBox をテキスト フィールドに付加できます。テキストが入力されると、ドロップダウン ピックリストの形式で予測が返されます。

SearchBox では、予測リストが拡張されます。これには、プレイス(Google Places API で定義されたもの)に加え、検索語句の候補が含まれます。たとえば、ユーザーが「東京のピ」まで入力すると、ピックリストには「東京のピザ屋」という語句が含まれ、さらにさまざまなピザ販売店の名前が含まれます。ユーザーがリストからプレイスを選択すると、そのプレイスの情報が SearchBox オブジェクトに返され、アプリケーションによる取得が可能になります。

SearchBox コンストラクタは次の 2 つの引数を取ります。

  • text タイプの HTML input 要素。これは、SearchBox サービスが監視し、結果を付加する入力フィールドです。
  • bounds プロパティを含むことができる options 引数: bounds は、プレイスを検索する領域を指定する google.maps.LatLngBounds オブジェクトです。この領域内に含まれるプレイスが優先されますが、これに限定されません。

次のコードは、境界パラメータを使用して、緯度/経度座標で指定された特定の地理範囲に含まれるプレイスに対して結果にバイアスをかけます。

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

SearchBox の検索領域を変更する

既存の SearchBox の検索領域を変更するには、SearchBox オブジェクト上で setBounds() を呼び出して、関連する LatLngBounds オブジェクトを渡します。

例を見る(places-searchbox.html)

SearchBox 情報を取得する

ユーザーが検索ボックスに付加された予測から項目を選択すると、place_changed イベントが発行されます。SearchBox オブジェクト上で getPlace() を呼び出して、それぞれが PlaceResult オブジェクトである複数の予測を含む配列を取得できます。

PlaceResult オブジェクトの詳細については、プレイス詳細結果のドキュメントをご覧ください。

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

例を見る(places-searchbox.html)

Autocomplete と SearchBox のウィジェットにスタイルを設定する

デフォルトでは、AutocompleteSearchBox により提供される UI 要素は、Google マップと一体化したスタイルが設定されています。独自のサイトに合うように、スタイルを変更する必要が生じる場合があります。以下の CSS クラスを利用できます。以下に示すすべてのクラスは、AutocompleteSearchBox の両方のウィジェットに適用されます。

Autocomplete と SearchBox のウィジェット用の CSS クラスの図示
Autocomplete と SearchBox のウィジェット用の CSS クラス
CSS クラス 説明
pac-container プレイス オートコンプリート リクエスト サービスにより返される予測のリストを含む視覚要素。このリストは、ドロップダウン リストとして Autocomplete または SearchBox ウィジェットの下に表示されます。
pac-icon 予測リスト内の各項目の左に表示されるアイコン。
pac-item Autocomplete または SearchBox ウィジェットにより提供される、予測リスト内の項目。
pac-item:hover ユーザーがその上にポインタを重ねたときの項目。
pac-item-selected ユーザーがキーボードから選択した場合の項目。注: 選択された項目はこのクラスおよび pac-item クラスのメンバーになります。
pac-item-query pac-item 内の予測の主要部分。地理的な場所の検索の場合、ここには「シドニー」などのプレイス名、または「キングストリート 10」などの市町村と番地が含まれます。「東京のピザ屋」などのテキスト検索の場合、クエリのフルテキストが含まれます。デフォルトでは、pac-item-query の色は黒です。pac-item 内にその他の追加テキストが存在する場合、これは pac-item-query 以外のテキストであり、pac-item のスタイルを継承します。この色は、デフォルトで灰色です。通常、この追加テキストは住所です。
pac-matched 返された予測のユーザーの入力と一致する部分。デフォルトでは、この一致テキストは太字で強調表示されます。一致テキストは pac-item 内の任意の場所に存在します。pac-item-query の一部である必要はありません。また、一部が pac-item-query 内に存在し、残りのテキストの一部が pac-item に存在する場合があります。

オートコンプリート サービスから予測を取得する

プログラムを使用して予測を取得するには、AutocompleteService クラスを使用します。AutocompleteService では、UI コントロールは追加されません。その代り、予測オブジェクトの配列が返されます。各予測オブジェクトには、予測のテキスト、参照情報、さらに結果がどのようにユーザー入力と一致しているのかの詳細が含まれます。これは、上記の Autocomplete および SearchBox により提供されるユーザー インターフェースよりも高度な制御を行う必要がある場合に有用です。

AutocompleteService では、以下のメソッドが提供されます。

  • getPlacePredictions() は、プレイスの予測を返します。注: Places API で定義されているように、プレイスは、施設、地理的な場所、または有名なスポットなどの場合があります。
  • getQueryPredictions() は、拡張された予測リストを返します。これには、プレイス(Places API で定義されたもの)に加え、検索語句の候補が含まれます。たとえば、ユーザーが「東京のピ」まで入力すると、ピックリストには「東京のピザ屋」という語句が含まれ、さらにさまざまなピザ販売店の名前が含まれます。

上記の両方のメソッドは、次の形式で 5 個の予測オブジェクトの配列を返します。

  • description は一致した予測です。
  • id には、このプレイスを示す一意の ID が含まれます。この ID を使用してこのプレイスに関する情報を取得することはできませんが、このプレイスに関するデータを統合したり、個々の検索でプレイス ID を確認したりできます。ID は変更されることがあるので、保存したプレイスの ID を、後で同じプレイスに対して実行する詳細リクエストで返される ID と比較し、必要に応じてアップデートすることをお勧めします。注: このページの廃止のお知らせに記載されている通り、place_id の導入により、id は廃止されました。
  • matched_substrings には、ユーザーの入力の要素と一致する、description 内の一連の部分文字列が含まれます。これは、アプリケーションでこれらの部分文字列を強調表示する場合に有用です。多くの場合、クエリは description フィールドの部分文字列として現れます。
    • length は、部分文字列の長さです。
    • offset は、一致する部分文字列が現れる位置の、description 文字列の先頭から計測された文字オフセットです。
  • place_id は、プレイスを一意に識別するテキスト表記の ID です。プレイスの情報を取得するには、この ID を プレイス詳細リクエストplaceid フィールドに渡します。詳細は、プレイス ID を使用したプレイスの参照をご覧ください。
  • reference には、今後詳細サービスへのクエリで使用できるトークンが含まれます。このトークンは、詳細サービスへのリクエストで使用される reference とは異なる場合があります。保存したプレイスの reference は定期的にアップデートすることをお勧めします。このトークンはプレイスを一意に識別しますが、その逆は成り立ちません。プレイスには複数の有効な reference トークンがある場合があります。注: このページの廃止のお知らせに記載されている通り、place_id の導入により、reference は廃止されました。
  • terms は、クエリの要素が含まれる配列です。プレイスの場合、通常は各要素は住所の一部分となります。
    • offset は、一致する部分文字列が現れる位置の、description 文字列の先頭から計測された文字オフセットです。
    • value は、一致している語句です。

下の例は、語句「pizza near」のクエリ予測リクエストを実行し、結果をリストに表示します。

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}
<div id="right-panel">
  <p>Query suggestions for 'pizza near Syd':</p>
  <ul id="results"></ul>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initService"
    async defer></script>
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}

例を見る(places-queryprediction.html)

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。