Class Tempat (pratinjau)

Ringkasan

Class Tempat menyediakan API yang lebih sederhana untuk menggunakan Library Tempat dan Maps JavaScript API, serta mendukung pola penggunaan modern seperti Promise.

Memulai

Mendapatkan kunci API dan mengaktifkan API yang diperlukan

Sebelum menggunakan pratinjau class Tempat, Anda memerlukan project Cloud dengan akun penagihan. Anda juga harus mengaktifkan Maps JavaScript API dan Places API. Untuk melakukannya, ikuti petunjuk guna mengaktifkan satu atau beberapa API atau SDK. Perhatikan bahwa kedua API ini harus diaktifkan di project yang sama di Cloud Console.

Memuat Library Tempat

Untuk menggunakan fungsi yang ada di dalam Library Tempat, Anda harus memuatnya terlebih dahulu menggunakan parameter libraries di URL pemuatan skrip Maps JavaScript API. Untuk versi pratinjau ini, Anda juga harus menentukan v=beta.

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

Menemukan tempat berdasarkan kueri teks

Panggil findPlaceFromQuery untuk menemukan tempat berdasarkan kueri teks. Gunakan parameter fields untuk menentukan daftar yang dipisahkan koma yang berisi satu atau beberapa kolom data tempat dalam camel case. Gunakan fields: ['*'] untuk menampilkan semua data tempat (hanya untuk pengujian, tidak direkomendasikan di lingkungan produksi).

Contoh berikut menunjukkan penggunaan pola async/await untuk memanggil findPlaceFromQuery dan menampilkan hasilnya pada peta.

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

Menemukan tempat berdasarkan nomor telepon

Panggil findPlaceFromPhoneNumber untuk menemukan tempat berdasarkan nomor telepon. Nomor telepon harus memiliki format internasional (diawali dengan tanda plus ("+"), yang diikuti dengan kode negara, lalu nomor telepon itu sendiri). Lihat Rekomendasi ITU E.164 untuk mengetahui informasi selengkapnya. Gunakan parameter fields untuk menentukan daftar yang dipisahkan koma yang berisi satu atau beberapa kolom data tempat dalam camel case. Gunakan fields: ['*'] untuk menampilkan semua data tempat (hanya untuk pengujian, tidak direkomendasikan di lingkungan produksi).

Contoh berikut menunjukkan penggunaan pola async/await untuk memanggil findPlaceFromPhoneNumber dan menampilkan hasilnya pada peta.

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

Mendapatkan Place Details

Jika sudah memiliki objek Place atau ID tempat, Anda dapat memanggil Place.fetchFields untuk mendapatkan detail selengkapnya tentang tempat tersebut. Gunakan parameter fields untuk menentukan daftar yang dipisahkan koma yang berisi satu atau beberapa kolom data tempat dalam camel case. Gunakan fields: ['*'] untuk menampilkan semua kolom data (hanya untuk pengujian, tidak direkomendasikan di lingkungan produksi).

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

Kolom data tempat

Kolom akan sesuai dengan hasil Place Details, dan dibagi menjadi tiga kategori penagihan, yaitu Basic, Contact, dan Atmosphere. Kolom Basic ditagih dengan tarif dasar dan tidak dikenai biaya tambahan. Kolom Contact dan Atmosphere ditagih dengan tarif lebih tinggi. Lihat sheet harga untuk mengetahui informasi selengkapnya. Atribusi (html_attributions) selalu ditampilkan dengan setiap panggilan, terlepas dari apakah kolom ini telah diminta atau tidak.

Class Place mendukung kolom berikut:

Basic Data

Kolom Contact Data

Kolom Atmosphere Data