プレイスクラス（プレビュー）

概要

プレイスクラスにより、プレイスライブラリ、Maps JavaScript API をよりシンプルに使用でき、Promise などの最新の使用パターンに対応できます。

スタートガイド

API キーを取得して必要な API を有効にする

プレイスクラス（プレビュー版）を使用するには、請求先アカウントが登録された Cloud プロジェクトを用意し、Maps JavaScript API と Places API を有効化しておく必要があります。そのためには、1 つ以上の API または SDK を有効にする手順に従います。その際、両方の API を、Cloud Console の同じプロジェクトで有効にする必要があります。

API キーを取得する

プレイスライブラリを読み込む

プレイスライブラリにある機能を利用するには、最初に Maps JavaScript API スクリプトの読み込み URL の libraries パラメータを使用してライブラリを読み込む必要があります。このプレビュー版では、v=beta も指定する必要があります。

<script async
  src="https://maps.googleapis.com/maps/api/js?v=beta&key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>

テキストクエリで場所を検索する

findPlaceFromQuery を呼び出して、テキストクエリにより場所を検索します。fields パラメータを使用して、1 つ以上の場所データフィールドのコンマ区切りリストをキャメルケースで指定します。fields: ['*'] を使用して、場所のすべてのデータを返します（テスト専用で、本番環境では推奨されません）。

次のサンプルでは、async/await パターンを使用して findPlaceFromQuery を呼び出し、結果を地図に表示します。

TypeScript

let map: google.maps.Map;
let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };

function initMap() {
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: centerCoordinates,
        zoom: 14,
        // ...
    });

    findPlace();
}

async function findPlace() {
    const request = {
        query: 'Sports Page',
        fields: ['displayName', 'location'],
        locationBias: centerCoordinates,
    };

    const { places } = await google.maps.places.Place.findPlaceFromQuery(request);

    if (places.length) {
        const place = places[0];
        const location = place.location as google.maps.LatLng;
        const markerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.location,
            title: place.displayName,
        });

        map.setCenter(location);

    } else {
        console.log('No results');
    }
}index.ts

JavaScript

let map;
let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: centerCoordinates,
    zoom: 14,
    // ...
  });
  findPlace();
}

async function findPlace() {
  const request = {
    query: "Sports Page",
    fields: ["displayName", "location"],
    locationBias: centerCoordinates,
  };
  const { places } = await google.maps.places.Place.findPlaceFromQuery(request);

  if (places.length) {
    const place = places[0];
    const location = place.location;
    const markerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.location,
      title: place.displayName,
    });

    map.setCenter(location);
  } else {
    console.log("No results");
  }
}
index.js

電話番号で場所を検索する

findPlaceFromPhoneNumber を呼び出して、電話番号で場所を検索します。電話番号は、国際電話形式（先頭にプラス記号（+）、国コード、電話番号の順）にする必要があります。詳しくは、E.164 ITU の推奨事項をご覧ください。fields パラメータを使用して、1 つ以上の場所データフィールドのコンマ区切りリストをキャメルケースで指定します。fields: ['*'] を使用して、場所のすべてのデータを返します（テスト専用で、本番環境では推奨されません）。

次のサンプルでは、async/await パターンを使用して findPlaceFromPhoneNumber を呼び出し、結果を地図に表示します。

TypeScript

async function findPlaceByPhone() {
    const request = {
        phoneNumber: '+1(206)787-5388',
        fields: ['displayName', 'location'],
    }

    const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(request);

    if (places.length) {
        const place = places[0];
        const markerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.location,
            title: place.displayName,
        });
        console.log(place.displayName);
    } else {
        console.log('No results');
    }
}index.ts

JavaScript

async function findPlaceByPhone() {
  const request = {
    phoneNumber: "+1(206)787-5388",
    fields: ["displayName", "location"],
  };
  const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(
    request
  );

  if (places.length) {
    const place = places[0];
    const markerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.location,
      title: place.displayName,
    });

    console.log(place.displayName);
  } else {
    console.log("No results");
  }
}

window.initMap = initMap;
index.js

Place Details を取得する

