Kontrol

Ringkasan Kontrol

Peta yang ditampilkan melalui Maps JavaScript API berisi elemen UI agar pengguna dapat berinteraksi dengan peta. Elemen ini dikenal sebagai kontrol dan Anda dapat menyertakan variasi kontrol ini di aplikasi Anda. Atau, Anda bisa saja tidak melakukan apa pun dan membiarkan Maps JavaScript API menangani semua perilaku kontrol.

Peta berikut menunjukkan kumpulan kontrol default yang ditampilkan oleh Maps JavaScript API:

Di bawah ini adalah daftar rangkaian kontrol lengkap yang bisa Anda gunakan di peta:

• Kontrol zoom menampilkan tombol "+" dan "-" untuk mengubah tingkat zoom peta. Kontrol ini muncul secara default di sudut kanan bawah peta.
• Kontrol kamera menampilkan kontrol zoom dan geser, dan ditampilkan secara default sebagai pengganti kontrol zoom saat menggunakan saluran beta.
• Kontrol Jenis Peta tersedia dalam gaya dropdown atau panel tombol horizontal, yang memungkinkan pengguna memilih jenis peta (ROADMAP, SATELLITE, HYBRID, atau TERRAIN). Kontrol ini muncul secara default di sudut kiri atas peta.
• Kontrol Street View berisi ikon Pegman yang dapat ditarik ke peta untuk mengaktifkan Street View. Kontrol ini muncul secara default dekat bagian kanan bawah peta.
• Kontrol rotasi memberikan kombinasi opsi kemiringan dan rotasi untuk peta yang berisi gambar miring. Kontrol ini muncul secara default dekat bagian kanan bawah peta. Lihat gambar 45° untuk informasi selengkapnya.
• Kontrol skala menampilkan elemen skala peta. Kontrol ini dinonaktifkan secara default.
• Kontrol layar penuh menawarkan opsi untuk membuka peta dalam mode layar penuh. Kontrol ini diaktifkan secara default di perangkat desktop dan seluler. Catatan: iOS tidak mendukung fitur layar penuh. Oleh karena itu, kontrol layar penuh tidak terlihat di perangkat iOS.
• Kontrol pintasan keyboard menampilkan daftar pintasan keyboard untuk berinteraksi dengan peta.

Anda tidak bisa mengakses atau memodifikasi kontrol peta ini secara langsung. Sebagai gantinya, Anda dapat mengubah kolom MapOptions peta yang memengaruhi visibilitas dan penyajian kontrol. Anda dapat menyesuaikan penyajian kontrol setelah membuat instance peta (dengan MapOptions yang sesuai) atau memodifikasi peta secara dinamis dengan memanggil setOptions() untuk mengubah opsi peta.

Tidak semua kontrol diaktifkan secara default. Untuk mempelajari perilaku UI default (dan cara memodifikasi perilaku tersebut), lihat UI Default di bawah.

UI Default

Secara default, semua kontrol akan menghilang jika peta terlalu kecil (200x200 px). Anda dapat mengganti perilaku ini dengan menetapkan kontrol agar terlihat secara eksplisit. Lihat Menambahkan Kontrol ke Peta.

Perilaku dan tampilan kontrol ini sama di perangkat seluler dan desktop, kecuali untuk kontrol layar penuh (lihat perilaku yang dijelaskan dalam daftar kontrol).

Selain itu, penanganan keyboard sudah aktif secara default pada semua perangkat.

Menonaktifkan UI Default

Anda mungkin ingin menonaktifkan tombol UI default API sepenuhnya. Untuk melakukannya, tetapkan properti disableDefaultUI peta (dalam objek MapOptions) ke true. Properti ini menonaktifkan semua tombol kontrol UI dari Maps JavaScript API. Namun, penonaktifan ini tidak memengaruhi gestur mouse atau pintasan keyboard pada peta dasar, yang masing-masing dikontrol oleh properti gestureHandling dan keyboardShortcuts.

Kode berikut menonaktifkan tombol UI:

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js

Menambahkan Kontrol ke Peta

Anda dapat menyesuaikan antarmuka dengan menghapus, menambah, atau memodifikasi perilaku UI atau kontrol dan memastikan pembaruan selanjutnya tidak mengubah perilaku ini. Jika Anda hanya ingin menambah atau memodifikasi perilaku yang ada, Anda perlu memastikan kontrol secara eksplisit ditambahkan ke aplikasi.

Beberapa kontrol muncul di peta secara default, sementara yang lain tidak akan muncul kecuali jika Anda secara khusus memintanya. Penambahan atau penghapusan kontrol dari peta ditentukan dalam kolom objek MapOptions berikut, yang Anda tetapkan ke true agar terlihat atau tetapkan ke false untuk menyembunyikannya:

