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

概要

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

スタートガイド

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

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

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

プレイス ライブラリにある機能を利用するには、最初に 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 を呼び出し、結果を地図に表示します。

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

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 を呼び出し、結果を地図に表示します。

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

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: ['*'] を使用して、すべてのデータ フィールドを返します（テスト専用で、本番環境では推奨されません）。

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

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）は、このフィールドがリクエストされているかどうかにかかわらず、呼び出しのたびに必ず返されます。

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

Basic Data

Contact Data フィールド

Atmosphere Data フィールド