Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Perilaku Gulir dan Geser

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 berupa cooperative atau greedy, tergantung apakah laman bisa digulir atau tidak. Lebih detailnya: jika opsi adalah auto, 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 gestureHandling hanya berlaku jika pengguna menampilkan laman pada perangkat yang mendukung antarmuka sentuh.
  • Hanya kejadian sentuh: Opsi gestureHandling tidak berlaku untuk kejadian mouse atau pena.
  • Bukan untuk peta yang dimasuki: Opsi gestureHandling tidak berlaku untuk peta dengan proses masuk diaktifkan.
  • Bukan untuk Street View: Opsi gestureHandling tidak berlaku untuk layanan Street View.

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.