Sebuah peta Google - dengan kontrol set default:
Google Maps - The Kontrol default
Ketika menampilkan peta standar Google, ia datang dengan kontrol set default:
- Zoom - menampilkan slider atau "+/-" tombol untuk mengontrol tingkat zoom peta
- Pan - menampilkan kontrol pan untuk panning peta
- Tipemap - memungkinkan beralih pengguna antara jenis peta (roadmap and satellite)
- Street View - menampilkan ikon Pegman yang dapat diseret ke peta untuk mengaktifkan Street View
Google Maps - Lebih Kontrol
Selain kontrol default, Google Maps juga memiliki:
- Skala - menampilkan elemen skala peta
- Putar - menampilkan ikon lingkaran kecil yang memungkinkan Anda untuk memutar peta
- Peta Ikhtisar - menampilkan peta ikhtisar thumbnail mencerminkan viewport peta saat ini dalam area yang lebih luas
Anda dapat menentukan kontrol untuk menunjukkan saat membuat peta (inside MapOptions) atau dengan menelepon setOptions() untuk mengubah opsi peta ini.
Google Maps - Menonaktifkan The Kontrol default
Anda malah mungkin ingin menonaktifkan kontrol default.
Untuk melakukannya, mengatur properti disableDefaultUI Peta ini (dalam Pilihan peta keberatan) untuk benar:
Google Maps - Aktifkan Semua Kontrol
Beberapa kontrol muncul pada peta secara default; sementara yang lain tidak akan muncul kecuali jika Anda mengatur mereka.
Menambahkan atau menghapus kontrol dari peta ditentukan dalam Peta pilihan objek.
Mengatur kontrol untuk benar untuk membuatnya terlihat - mengatur kontrol ke false untuk menyembunyikannya.
Contoh berikut ternyata "on" semua kontrol:
Contoh
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true Cobalah sendiri " Google Maps - Memodifikasi Kontrol
Beberapa kontrol peta yang dapat dikonfigurasi.
Kontrol dapat dimodifikasi dengan menentukan bidang pilihan kontrol.
Misalnya, pilihan untuk memodifikasi kontrol Zoom ditentukan di bidang zoomControlOptions. The zoomControlOptions lapangan mungkin berisi:
- google.maps.ZoomControlStyle.SMALL - menampilkan kontrol mini-zoom (hanya tombol + dan -)
- google.maps.ZoomControlStyle.LARGE - menampilkan standar kontrol zoom slider
- google.maps.ZoomControlStyle.DEFAULT - mengambil kontrol zoom yang terbaik berdasarkan perangkat dan ukuran peta
Contoh
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Cobalah sendiri " Note: Jika Anda mengubah kontrol, selalu memungkinkan kontrol pertama (set it to true) .
kontrol dikonfigurasi lain adalah kontrol tipemap.
Pilihan untuk memodifikasi kontrol yang ditentukan di bidang mapTypeControlOptions. The mapTypeControlOptions lapangan mungkin berisi ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - display satu tombol untuk setiap jenis peta
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - pilih jenis peta melalui menu dropdown
- google.maps.MapTypeControlStyle.DEFAULT - menampilkan "default" perilaku (depends on screen size)
Contoh
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
} Cobalah sendiri " Anda juga dapat memposisikan kontrol, dengan properti ControlPosition:
Contoh
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
} Cobalah sendiri " Google Maps - Custom Controls
Membuat kontrol kustom yang selalu membawa Anda kembali ke London, ketika diklik (if the map is dragged) :
Contoh
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText); Cobalah sendiri "