Kontrol Peta Google

Peta Google - Kontrol default

Ketika menampilkan peta Google standar, ia menyediakan set kontrol default:

• Perbesar (Zoom) - Menampilkan tali skala atau tombol "+/-" untuk mengatur tingkat perbesaran peta
• Guling (Pan) - Menampilkan kontrol guling untuk menggulingkan peta
• Tipe Peta (MapType) - Memungkinkan pengguna berpindah antara tipe peta (peta jalur dan peta satelit)
• Tampilan Jalan (Street View) - Menampilkan ikon pegman jalan, dapat digerakkan ke peta untuk mengaktifkan tampilan jalan

Peta Google - Lebih banyak kontrol

Selain kontrol default, Peta Google juga menyediakan:

• Skala (Scale) - Menampilkan elemen skala peta
• Putar (Rotate) - Menampilkan ikon lingkaran kecil, memungkinkan Anda memutar peta
• Peta Ringkasan (Overview Map) - Menampilkan peta ringkasan, merefleksikan area yang luas saat ini dari viewport peta

Anda dapat menentukan kontrol yang akan muncul saat membuat peta (dalam MapOptions) atau mengubah opsi peta melalui pemanggilan setOptions().

Peta Google - Nonaktifkan kontrol default

Anda mungkin ingin menonaktifkan kontrol default.

Untuk hal ini, atur atribut disableDefaultUI peta (dalam objek opsi peta) ke true:

contoh

var mapOptions {disableDefaultUI: true}

Peta Google - Buka semua kontrol

Beberapa kontrol akan muncul secara default di peta; sedangkan yang lainnya tidak akan muncul kecuali Anda menyetelnya.

Silakan tentukan kontrol yang ditambahkan atau dihapus dari peta dalam objek opsi peta.

menyetel kontrol ke true dapat memperlihatkannya - menyetel kontrol ke false dapat menyembunyikannya.

contoh ini membuka semua kontrol:

contoh

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google Maps - Mengubah Kontrol

Beberapa kontrol peta dapat diatur.

Kontrol dapat diubah melalui field opsi kontrol.

Contoh, di dalam field zoomControlOptions menentukan opsi yang digunakan untuk mengubah kontrol Zoom. Field zoomControlOptions dapat mengandung:

• google.maps.ZoomControlStyle.SMALL - Menampilkan kontrol perbesaran mini (hanya tombol + dan -)
• google.maps.ZoomControlStyle.LARGE - Menampilkan kontrol tangga perbesaran standar
• google.maps.ZoomControlStyle.DEFAULT - Memilih kontrol perbesaran terbaik berdasarkan perangkat dan ukuran peta

contoh

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}

Perhatian: Jika ingin mengubah kontrol, silakan aktifkan kontrol tersebut (atur ke true).

Kontrol yang dapat diatur lainnya adalah kontrol MapType.

Field mapTypeControlOptions menentukan opsi yang digunakan untuk mengubah kontrol. Field mapTypeControlOptions dapat mengandung:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR - Menampilkan tombol untuk setiap tipe peta
• google.maps.MapTypeControlStyle.DROPDOWN_MENU - Memilih tipe peta melalui menu turun
• google.maps.MapTypeControlStyle.DEFAULT - Menampilkan tindakan 'default' (tergantung ukuran layar)

contoh

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

Anda juga dapat menggunakan properti ControlPosition untuk menempatkan kontrol:

contoh

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