Kontrol

Pilih platform: Android iOS JavaScript

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:

Searah jarum jam dari kiri atas: Jenis Peta, Layar Penuh, Kamera, Street View, Pintasan keyboard.

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

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 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. Karena itu kontrol layar penuh tidak terlihat di perangkat iOS.
Fitur Kontrol kamera memiliki kontrol zoom dan geser.
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 3D. Kontrol ini muncul secara default dekat bagian kanan bawah peta. Lihat Ringkasan 3D untuk informasi selengkapnya.
Kontrol skala menampilkan elemen skala peta. Kontrol ini dinonaktifkan secara default.
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:

TypeScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});index.ts

JavaScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});index.js

Lihat contoh

Mencoba Contoh

JSFiddle.net

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:

{
  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 kamera terlihat atau tidak, berdasarkan ukuran peta dan setelan kolom cameraControl:

Ukuran peta	`cameraControl`	Terlihat?
Semua	`false`	Tidak
Semua	`true`	Ya
>= 200x200 piksel	`undefined`	Ya
< 200x200 piksel	`undefined`	Tidak

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

TypeScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});index.ts

JavaScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});index.js

Lihat contoh

Mencoba Contoh

JSFiddle.net

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.

TypeScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});index.ts

JavaScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});index.js

Lihat contoh

Mencoba Contoh

JSFiddle.net

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

Memodifikasi Kontrol

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

cameraControl mengaktifkan/menonaktifkan kontrol kamera yang memungkinkan pengguna melakukan zoom dan menggeser peta. Kontrol ini terlihat secara default di semua peta. 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. ItustreetViewControlOptions kolom tersebut juga menentukanStreetViewControlOptions untuk digunakan pada kontrol ini.
rotateControl mengaktifkan/menonaktifkan tampilan kontrol Putar untuk mengontrol orientasi citra 3D. Secara default, keberadaan kontrol ditentukan oleh ada atau tidaknya citra 3D untuk jenis peta tertentu pada tingkat zoom dan lokasi saat ini. Anda dapat mengubah perilaku kontrol dengan mengatur peta tersebut.rotateControlOptions untuk menentukanRotateControlOptions untuk digunakan. Kontrol hanya akan muncul pada peta dasar 3D.
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. ItuscaleControlOptions juga menentukanScaleControlOptions untuk digunakan pada 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. ItufullscreenControlOptions juga menentukanFullscreenControlOptions untuk digunakan pada 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).

Ada dua jenis posisi kendali: warisan dan logis. Penggunaan nilai logis direkomendasikan agar dapat secara otomatis mendukung konteks tata letak kiri-ke-kanan (LTR) dan kanan-ke-kiri (RTL). Lihat panduan referensi.

Tabel berikut menunjukkan posisi kontrol yang didukung dalam konteks LTR dan RTL.

Posisi LTR

Posisi (Konteks LTR)	Konstanta Logis (Direkomendasikan)	Konstanta Lama
Kiri Atas	`BLOCK_START_INLINE_START`	`TOP_LEFT`
Tengah Atas	`BLOCK_START_INLINE_CENTER`	`TOP_CENTER`
Kanan Atas	`BLOCK_START_INLINE_END`	`TOP_RIGHT`
Kiri Atas	`INLINE_START_BLOCK_START`	`LEFT_TOP`
Tengah Kiri	`INLINE_START_BLOCK_CENTER`	`LEFT_CENTER`
Kiri Bawah	`INLINE_START_BLOCK_END`	`LEFT_BOTTOM`
Kanan Atas	`INLINE_END_BLOCK_START`	`RIGHT_TOP`
Tengah Kanan	`INLINE_END_BLOCK_CENTER`	`RIGHT_CENTER`
Kanan Bawah	`INLINE_END_BLOCK_END`	`RIGHT_BOTTOM`
Kiri Bawah	`BLOCK_END_INLINE_START`	`BOTTOM_LEFT`
Tengah Bawah	`BLOCK_END_INLINE_CENTER`	`BOTTOM_CENTER`
Kanan Bawah	`BLOCK_END_INLINE_END`	`BOTTOM_RIGHT`

Posisi RTL

