Membuat Custom Control

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 membuat div untuk memegang control.

controlDiv.style.padding = '5px';

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 CSS dalam membuat Border control.

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 = '<strong>Home</strong>';
controlUI.appendChild(controlText);

Berfungsi untuk mengatur CSS dalam membuat desain interior control.

2.Penanganan dari Custom Controls
Kontrol dapat merespon input pengguna, atau mungkin merespon perubahan di negara
bagian Map itu. Untuk menanggapi input pengguna, Maps API menyediakan cross-browser
penanganan event metode addDomListener () yang menangani sebagian besar didukung
peristiwa DOM browser. Potongan kode-kode berikut menambahkan pendengar untuk 'klik'
event browser, bahwa acara ini diterima dari DOM, bukan dari peta.
var surabaya = new google.maps.LatLng(-7.2742175, 112.719087);
google.maps.event.addDomListener(outer, 'click', function() {
map.setCenter(surabaya)
});

Berfungsi untuk mengatur agar peta hanya berpusat di satu area (surabaya).

3.Kontrol Positioning Kustom

Kontrol kustom diposisikan pada peta dengan menempatkan pada posisi yang tepat
dalam kontrol properti Map objek. Properti ini berisi array google.maps.ControlPosition.
Menambahkan kontrol kustom untuk peta dengan menambahkan Node (biasanya <div>) ke
Kontrol Posisi yang tepat.
Setiap ControlPosition di MVCArray kontrol ditampilkan dalam posisi itu. Akibatnya,
ketika kontrol yang ditambahkan atau dihapus dari posisi, API akan memperbarui kontrol sesuai.
API ini menempatkan kontrol pada setiap posisi atas perintah properti index; kontrol dengan
indeks lebih rendah ditempatkan pertama. Sebagai contoh, dua kontrol kustom pada posisi
BOTTOM KANAN akan ditata sesuai dengan urutan indeks ini, dengan nilai indeks yang lebih
rendah mengambil didahulukan. Secara default, semua kontrol kustom ditempatkan setelah
menempatkan API kontrol default. Bisa juga mengubah perilaku ini dengan menetapkan properti
indeks kontrol untuk menjadi nilai negatif. Kontrol kustom tidak dapat ditempatkan di sebelah
kiri logo atau ke kanan hak cipta.

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);

Berfungsi untuk mengakses DIV dimana letak pemasangan control UI ke Map.

controlDiv.index = 1;

Berfungsi sebagai nilai DIV milik sendiri.

map.controls[google.maps.ControlPosition.TOP_RIGHT].
push(contro lDiv);

Berfungsi untuk menambahkan control ke DOM melalui object Map.

Contoh dari Costum Control ( COBA 25 ) :
<html>
<head>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var surabaya = new google.maps.LatLng(-7.2742175, 112.719087);
function HomeControl(areahome, map) {
areahome.style.padding = '5px';
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 untuk kembali ke area awal';
areahome.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>Rumah</b>';
controlUI.appendChild(controlText);

google.maps.event.addDomListener(controlUI, 'click', function() {

map.setCenter(surabaya)
});
}
function pasangPeta() {
var pilihan = {
zoom: 13,
center: surabaya
}
map = new google.maps.Map(document.getElementById('peta'),
pilihan);
var areahome = document.createElement('div');
var homeControl = new HomeControl(areahome, map);
areahome.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(areahome);
}
</script>
</head>
<body onLoad="pasangPeta();">
<table border=1>
<tr>
<td>
<div id="peta" style="height:500px;width:900px;">
</div>
<div>
</div>
</td>
</tr>
</table>
</body>
</html>

Gambar coba 25

4.Menambahkan Area untuk Kontrol

Kontrol juga dapat menyimpan area. Contoh berikut ini mirip dengan yang ditunjukkan
sebelumnya, tetapi kontrol berisi "Set Home" tombol tambahan yang menetapkan kontrol untuk
menunjukkan lokasi rumah baru. Map melakukannya dengan menciptakan properti rumah dalam
kontrol untuk menyimpan kondisi ini dan memberikan getter dan setter bagi area itu.
Kode-kode berikut menambah area baru untuk control.
HomeControl.prototype.home_ = null;