Place オブジェクトまたはプレイス ID がすでにある場合は、Place.fetchFields を呼び出して、その場所の詳細を取得できます。fields パラメータを使用して、1 つ以上の場所データフィールドのコンマ区切りリストをキャメルケースで指定します。fields: ['*'] を使用して、すべてのデータフィールドを返します（テスト専用で、本番環境では推奨されません）。

TypeScript

async function getPlaceDetails() {
    // Use place ID to create a new Place instance.
    const place = new google.maps.places.Place({
        id: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
        requestedLanguage: 'en', // optional
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({ fields: ['displayName', 'formattedAddress'] });

    // Show the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}index.ts

JavaScript

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({ fields: ["displayName", "formattedAddress"] });
  // Show the result
  console.log(place.displayName);
  console.log(place.formattedAddress);
}
index.js

プレイスデータフィールド

フィールドは Place Details の結果に対応しており、Basic（基本）、Contact（連絡先）、Atmosphere（雰囲気）の 3 つの請求カテゴリに分けられます。Basic フィールドは基本レートで課金され、追加料金はかかりません。Contact フィールドと Atmosphere フィールドはより高いレートで課金されます。詳細については、価格表をご覧ください。アトリビューション（html_attributions）は、このフィールドがリクエストされているかどうかにかかわらず、呼び出しのたびに必ず返されます。

注意: findPlaceFromQuery findPlaceFromPhoneNumber リクエストと fetchFields リクエストで、同じフィールドが返されることはありません。findPlaceFromQuery リクエストと findPlaceFromPhoneNumber リクエストは、fetchFields リクエストで返されるフィールドのサブセットが返されます。目的のフィールドが findPlaceFromQuery または findPlaceFromPhoneNumber で返されない場合は、いずれかを使用して place_id を取得してから、そのプレイス ID を使用して fetchFieldsリクエストを実行します。

プレイスクラスは次のフィールドに対応しています。

Basic Data

フィールド	プレイスクラス（v=Beta チャンネルのみ）
住所コンポーネント	`addressComponents`
ビジネスステータス	`businessStatus`
フォーマット済み住所	`adrFormatAddress`
位置情報	`location`
アイコン	`icon`
アイコンマスクのベース URI	`svgIconMaskUri`
アイコンの背景色	`iconBackgroundColor`
名前	`displayName`
写真	`photos`
プレイス ID	`id`
Plus Code	`plusCode`
タイプ	`types`
URL	`websiteURI`
UTC オフセット	`utcOffsetMinutes`
ビューポート	`viewport`
車椅子対応の入り口があるお店	`hasWheelchairAccessibleEntrance`

Contact Data フィールド

フィールド	プレイスクラス（v=Beta チャンネルのみ）
電話番号	`nationalPhoneNumber`
国際電話番号	`internationalPhoneNumber`
営業時間	`openingHours`
ウェブサイト	`websiteURI`

Atmosphere Data フィールド

フィールド	プレイスクラス（v=Beta チャンネルのみ）
ピックアップ	`hasCurbsidePickup`
宅配	`hasDelivery`
イートイン	`hasDineIn`
価格帯	`priceLevel`
評価	`rating`
予約可能	`isReservable`
クチコミ	`reviews`
ビールを出すお店	`servesBeer`
朝食メニューがあるお店	`servesBreakfast`
ブランチメニューがあるお店	`servesBrunch`
ディナーメニューがあるお店	`servesDinner`
ランチメニューがあるお店	`servesLunch`
ベジタリアン料理があるお店	`servesVegetarianFood`
ワインを出すお店	`servesWine`
テイクアウト	`hasTakeout`
ユーザーの評価の合計	`userRatingsCount`

プレイスクラス（プレビュー）

概要

スタートガイド

API キーを取得して必要な API を有効にする

プレイス ライブラリを読み込む

テキストクエリで場所を検索する

TypeScript

JavaScript

電話番号で場所を検索する

TypeScript

JavaScript

Place Details を取得する

TypeScript

JavaScript

プレイスデータ フィールド

Basic Data

Contact Data フィールド

Atmosphere Data フィールド

プレイスライブラリを読み込む

プレイスデータフィールド