{
  zoomControl: boolean,
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

Secara default, semua kontrol akan menghilang jika peta lebih kecil dari 200x200 px. Anda dapat mengganti perilaku ini dengan menetapkan kontrol agar terlihat secara eksplisit. Misalnya, tabel berikut menunjukkan apakah kontrol zoom terlihat atau tidak, berdasarkan ukuran peta dan setelan kolom zoomControl:

Contoh berikut menetapkan peta untuk menyembunyikan kontrol Zoom dan menampilkan kontrol Skala. Perhatikan bahwa kami tidak secara eksplisit menonaktifkan UI default, sehingga modifikasi ini merupakan tambahan bagi perilaku UI default.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
index.js

Opsi Kontrol

Beberapa kontrol dapat dikonfigurasi, sehingga memungkinkan Anda mengubah perilakunya atau penampilannya. Misalnya, kontrol Map Type, dapat muncul sebagai panel horizontal atau menu drop-down.

Kontrol ini dimodifikasi dengan mengubah kolom options kontrol yang sesuai dalam objek MapOptions setelah pembuatan peta.

Misalnya, opsi untuk mengubah kontrol Map Type ditunjukkan dalam kolom mapTypeControlOptions. Kontrol Map Type dapat muncul di salah satu opsi style berikut:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR menampilkan array kontrol sebagai tombol pada panel horizontal seperti yang ditampilkan di Google Maps.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU menampilkan kontrol tombol tunggal yang memungkinkan Anda memilih jenis peta menggunakan menu drop-down.
• google.maps.MapTypeControlStyle.DEFAULT menampilkan perilaku default, yang bergantung pada ukuran layar dan dapat berubah dalam versi API mendatang.

Perhatikan bahwa jika Anda mengubah salah satu opsi kontrol, Anda juga harus mengaktifkan kontrol secara eksplisit dengan menetapkan nilai MapOptions yang sesuai ke true. Misalnya, untuk menetapkan kontrol Map Type guna menampilkan gaya DROPDOWN_MENU, gunakan kode berikut dalam objek MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

Contoh berikut menunjukkan cara mengubah posisi default dan gaya kontrol.

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

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

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;
index.js

Kontrol biasanya dikonfigurasi saat pembuatan peta. Namun, Anda dapat mengubah penyajian kontrol secara dinamis dengan memanggil metode setOptions() Map, yang meneruskan opsi kontrol baru.

Mengubah Kontrol

Anda menentukan penyajian kontrol saat membuat peta melalui kolom dalam objek MapOptions peta. Kolom ini ditunjukkan di bawah ini:

• zoomControl mengaktifkan/menonaktifkan kontrol Zoom. Secara default, kontrol ini terlihat dan muncul dekat bagian kanan bawah peta. Kolom zoomControlOptions juga menentukan ZoomControlOptions yang akan digunakan untuk kontrol ini.
• cameraControl mengaktifkan/menonaktifkan kontrol kamera. Kontrol ini terlihat secara default di peta yang menggunakan saluran beta. Kolom cameraControlOptions juga menentukan CameraControlOptions yang akan digunakan untuk kontrol ini.
• mapTypeControl mengaktifkan/menonaktifkan kontrol Jenis Peta yang memungkinkan pengguna beralih di antara jenis peta (seperti Peta dan Satelit). Secara default, kontrol ini terlihat dan muncul di sudut kiri atas peta. Kolom mapTypeControlOptions juga menentukan MapTypeControlOptions yang akan digunakan untuk kontrol ini.
• streetViewControl mengaktifkan/menonaktifkan kontrol Pegman yang memungkinkan pengguna mengaktifkan panorama Street View. Secara default, kontrol ini terlihat dan muncul dekat bagian kanan bawah peta. Kolom streetViewControlOptions juga menentukan StreetViewControlOptions yang akan digunakan untuk kontrol ini.
• rotateControl mengaktifkan/menonaktifkan tampilan kontrol Rotate untuk mengontrol orientasi gambar 45°. Secara default, kehadiran kontrol ditentukan oleh ada-tidaknya gambar 45° untuk jenis peta yang diberikan pada perbesaran dan lokasi saat ini. Anda dapat mengubah perilaku kontrol dengan menetapkan rotateControlOptions peta untuk menentukan RotateControlOptions yang akan digunakan. Anda tidak dapat membuat kontrol muncul jika tidak ada gambar 45° yang tersedia.
• scaleControl mengaktifkan/menonaktifkan kontrol Skala yang menyediakan skala peta. Secara default, kontrol ini tidak terlihat. Jika diaktifkan, kontrol ini akan selalu muncul di sudut kanan bawah peta. scaleControlOptions juga menentukan ScaleControlOptions yang akan digunakan untuk kontrol ini.
• fullscreenControl mengaktifkan/menonaktifkan kontrol yang membuka peta dalam mode layar penuh. Secara default, kontrol ini diaktifkan secara default di perangkat desktop dan Android. Jika diaktifkan, kontrol akan muncul dekat bagian kanan atas peta. fullscreenControlOptions juga menentukan FullscreenControlOptions yang akan digunakan untuk kontrol ini.

Perhatikan, Anda bisa menetapkan opsi untuk kontrol yang tadinya dinonaktifkan.

Pemosisian Kontrol

Sebagian besar opsi kontrol berisi properti position (dengan jenis ControlPosition) yang menunjukkan posisi untuk menempatkan kontrol pada peta. Pemosisian kontrol ini tidak mutlak. Sebaliknya, API akan menata letak kontrol secara cerdas dengan menempatkannya di sekitar elemen peta yang sudah ada, atau kontrol lainnya, dalam batasan tertentu (misalnya, ukuran peta).

Catatan: Tidak ada jaminan bahwa kontrol tidak akan tumpang-tindih mengingat tata letaknya yang rumit, meskipun API akan mencoba mengaturnya dengan cerdas.

Posisi kontrol berikut ini telah didukung:

• TOP_CENTER menunjukkan bahwa kontrol akan ditempatkan di sepanjang bagian tengah atas peta.
• TOP_LEFT menunjukkan bahwa kontrol akan ditempatkan di sepanjang bagian kiri atas peta, dengan sub-elemen kontrol "mengalir" ke arah tengah atas.
• TOP_RIGHT menunjukkan bahwa kontrol akan ditempatkan di sepanjang kanan atas peta, dengan sub-elemen kontrol "mengalir" ke arah tengah atas.
• LEFT_TOP menunjukkan bahwa kontrol akan ditempatkan di sepanjang bagian kiri atas peta, tetapi di bawah elemen TOP_LEFT.
• RIGHT_TOP menunjukkan bahwa kontrol akan ditempatkan di sepanjang kanan atas peta, tetapi di bawah elemen TOP_RIGHT.
• LEFT_CENTER menunjukkan bahwa kontrol akan ditempatkan di sepanjang sisi kiri peta, yang dipusatkan di antara posisi TOP_LEFT dan BOTTOM_LEFT.
• RIGHT_CENTER menunjukkan bahwa kontrol akan ditempatkan di sepanjang sisi kanan peta, yang dipusatkan di antara posisi TOP_RIGHT dan BOTTOM_RIGHT.
• LEFT_BOTTOM menunjukkan bahwa kontrol akan ditempatkan di sepanjang bagian kiri bawah peta, tetapi di atas elemen BOTTOM_LEFT.
• RIGHT_BOTTOM menunjukkan bahwa kontrol akan ditempatkan di sepanjang kanan bawah peta, tetapi di atas elemen BOTTOM_RIGHT.
• BOTTOM_CENTER menunjukkan bahwa kontrol akan ditempatkan di sepanjang bagian tengah bawah peta.
• BOTTOM_LEFT menunjukkan bahwa kontrol akan ditempatkan di sepanjang bagian kiri bawah peta, dengan sub-elemen kontrol "mengalir" ke arah tengah bawah.
• BOTTOM_RIGHT menunjukkan bahwa kontrol akan ditempatkan di sepanjang kanan bawah peta, dengan sub-elemen kontrol "mengalir" ke arah tengah bawah.

Perhatikan, posisi ini mungkin berimpitan dengan elemen UI yang penempatannya tidak dapat Anda modifikasi (seperti hak cipta dan logo Google). Dalam hal itu, kontrol akan "mengalir" sesuai dengan logika yang dibuat untuk setiap posisi dan akan muncul sedekat mungkin dengan posisi yang ditunjukkan untuknya.

Contoh berikut menampilkan peta sederhana dengan semua kontrol diaktifkan, dalam berbagai posisi.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
index.js

Kontrol Kustom

Selain memodifikasi gaya dan posisi kontrol API yang ada, Anda dapat membuat kontrol sendiri untuk menangani interaksi dengan pengguna. Kontrol adalah widget stasioner yang mengambang di atas peta pada posisi mutlak, bukan overlay, yang bergerak dengan peta di bawahnya. Yang lebih mendasar, kontrol adalah elemen <div> yang memiliki posisi mutlak pada peta, menampilkan beberapa UI kepada pengguna, dan menangani interaksi dengan pengguna atau peta, biasanya melalui pengendali peristiwa.

Untuk membuat kontrol kustom sendiri, tidak diperlukan banyak aturan. Namun, panduan berikut dapat berfungsi sebagai praktik terbaik:

• Definisikan CSS yang sesuai untuk elemen kontrol yang akan ditampilkan.
• Tangani interaksi dengan pengguna atau peta melalui pengendali peristiwa untuk perubahan properti peta atau peristiwa pengguna (misalnya, peristiwa 'click').
• Buat elemen <div> untuk menyimpan kontrol dan tambahkan elemen ini ke properti controls Map.

Setiap persoalan ini dibahas di bawah.

Menggambar Kontrol Kustom

Terserah Anda bagaimana menggambar kontrol tersebut. Biasanya, kami menyarankan agar Anda menempatkan semua penyajian kontrol dalam elemen <div> tunggal sehingga Anda bisa menjadikan kontrol sebagai satu kesatuan. Kita akan menggunakan pola desain ini dalam contoh yang ditampilkan di bawah ini.

Mendesain kontrol yang menarik memerlukan banyak pengetahuan tentang CSS dan struktur DOM. Kode berikut menunjukkan fungsi untuk membuat elemen tombol yang menggeser peta agar posisi tengahnya ada di Chicago.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

Menangani Peristiwa dari Kontrol Kustom

Agar berguna, kontrol harus benar-benar memiliki fungsi. Fungsi kontrol terserah kepada Anda. Kontrol dapat merespons input pengguna, atau dapat merespons perubahan status Map.

Untuk merespons input pengguna, gunakan addEventListener(), yang menangani peristiwa DOM yang didukung. Cuplikan kode berikut menambahkan pemroses untuk peristiwa 'click' browser. Perhatikan, kejadian ini diterima dari DOM, bukan dari peta.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

Membuat Kontrol Kustom Mudah Diakses

Untuk memastikan bahwa kontrol menerima peristiwa keyboard dan muncul dengan benar kepada pembaca layar:

• Selalu gunakan elemen HTML native untuk tombol, elemen formulir, dan label. Hanya gunakan elemen DIV sebagai container untuk menyimpan kontrol native; jangan pernah menggunakan kembali DIV sebagai elemen UI interaktif.
• Gunakan elemen label, atribut title, atau atribut aria-label jika sesuai, untuk memberikan informasi tentang elemen UI.

Memosisikan Kontrol Kustom

Kontrol kustom diposisikan pada peta dengan menempatkannya pada posisi yang sesuai dalam properti controls objek Map. Properti ini berisi array google.maps.ControlPosition. Anda menambahkan kontrol kustom ke peta dengan menambahkan Node (biasanya <div>) ke ControlPosition yang sesuai. (Untuk informasi tentang posisi ini, lihat Pemosisian Kontroldi atas.)

Setiap ControlPosition menyimpan MVCArray kontrol yang ditampilkan di posisi tersebut. Akibatnya, jika kontrol ditambahkan atau dihapus dari posisi itu, maka API akan memperbarui kontrol tersebut.

API menempatkan kontrol di setiap posisi berdasarkan urutan properti index; kontrol dengan indeks lebih rendah ditempatkan lebih dahulu. Misalnya, dua kontrol kustom di posisi BOTTOM_RIGHT akan diletakkan sesuai urutan indeks ini, dengan nilai indeks yang lebih rendah didahulukan. Secara default, semua kontrol kustom ditempatkan setelah menempatkan kontrol default API. Anda dapat mengganti perilaku ini dengan menetapkan properti index kontrol ke nilai negatif. Kontrol kustom tidak dapat ditempatkan di sebelah kiri logo atau sebelah kanan hak cipta.

Kode berikut membuat kontrol kustom baru (konstruktornya tidak ditampilkan) dan menambahkannya ke peta di posisi TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

Contoh Kontrol Kustom

Kontrol berikut sederhana (meskipun tidak begitu berguna) dan menggabungkan pola-pola yang ditampilkan di atas. Kontrol ini merespons peristiwa 'click' DOM dengan memusatkan peta di lokasi default tertentu:

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

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

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

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

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

Menambahkan Status ke Kontrol

Kontrol juga bisa menyimpan status. Contoh berikut ini serupa dengan yang ditampilkan sebelumnya, tetapi kontrol berisi tombol "Tetapkan Alamat Rumah" tambahan yang menetapkan kontrol untuk menunjukkan lokasi rumah yang baru. Kami melakukannya dengan membuat properti home_ dalam kontrol untuk menyimpan status ini dan memberikan pengambil dan penyetel untuk status tersebut.

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

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

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js