Berfungsi untuk Mendefinisikan properti untuk menahan kondisi Halaman Utama.

HomeControl.prototype.getHome = function() {
return this.home_;
}
HomeControl.prototype.setHome = function(home) {
this.home_ = home;
}

Berfungsi untuk Mendefinisikan setter dan getter untuk property.

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);
});

Berfungsi untuk mengontrol peta ke pusat map saat ini.

Contoh dari menambah area costum control ( COBA 26 ) :
<html>
<head>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var surabaya = new google.maps.LatLng(-7.2742175, 112.719087);
HomeControl.prototype.home_ = null;
HomeControl.prototype.getHome = function() {
return this.home_;
}
HomeControl.prototype.setHome = function(home) {
this.home_ = home;
}
function HomeControl(controlDiv, map, home) {
var control = this;
control.home_ = home;
controlDiv.style.padding = '5px';
var goHomeUI = document.createElement('div');
goHomeUI.style.backgroundColor = 'white';
goHomeUI.style.borderStyle = 'solid';
goHomeUI.style.borderWidth = '2px';
goHomeUI.style.cursor = 'pointer';
goHomeUI.style.textAlign = 'center';

goHomeUI.title = 'Click to set the map to Home';

controlDiv.appendChild(goHomeUI);
var goHomeText = document.createElement('div');
goHomeText.style.fontFamily = 'Arial,sans-serif';
goHomeText.style.fontSize = '12px';
goHomeText.style.paddingLeft = '4px';
goHomeText.style.paddingRight = '4px';
goHomeText.innerHTML = '<b>Rumah</b>';
goHomeUI.appendChild(goHomeText);
var setHomeUI = document.createElement('div');
setHomeUI.style.backgroundColor = 'white';
setHomeUI.style.borderStyle = 'solid';
setHomeUI.style.borderWidth = '2px';
setHomeUI.style.cursor = 'pointer';
setHomeUI.style.textAlign = 'center';
setHomeUI.title = 'Click to set Home to the current center';
controlDiv.appendChild(setHomeUI);
var setHomeText = document.createElement('div');
setHomeText.style.fontFamily = 'Arial,sans-serif';
setHomeText.style.fontSize = '12px';
setHomeText.style.paddingLeft = '4px';
setHomeText.style.paddingRight = '4px';
setHomeText.innerHTML = '<b>Set Home</b>';
setHomeUI.appendChild(setHomeText);
google.maps.event.addDomListener(goHomeUI, 'click', function() {
var currentHome = control.getHome();
map.setCenter(currentHome);
});
google.maps.event.addDomListener(setHomeUI, 'click', function() {
var newHome = map.getCenter();
control.setHome(newHome);
});
}
function pasangPeta() {
var pilihan = {
zoom: 13,
center: surabaya
}
map = new google.maps.Map(document.getElementById('peta'),
pilihan);
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;

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.

Gambar lokasi baru

5.peta Gaya Sederhana (google developers)

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>

Contoh dari Simple style maps( COBA 27) :

<!DOCTYPE html>
<html>
<head>
<title>Simple styled maps</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
var surabaya = new google.maps.LatLng(-7.2742175, 112.719087);
var tipe_peta = 'custom_style';
function initialize() {
var pilihan = [
{
stylers: [
{ hue: '#0000FF' },
{ visibility: 'on' },
//{ saturation: 10 },
//{ gamma: 0.02 },
{ weight: 5 }
]
},
{ elementType: 'labels', stylers: [ { visibility: 'on' } ] },
{ featureType: 'water', stylers: [ { color: '#00FF00' } ] },
{ featureType: 'road',
stylers: [ { color: 'FF00FF' } ] }
];
var mapOptions = {
zoom: 14,
center: surabaya,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, tipe_peta]
},
mapTypeId: tipe_peta
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'pilihan'
};
var
customMapType
styledMapOptions);

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>