Kontrol

Ringkasan Kontrol

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

Peta berikut menampilkan rangkaian kontrol default yang ditampilkan oleh Google Maps JavaScript API:

Tampilkan contoh (control-default.html).

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 Map Type tersedia dalam gaya menu tarik-turun atau tombol horizontal, yang memungkinkan pengguna memilih tipe peta (ROADMAP, SATELLITE, HYBRID, atau TERRAIN). Kontrol ini muncul secara default di sudut kiri atas peta.
• Kontrol Street View berisi ikon Pegman yang bisa diseret ke peta untuk mengaktifkan Street View. Kontrol ini muncul secara default dekat bagian kanan bawah peta.
• Kontrol Rotate menyediakan kombinasi opsi kemiringan tilt dan rotasi untuk peta yang berisi gambar miring. Kontrol ini muncul secara default dekat bagian kanan bawah peta. Lihat citra 45° untuk informasi selengkapnya.
• Kontrol Scale menampilkan elemen skala peta. Kontrol ini dinonaktifkan secara default.
• Kontrol layar penuh menawarkan opsi untuk membuka peta di mode layar penuh. Kontrol ini diaktifkan secara default di perangkat seluler, dan dinonaktifkan secara default di desktop. Catatan: iOS tidak mendukung fitur layar penuh. Karena itu kontrol layar penuh tidak terlihat di perangkat iOS.

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

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

UI Default

Secara default, semua kontrol akan menghilang jika peta terlalu kecil (200x200 px). Anda bisa mengesampingkan perilaku ini dengan menyetel kontrol yang akan terlihat secara eksplisit. Lihat Menambahkan Kontrol ke Peta.

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

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

Menonaktifkan UI Default

Anda mungkin perlu menonaktifkan setelan UI default API sepenuhnya. Caranya, setel properti disableDefaultUI peta (dalam objek MapOptions) ke true. Properti ini menonaktifkan perilaku UI otomatis dari Google Maps JavaScript API.

Kode berikut menonaktifkan UI default sepenuhnya:

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

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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

Tampilkan contoh (control-disableUI.html).

Menambahkan Kontrol ke Peta.

Anda mungkin perlu menyesuaikan antarmuka dengan menghilangkan, 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 pada peta secara default sementara yang lain tidak akan muncul kecuali Anda secara khusus memintanya. Menambah atau menghilangkan kontrol dari peta ditetapkan dalam bidang objek MapOptions berikut, yang bisa Anda setel ke true untuk membuatnya terlihat atau disetel 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 bisa mengesampingkan perilaku ini dengan menyetel kontrol yang akan terlihat secara eksplisit. Misalnya, tabel berikut menampilkan apakah kontrol zoom terlihat atau tidak, berdasarkan ukuran peta dan setelan bidang zoomControl:

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

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

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

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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

Tampilkan contoh (control-simple.html).

Opsi Kontrol

Beberapa kontrol bisa dikonfigurasi, sehingga memungkinkan Anda mengubah perilakunya atau penampilannya. Kontrol Map Type, misalnya, bisa muncul sebagai baris horizontal atau menu tarik-turun.

Kontrol ini dimodifikasi dengan mengubah bidang opsi kontrol yang sesuai dalam objek MapOptions saat pembuatan peta.

Misalnya, opsi untuk mengubah kontrol Map Type ditunjukkan dalam bidang mapTypeControlOptions. Kontrol Map Type mungkin muncul dalam salah satu opsi style berikut:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR menampilkan larik kontrol sebagai tombol pada baris horizontal seperti ditampilkan dalam Google Maps.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU menampilkan tombol kontrol tunggal yang memungkinkan Anda memilih tipe peta melalui menu tarik-turun.
• google.maps.MapTypeControlStyle.DEFAULT menampilkan perilaku default, yang bergantung pada ukuran layar dan mungkin berubah dalam API versi mendatang.

Perhatikan, jika memodifikasi opsi kontrol, Anda sebaiknya secara eksplisit mengaktifkan kontrol serta menyetel nilai MapOptions ke true. Misalnya, untuk menyetel kontrol Map Type agar menampilkan gaya DROPDOWN_MENU, gunakan kode berikut dalam objek MapOptions:

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

Contoh berikut memperagakan 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() {
  var 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']
    }
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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

function initMap() {
  var 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']
    }
  });
}

Tampilkan contoh (control-options.html)

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

Memodifikasi Kontrol

Anda menetapkan penyajian kontrol saat membuat peta melalui bidang dalam objek MapOptions peta. Bidang-bidang ini ditunjukkan di bawah ini:

