Kontrol

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.
Pilih platform: Android iOS JavaScript

Ringkasan Kontrol

Peta yang ditampilkan melalui Maps JavaScript API berisi elemen UI untuk memungkinkan interaksi pengguna dengan peta. Elemen ini dikenal sebagai kontrol dan Anda dapat menyertakan variasi kontrol ini di aplikasi Anda. Atau, Anda tidak dapat melakukan apa pun dan biarkan 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 Jenis Peta tersedia dalam gaya panel menu drop-down atau 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 di dekat bagian kanan bawah peta.
  • Kontrol rotasi memberikan kombinasi opsi kemiringan dan rotasi untuk peta yang berisi gambar miring. Kontrol ini muncul secara default di 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 dapat mengakses atau mengubah 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 menyetel kontrol secara eksplisit agar terlihat. 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 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, hal ini tidak memengaruhi gestur mouse atau pintasan keyboard pada peta dasar, yang dikontrol oleh properti gestureHandling dan keyboardShortcuts.

Kode berikut menonaktifkan tombol UI:

TypeScript

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;

JavaScript

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

window.initMap = initMap;
Lihat contoh

Coba Sampel

Menambahkan Kontrol ke Peta.

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

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

{
  zoomControl: 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 menyetel kontrol secara eksplisit agar terlihat. Misalnya, tabel berikut menunjukkan apakah kontrol zoom terlihat atau tidak, berdasarkan ukuran peta dan setelan kolom zoomControl:

Ukuran peta zoomControl Terlihat?
Semua false Tidak
Semua true Ya
>= 200x200px undefined Ya
< 200x200px undefined Tidak

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

TypeScript

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;

JavaScript

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;
Lihat contoh

Coba Sampel

Opsi Kontrol

Beberapa kontrol dapat dikonfigurasi, sehingga Anda dapat mengubah perilakunya atau mengubah tampilannya. Misalnya, kontrol Jenis Peta, dapat muncul sebagai batang 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 Jenis Peta ditunjukkan dalam kolom mapTypeControlOptions. Kontrol Jenis Peta mungkin 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 melalui 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 opsi kontrol apa pun, Anda juga harus mengaktifkan kontrol secara eksplisit dengan menetapkan nilai MapOptions yang sesuai ke true. Misalnya, untuk menetapkan kontrol Jenis Peta 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 dan gaya default kontrol.

TypeScript

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

JavaScript

// 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;
Lihat contoh

Coba Sampel

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

Memodifikasi Kontrol

Anda menentukan presentasi 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 di dekat bagian kanan bawah peta. Kolom zoomControlOptions juga menentukan ZoomControlOptions 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 di dekat bagian kanan bawah peta. Kolom streetViewControlOptions juga menentukan StreetViewControlOptions yang akan digunakan untuk kontrol ini.
  • rotateControl mengaktifkan/menonaktifkan tampilan kontrol Rotasi untuk mengontrol orientasi gambar 45°. Secara default, kehadiran kontrol ditentukan oleh ada tidaknya citra 45° untuk jenis peta tertentu pada zoom 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 saat ini.
  • scaleControl mengaktifkan/menonaktifkan kontrol Skala yang menyediakan skala peta sederhana. Secara default, kontrol ini tidak terlihat. Jika diaktifkan, titik ini akan selalu muncul di pojok 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. Bila 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 lokasi pada peta untuk menempatkan kontrol. Pemosisian kontrol ini tidak mutlak. Sebaliknya, API akan menata letak kontrol secara cerdas dengan mengalirkannya di sekitar elemen peta yang ada, atau kontrol lainnya, dalam batasan yang diberikan (seperti ukuran peta).

Catatan: Tidak ada jaminan bahwa kontrol tidak boleh tumpang tindih mengingat tata letak yang rumit, meskipun API akan berupaya mengaturnya dengan cerdas.

Posisi kontrol berikut ini telah didukung:

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

Perhatikan bahwa posisi ini mungkin bertepatan dengan posisi elemen UI yang penempatannya tidak dapat Anda ubah (seperti hak cipta dan logo Google). Dalam hal ini, kontrol akan mengalir sesuai dengan logika yang tercantum untuk setiap posisi dan muncul sedekat mungkin dengan posisi yang ditunjukkan.

Contoh berikut menampilkan peta sederhana 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;

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;
Lihat contoh

Coba Sampel

Kontrol Khusus

Selain mengubah 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 absolut, bukan overlay, yang bergerak dengan peta di bawahnya. Pada dasarnya, kontrol adalah elemen <div> yang memiliki posisi absolut pada peta, menampilkan beberapa UI kepada pengguna, dan menangani interaksi dengan pengguna atau peta, biasanya melalui pengendali peristiwa.

Untuk membuat kontrol khusus sendiri, diperlukan beberapa aturan. Namun, panduan berikut dapat digunakan 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 Khusus

Terserah Anda bagaimana menggambar kontrol tersebut. Secara umum, sebaiknya tempatkan semua presentasi kontrol Anda dalam satu elemen <div> sehingga Anda dapat memanipulasi kontrol sebagai satu unit. Kita akan menggunakan pola desain ini dalam contoh yang ditampilkan di bawah ini.

Mendesain kontrol yang menarik memerlukan pengetahuan tentang struktur CSS dan DOM. Kode berikut menunjukkan fungsi untuk membuat elemen tombol yang menggeser peta untuk berpusat 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 Kejadian dari Kontrol Khusus

Agar bisa berguna, kontrol itu harus benar-benar melakukan sesuatu. Anda yang menentukan kontrol. Kontrol tersebut 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);
});

Memudahkan Kontrol Kustom

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 penampung untuk menyimpan kontrol native; jangan pernah memodifikasi DIV sebagai elemen UI interaktif.
  • Gunakan elemen label, atribut title, atau atribut aria-label jika sesuai, untuk memberikan informasi tentang elemen UI.

Memosisikan Kontrol Khusus

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 Kontrol di atas.)

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

API menempatkan kontrol di setiap posisi berdasarkan urutan properti index; kontrol dengan indeks yang lebih rendah ditempatkan terlebih dahulu. Misalnya, dua kontrol kustom di posisi BOTTOM_RIGHT akan diletakkan sesuai urutan indeks ini, dengan nilai indeks yang lebih rendah yang diutamakan. 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 boleh ditempatkan di sebelah kiri logo atau di 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 Khusus

Kontrol berikut sederhana (meskipun tidak terlalu berguna) dan menggabungkan 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;

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;
Lihat contoh

Coba Sampel

Menambahkan Status ke Kontrol

Kontrol juga bisa menyimpan status. Contoh berikut mirip dengan yang ditunjukkan sebelumnya, tetapi kontrol berisi tombol "Tetapkan Layar Utama" tambahan yang menyetel kontrol untuk menampilkan lokasi rumah 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("div");

    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("div");

    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;

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("div");

    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("div");

    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;
Lihat contoh

Coba Sampel