Menggunakan opsi gestureHandling di objek MapOptions, Anda bisa mengontrol perilaku penggeseran dan pengguliran peta saat ditampilkan di perangkat seluler.
Contoh
Contoh berikut menggunakan penanganan isyarat cooperative. Lihat demo di perangkat seluler untuk melihat cara kerja kode.
/**
* This sample sets the gesture handling mode to 'cooperative',
* which means that on a mobile device, the user must swipe with one
* finger to scroll the page and two fingers to pan the map.
*/
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
<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>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Cooperative Gesture Handling</title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
/**
* This sample sets the gesture handling mode to 'cooperative',
* which means that on a mobile device, the user must swipe with one
* finger to scroll the page and two fingers to pan the map.
*/
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Penanganan isyarat
Di web seluler, pengguna bisa merasa terganggu saat menggesek layar dan ingin menggulir laman, tetapi yang terjadi adalah menggeser peta.
Google Maps JavaScript API menyediakan opsi gestureHandling di objek MapOptions yang bisa Anda gunakan untuk mengoptimalkan pengalaman pengguna Anda saat berinteraksi dengan peta. Nilai yang tersedia adalah:
greedy: Peta selalu digeser (ke atas atau bawah, kiri atau kanan) saat pengguna menggesek (menyeret) di layar. Dengan kata lain, gesekan satu jari atau dua jari bisa menyebabkan peta bergeser.cooperative: Pengguna harus menggesek dengan satu jari untuk menggulir laman dan dua jari untuk menggeser peta. Jika pengguna menggesek peta dengan satu jari, sebuah overlay muncul di peta dengan petunjuk yang memberi tahu pengguna agar menggunakan dua jari untuk memindahkan peta. Tampilkan contoh di atas di perangkat seluler untuk melihat cara kerja mode cooperative.none: Peta tidak bisa digeser atau dicubit.auto(default): Perilaku bisa berupacooperativeataugreedy, tergantung apakah laman bisa digulir atau tidak. Lebih detailnya: jika opsi adalahauto, API memilih perilaku berikut:cooperative, jika isi laman lebih besar dari jendela atau jika API tidak bisa menentukan ukuran laman (misalnya, jika laman berada dalam iframe).greedy, jika isi laman tidak lebih besar dari jendela dan kemungkinan besar pengguna tidak perlu menggulir.
Kontrol layar penuh terlihat secara default pada perangkat seluler, sehingga pengguna bisa dengan mudah memperbesar peta. Jika peta berada dalam mode layar penuh, pengguna bisa menggeser peta menggunakan satu atau dua jari. Catatan: iOS tidak mendukung fitur layar penuh. Karena itu kontrol layar penuh tidak terlihat di perangkat iOS.
Kejadian
API memicu kejadian berikut, di antara yang lain, saat pengguna menggulir (menyeret) peta:
drag: Terus-menerus dipicu saat pengguna menyeret peta.dragstart: Dipicu saat pengguna mulai menyeret peta.dragend: Dipicu saat pengguna berhenti menyeret peta.
Lihat panduan tentang kejadian dan referensi untuk informasi selengkapnya.
Larangan dan batasan
Larangan berikut berlaku pada perilaku yang diaktifkan dalam opsi gestureHandling:
- Hanya perangkat yang sensitif terhadap sentuhan: Opsi
gestureHandlinghanya berlaku jika pengguna menampilkan laman pada perangkat yang mendukung antarmuka sentuh. - Hanya kejadian sentuh: Opsi
gestureHandlingtidak berlaku untuk kejadian mouse atau pena. - Bukan untuk peta yang dimasuki: Opsi
gestureHandlingtidak berlaku untuk peta dengan proses masuk diaktifkan. - Bukan untuk Street View: Opsi
gestureHandlingtidak berlaku untuk layanan Street View.
Butuh bantuan? Kunjungi