• zoomControl mengaktifkan/menonaktifkan kontrol Zoom. Secara default, kontrol ini terlihat dan muncul dekat bagian kanan bawah peta. Bidang zoomControlOptions juga menetapkan ZoomControlOptions yang akan digunakan untuk kontrol ini.
• mapTypeControl mengaktifkan/menonaktifkan kontrol Map Type yang memungkinkan pengguna beralih antar tipe peta (seperti Peta dan Satelit). Secara default, kontrol ini terlihat dan muncul di sudut kiri atas peta. Bidang mapTypeControlOptions juga menetapkan 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. Bidang streetViewControlOptions juga menetapkan StreetViewControlOptions yang akan digunakan untuk kontrol ini.
• rotateControl mengaktifkan/menonaktifkan penampilan kontrol Rotate untuk mengontrol orientasi citra 45°. Secara default, kehadiran kontrol ditentukan oleh ada-tidaknya citra 45° untuk tipe peta yang diberikan pada perbesaran dan lokasi saat ini. Anda bisa mengubah perilaku kontrol dengan menyetel rotateControlOptions peta untuk menetapkan RotateControlOptions yang akan digunakan. Anda tidak bisa membuat kontrol muncul jika tidak ada citra 45° saat ini.
• scaleControl mengaktifkan/menonaktifkan kontrol Scale yang menyediakan skala peta sederhana. Secara default, kontrol ini tidak terlihat. Bila diaktifkan, kontrol ini akan selalu muncul di sudut kanan bawah peta. scaleControlOptions juga menetapkan ScaleControlOptions yang akan digunakan untuk kontrol ini.
• fullscreenControl mengaktifkan/menonaktifkan kontrol yang membuka peta dalam mode layar penuh. Secara default, kontrol ini terlihat di perangkat seluler dan tidak terlihat di desktop. Bila diaktifkan, kontrol akan muncul dekat bagian kanan atas peta. fullscreenControlOptions juga menetapkan FullscreenControlControlOptions 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 (tipe ControlPosition) yang menunjukkan posisi untuk menempatkan kontrol pada peta. Pemosisian kontrol ini tidak mutlak. Sebaliknya, API akan menata letak kontrol secara cerdas dengan "mengalirkan"nya di sekitar elemen peta yang sudah ada, atau kontrol lainnya, dalam batas-batas yang diberikan (misalnya ukuran peta).

Catatan: Tidak ada jaminan bahwa kontrol tidak akan tumpang tindih saat menggunakan layout yang rumit, meskipun API akan mencoba mengaturnya dengan cerdas.

Posisi kontrol berikut ini telah didukung:

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

Tampilkan contoh (control-positioning-labels.html).

Perhatikan, posisi ini mungkin berimpitan dengan elemen UI yang penempatannya tidak bisa 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() {
  var 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
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var 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
  });
}

Tampilkan contoh (control-positioning.html).

Kontrol Khusus

Selain memodifikasi gaya dan posisi kontrol API yang ada, Anda bisa membuat kontrol sendiri untuk menangani interaksi dengan pengguna. Kontrol adalah widget stasioner yang mengambang di atas peta pada posisi mutlak, berlawanan dengan overlay, yang bergerak bersama dengan peta di bawahnya. Yang lebih mendasar, kontrol cuma sebuah elemen <div> yang memiliki posisi mutlak pada peta, menampilkan beberapa UI kepada pengguna, dan menangani interaksi baik dengan pengguna maupun peta, biasanya melalui event handler.

Untuk membuat kontrol khusus sendiri, diperlukan beberapa aturan. Akan tetapi, panduan berikut bisa berfungsi sebagai praktik terbaik:

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

Setiap persoalan ini dibahas di bawah.

Menggambar Kontrol Khusus

Terserah Anda bagaimana menggambar kontrol tersebut. Biasanya, kami menyarankan agar Anda menempatkan semua penyajian kontrol dalam elemen <div> tunggal sehingga Anda bisa memanipulasi 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 menampilkan cara pembuatan kontrol sederhana dari <div>, <div> untuk menyimpan garis luar tombol, dan <div> lainnya untuk menyimpan bagian dalam tombol.

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);

Menangani Kejadian dari Kontrol Khusus

Agar bisa berguna, kontrol itu harus benar-benar melakukan sesuatu. Apa yang dilakukan kontrol, itu terserah Anda. Kontrol mungkin merespons masukan pengguna atau perubahan status Map.

Untuk merespons masukan pengguna, Google Maps JavaScript API menyediakan metode penanganan kejadian lintas-browser addDomListener() yang menangani sebagian besar kejadian DOM yang didukung browser. Cuplikan kode berikut menambahkan listener untuk kejadian 'click' browser. Perhatikan, kejadian ini diterima dari DOM, bukan dari peta.

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

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

Memosisikan Kontrol Khusus

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

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

API menempatkan kontrol di setiap posisi sesuai urutan properti index; kontrol dengan indeks yang lebih rendah ditempatkan lebih dulu. Misalnya, dua kontrol khusus di posisi BOTTOM_RIGHT akan ditata letaknya sesuai dengan urutan indeks ini, dengan nilai indeks yang lebih rendah didahulukan. Secara default, semua kontrol khusus ditempatkan setelah menempatkan kontrol default API. Anda bisa mengesampingkan perilaku ini dengan menyetel properti index kontrol tersebut ke nilai negatif. Kontrol khusus tidak bisa ditempatkan di sebelah kiri logo atau sebelah kanan hak cipta.

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

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

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// 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_RIGHT].push(controlDiv);

Contoh Kontrol Khusus

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

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

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

}

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.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

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

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

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

}

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.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

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

Tampilkan contoh (control-custom.html).

Menambahkan Status ke Kontrol

Kontrol juga bisa menyimpan status. Contoh berikut ini serupa dengan yang ditampilkan sebelumnya, namun kontrol berisi tombol "Set Home" tambahan yang menyetel kontrol untuk menunjukkan lokasi rumah yang baru. Kami melakukannya dengan membuat sebuah properti home_ dalam kontrol untuk menyimpan kondisi ini dan memberikan getter dan setter untuk status tersebut.

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var 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
  var 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', function() {
    var currentCenter = control.getCenter();
    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', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

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.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#goCenterUI, #setCenterUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  float: left;
  margin-bottom: 22px;
  text-align: center;
}
#goCenterText, #setCenterText {
  color: rgb(25,25,25);
  font-family: Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
#setCenterUI {
  margin-left: 12px;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var 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
  var 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', function() {
    var currentCenter = control.getCenter();
    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', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

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.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Tampilkan contoh (control-custom-state.html).