Posisi (Konteks RTL)	Konstanta Logis (Direkomendasikan)	Konstanta Lama
Kanan Atas	`BLOCK_START_INLINE_START`	`TOP_RIGHT`
Tengah Atas	`BLOCK_START_INLINE_CENTER`	`TOP_CENTER`
Kiri Atas	`BLOCK_START_INLINE_END`	`TOP_LEFT`
Kanan Atas	`INLINE_START_BLOCK_START`	`RIGHT_TOP`
Tengah Kanan	`INLINE_START_BLOCK_CENTER`	`RIGHT_CENTER`
Kanan Bawah	`INLINE_START_BLOCK_END`	`RIGHT_BOTTOM`
Kiri Atas	`INLINE_END_BLOCK_START`	`LEFT_TOP`
Tengah Kiri	`INLINE_END_BLOCK_CENTER`	`LEFT_CENTER`
Kiri Bawah	`INLINE_END_BLOCK_END`	`LEFT_BOTTOM`
Kanan Bawah	`BLOCK_END_INLINE_START`	`BOTTOM_RIGHT`
Tengah Bawah	`BLOCK_END_INLINE_CENTER`	`BOTTOM_CENTER`
Kiri Bawah	`BLOCK_END_INLINE_END`	`BOTTOM_LEFT`

Klik label untuk beralih tampilan peta antara mode LTR dan RTL.

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. Tidak ada jaminan bahwa kontrol tidak akan tumpang tindih mengingat tata letak yang rumit, meskipun API akan mencoba mengaturnya secara cerdas.

Contoh berikut menunjukkan peta dasar dengan semua kontrol diaktifkan, di berbagai posisi.

TypeScript

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

JavaScript

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

Lihat contoh

Mencoba Contoh

JSFiddle.net Google Cloud Shell

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.

Gambar 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. Contoh kode berikut menunjukkan cara menambahkan kontrol kustom menggunakan metode HTML deklaratif dan pemrograman.

CSS Deklaratif

Gaya CSS berikut memberikan tampilan yang konsisten dengan kontrol default. Gunakan gaya ini dengan kedua contoh di bawah ini:

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

HTML Deklaratif

Cuplikan kode ini menunjukkan cara membuat kontrol kustom secara deklaratif. Dalam HTML, DIV dengan ID container digunakan untuk memposisikan kontrol; ini disarikan di dalam elemen gmp-map dan tombol ditambahkan ke DIV tersebut. Atribut slot diatur ke control-inline-start-block-start untuk memposisikan kontrol di pojok kiri atas peta.

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

Dalam JavaScript, getElementById() digunakan untuk menemukan DIV dan tombol, sebuah event listener ditambahkan ke tombol, dan tombol tersebut ditambahkan ke DIV.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

JavaScript terprogram

Cuplikan kode ini mendemonstrasikan cara membuat kontrol tombol secara terprogram. Gaya CSS telah didefinisikan di atas.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(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

Gunakan atribut slot untuk memosisikan kontrol kustom, dengan menentukan posisi kontrol yang diperlukan. Untuk mengetahui informasi tentang posisi ini, lihat Pemosisian Kontrol di 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.

Kode berikut membuat kontrol kustom baru (konstruktornya tidak ditampilkan) dan menambahkannya ke peta di posisi BLOCK_START_INLINE_END (kanan atas dalam konteks LTR).

// 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);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

Untuk menetapkan posisi kontrol kustom secara deklaratif, tetapkan atribut slot di HTML:

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

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:

TypeScript

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

JavaScript

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

Lihat contoh

Mencoba Contoh

JSFiddle.net Google Cloud Shell

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.

TypeScript

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

JavaScript

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

Lihat contoh

Mencoba Contoh

JSFiddle.net Google Cloud Shell

Kontrol Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Ringkasan Kontrol

UI Default

Menonaktifkan UI Default

TypeScript

JavaScript

Mencoba Contoh

Menambahkan Kontrol ke Peta

TypeScript

JavaScript

Mencoba Contoh

Opsi Kontrol

TypeScript

JavaScript

Mencoba Contoh

Memodifikasi Kontrol

Pemosisian Kontrol

Posisi LTR

Posisi RTL

TypeScript

JavaScript

Mencoba Contoh

Kontrol Kustom

Gambar Kontrol Kustom

CSS Deklaratif

HTML Deklaratif

JavaScript terprogram

Menangani Peristiwa dari Kontrol Kustom

Membuat Kontrol Kustom Mudah Diakses

Memosisikan Kontrol Kustom

Contoh Kontrol Kustom

TypeScript

JavaScript

Mencoba Contoh

Menambahkan Status ke Kontrol

TypeScript

JavaScript

Mencoba Contoh

Kontrol