フェッチ フィールド
既存の Place
オブジェクトかプレイス ID がある場合は、Place.fetchFields
メソッドを使ってそのプレイスの詳細を取得します。プレイスデータ フィールドのカンマ区切りのリストを戻り値として提供し、フィールド名をキャメルケースで指定します。返された Place
オブジェクトを使って、リクエストしたフィールドのデータを取得します。
次のサンプルでは、プレイス ID を使って新しい Place
を作成し、Place.fetchFields
を呼び出して displayName
フィールドと formattedAddress
フィールドをリクエストし、地図にマーカーを追加し、一部のデータをコンソールにロギングしています。
TypeScript
async function getPlaceDetails(Place) { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
JavaScript
async function getPlaceDetails(Place) { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Use place ID to create a new Place instance. const place = new Place({ id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg", requestedLanguage: "en", // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
Map
と Place
は、この関数の前に宣言されています。const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");
Place Overview コンポーネントを使用する
Place Overview コンポーネントは、何百万もの店舗に関する詳細情報として、営業時間、クチコミ(星の数による評価)、写真に加え、事前作成された UI におけるルート検索などのアクションを、5 種類のサイズとフォーマットで表示します。このコンポーネントは、Google Maps Platform の Extended Component Library(より良い地図機能とロケーション機能を迅速に構築できるようにデベロッパーを支援する、一連のウェブ コンポーネント)に含まれています。
Place Overview 構成ツールを使用すると、Place Overview のカスタム コンポーネントに埋め込み可能なコードを作成して、よく知られているフレームワーク(React や Angular など)にエクスポートして使ったり、フレームワークを一切介さずに使ったりできます。