Tugas Coba 25-27
Tugas Coba 25-27
Untuk memodifikasi gaya dan posisi kontrol API yang ada, dapat digunakan untuk
membuat kontrol sendiri dan menangani interaksi dengan pengguna. Control adalah widget
stasioner yang mengapung di atas peta pada posisi absolut, sebagai lawan overlay, yang bergerak
dengan peta yang mendasarinya. Lebih mendasar lagi, control hanyalah sebuah elemen <div>
yang memiliki posisi absolut pada peta, menampilkan beberapa UI kepada pengguna, dan
menangani interaksi dengan baik pengguna atau peta, biasanya melalui sebuah event handler.
Untuk membuat control kustom sendiri, beberapa "aturan" yang diperlukan. Namun,
panduan berikut dapat bertindak sebagai praktik terbaik:
Tentukan CSS yang tepat untuk elemen kontrol) untuk menampilkan.
Menangani interaksi dengan pengguna atau peta melalui event handler baik untuk peta
perubahan properti atau peristiwa pengguna (misalnya 'klik' peristiwa).
Buat elemen <div> untuk memegang kontrol dan menambahkan elemen ini ke Map itu
kontrol properti.
Masing-masing masalah ini dibahas di bawah.
1.Menggambar Custom Controls
Merancang kontrol yang menarik membutuhkan beberapa pengetahuan tentang CSS dan
struktur DOM. Kode-kode berikut menunjukkan bagaimana kontrol sederhana dibuat dari <div>
mengandung, <div> untuk menahan tombol outline, dan <div> lain untuk memegang interior
tombol.
var controlDiv = document.createElement('div');
Berfungsi untuk mengatur gaya CSS, untuk DIV berisi kontrol Mengatur padding untuk 5px
akan mengimbangi kontrol dari tepi peta.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
Berfungsi untuk mengatur agar peta hanya berpusat di satu area (surabaya).
Kode-kode berikut membuat kontrol kustom baru (konstruktor tidak ditampilkan) dan
menambahkannya ke peta dalam posisi TOP_RIGHT.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);
Gambar coba 25
google.maps.event.addDomListener(goHomeUI,
'click',
function()
{
var currentHome = control.getHome();
map.setCenter(currentHome);
});
Berfungsi untuk mengatur peta untuk properti rumah kontrol saat ini.
google.maps.event.addDomListener(setHomeUI, 'click', function()
{
var newHome = map.getCenter();
control.setHome(newHome);
});
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
</script>
</head>
<body onLoad="pasangPeta();">
<table border=1>
<tr>
<td>
<div id="peta" style="height:500px;width:900px;">
</div>
</td>
</tr>
</table>
</body>
</html>
Gambar 26
Geser Lokasi peta/rumah pada area lain ,lalu klik Set Home secara otomatis lokasi awal/rumah
akan berpindah pada lokasi baru.
Google baru saja mengumumkan fitur baru di perusahaan Maps API yang
memungkinkan pengembang mengendalikan peta citra yang mendasarinya. Peta
Styling memberi kontrol warna dan apakah jenis fitur yang disertakan dalam
peta. Sebelumnya tingkat peta styling hanya tersedia dengan membayar untuk
data peta yang mendasari, atau menggunakan Open Street Map proyek yang
CloudMade
didasarkan
pada.
Karena Google Maps V3 dimasukkan ke dalam produksi, fitur baru ini tidak
tersedia di versi sebelumnya peta. Peta tertanam di atas membuat peta warna
biru jenuh dan menghilangkan titik label bunga dan jalan-jalan kecil. Klik
antara "Peta" dan "Edited" jenis untuk melihat perbedaan di Manhattan. Google
memiliki halaman contoh dengan delapan gaya lain, termasuk satu agak
mengingatkan
CloudMade
Midnight
Commander.
Salah satu perbedaan antara layanan baru Google dan CloudMade adalah bahwa
Google memungkinkan mengubah peta Anda dengan kode JavaScript pada saat peta
tersebut akan ditambahkan ke halaman. CloudMade mengharuskan Anda menyimpan
gaya dan referensi ID dari kode Anda. Di sisi lain, editor gaya CloudMade
menyediakan antarmuka point-and-klik untuk semua fitur peta, dengan gaya yang
berbeda untuk tingkat zoom tertentu. Google tidak cukup disesuaikan, tetapi
tidak
memiliki
wizard
gaya
auto-update.
google developmen telah populer dengan pengembang yang tidak ingin peta yang
terlihat seperti semua yang lain. Sekarang kita akan melihat apakah bisa gaya
pemetaan API terkemuka akan membawa mereka ke Google Maps yang tidak terlihat
seperti Google Maps. Meskipun, pengguna mungkin tidak akan tertipu. Meskipun
peta Anda tidak harus terlihat seperti Google Maps lagi, mereka masih membawa
logo Google.
pertama load dahulu library google apinya dengan cara
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
new
google.maps.StyledMapType(pilihan,
map.mapTypes.set(tipe_peta, customMapType);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>