Memulai

Ikuti langkah-langkah berikut untuk menambahkan Library Konteks Lokal ke project Anda, menginisialisasi, dan mengonfigurasi tampilan peta Konteks Lokal.

Mengaktifkan API dan SDK yang diperlukan

Untuk menggunakan Library Konteks Lokal, Anda harus mengaktifkan Maps JavaScript API dan Places API. Untuk melakukannya, ikuti petunjuk untuk Mengaktifkan satu atau beberapa API atau SDK. Perhatikan bahwa kedua API ini harus diaktifkan di project yang sama di Konsol Google Cloud.

Memuat Library Konteks Lokal

Untuk memuat Library Konteks Lokal, muatkan Maps JavaScript API seperti biasa, dan sertakan parameter berikut:

  • libraries=localContext memuat Library Konteks Lokal.
  • v=beta diperlukan untuk menggunakan rilis ini.
  • key berisi kunci API Anda.
  • callback mengeksekusi fungsi initMap().

Contoh berikut menunjukkan tag skrip dengan semua opsi yang disebutkan di atas:

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

Membuat tampilan peta Konteks Lokal yang baru

Untuk menambahkan Library Konteks Lokal ke halaman web, pertama-tama buat instance LocalContextMapView, dan tetapkan properti yang diinginkan:

  • element - Elemen div tempat peta akan ditampilkan (dalam hal ini bernama "peta").
  • placeTypePreferences - jenis tempat yang harus ditampilkan oleh Library Konteks Lokal (maksimal 10).
  • maxPlaceCount - Jumlah maksimum tempat yang akan ditampilkan (1 - 24).
  • locationRestriction (Opsional) - Membatasi penelusuran tempat ke lokasi tertentu. Default-nya adalah area pandang peta.

Setelah memiliki instance LocalContextMapView, Anda dapat menetapkan Opsi Peta di instance Map bagian dalam. Peta yang terdapat dalam LocalContextMapView mendukung semua opsi peta yang sama seperti Peta Maps JavaScript API standar. Contoh berikut menunjukkan pembuatan instance LocalContextMapView baru, dan menetapkan beberapa opsi di Map dalam:

TypeScript

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

window.initMap = initMap;
index.js

Menunda pemuatan data Konteks Lokal

Anda dapat menunda pemuatan data Konteks Lokal pada waktu inisialisasi, dengan menetapkan opsi LocalContextMapView maxPlaceCount ke 0. Hal ini berguna ketika Anda ingin menunggu hingga pengguna siap melihat data. Jika sudah siap memuat data Konteks Lokal, tetapkan maxPlaceCount ke nilai 1 atau lebih. Contoh berikut menunjukkan inisialisasi peta tanpa memuat data Konteks Lokal, lalu menetapkan maxPlaceCount untuk memuat data:

// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

Tombol yang menampilkan UI Konteks Lokal

Anda dapat mengalihkan elemen antarmuka pengguna Konteks Lokal dengan menetapkan opsi LocalContextMapView maxPlaceCount ke 0. Untuk menampilkan antarmuka pengguna Konteks Lokal lagi, tetapkan maxPlaceCount ke nilai 1 atau lebih.

Menetapkan dimensi peta minimum

Library Konteks Lokal secara responsif mengubah tampilan berdasarkan ukuran LocalContextMapView yang dirender. Dimensi minimum yang didukung untuk LocalContextMapView adalah:

  • 300 x 480 piksel (potret)
  • 480 x 380 piksel (lanskap)

Saat elemen pemuat untuk LocalContextMapView berada di bawah dimensi minimum yang didukung, elemen Library Konteks Lokal, termasuk pemilih tempat dan lokasi menarik, tidak akan terlihat. Tingkat zoom browser memengaruhi dimensi minimum yang didukung. Misalnya, jika jendela browser di-zoom hingga 200%, dimensi minimum yang didukung adalah 600x960 (potret) dan 960x760 (lanskap).

Rekomendasi CSS

Class CSS di DOM Library Konteks Lokal bukan bagian dari API publik, dan penataan gaya, modifikasi, atau pemilihan elemen dalam DOM Library Konteks Lokal tidak didukung. Kami sangat menyarankan pedoman berikut untuk menghindari konflik gaya DOM, dan memastikan tampilan peta Library Konteks Lokal ditampilkan dengan benar:

  • Jangan gunakan class CSS Library Konteks Lokal, karena class tersebut dapat berubah tanpa pemberitahuan.
  • Jangan menata gaya, memodifikasi, atau memilih elemen dalam DOM Library Konteks Lokal.

Jika Anda menggunakan framework CSS yang membuat modifikasi tersebut, Anda mungkin dapat mengatasi konflik penataan gaya.

Misalnya, jika Anda ingin mengubah keseluruhan halaman box-sizing menjadi border-box:

  • Gunakan penggantian box-sizing yang menetapkan elemen <html> ke border-box.
  • Gunakan box-sizing: initial untuk elemen yang berisi tampilan peta Library Konteks Lokal.
  • Gunakan box-sizing: inherit untuk semua elemen lainnya.

Cara ini akan memastikan DOM Library Konteks Lokal mereset box-sizing ke default standar dengan pemilih kekhususan rendah.

Tampilannya akan terlihat seperti berikut dalam kode:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.container-for-google-maps {
  box-sizing: initial;
}