Google Maps API2

Google Maps API: Membuat Marker
untuk Menandai Lokasi
# HTML # Google Maps # Javascript # API
Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan
dalam membuat aplikasi Geolocation.
Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan
melakukan beberapa modifikasi.
Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba.
Sudah siap?
Mari kita mulai…
Mengenal Objek Marker

Marker merupakan sebuah objek yang bisa kita buat dengan kode berikut:
var marker = new google.maps.Marker({

position: new google.maps.LatLng(-8.5830695,116.3202515),
map: peta
});
Terdapat dua properti penting yang harus diberikan ke marker:
1. position adalah posisi koordinat latitude dan longitude marker pada peta.
2. map objek dari peta (Google Map).
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tutorial Google Map - Petani Kode</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var propertiPeta = {
center:new google.maps.LatLng(-8.5830695,116.3202515),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"),

propertiPeta);
// membuat Marker
var marker=new google.maps.Marker({
map: peta
});
// event jendela di-load

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:100%;height:380px;"></div>
</body>
</html>
Hasilnya:
Live Demo: http://jsbin.com/raluzez/7/embed?output
Animasi Marker
Selain dua properti wajib, ada juga properti opsional seperti animation untuk
membuat animasi pada marker.
Contoh:

map: peta,
animation: google.maps.Animation.BOUNCE
});
Kita memberikan nilai google.maps.Animation.BOUNCE terhadap
properti animation. Artinya, animasi yang kita inginkan adalah berupa
pentalan (bounce).
Contoh kode lengkapnya:
<!DOCTYPE html>
<html>
<head>
<script>
zoom:9,
};

propertiPeta);
// membuat Marker
map: peta,
animation: google.maps.Animation.BOUNCE
});

</script>
</head>
<body>
</body>
</html>
Hasilnya:
Live demo: http://jsbin.com/raluzez/8/embed
Selain animasi BOUNCE ada juga DROP (google.maps.Animation.DROP).
Kustom Ikon
Apabila kita tidak ingin menggunakan ikon bawaan dari marker yang berwarna merah.
kita bisa membuat kustom ikon sendiri dengan properti icon.
Nilai dari properti icon dapat berupa URL dari gambar ikon yang akan digunakan.
Format ikon tidak harus .ico, format gambar seperti jpg, png, dan gif juga diterima.
Contoh:

position: new google.maps.LatLng(-8.623592, 116.222123),
map: peta,
icon:
"https://developers.google.com/maps/documentation/javascript/examples/full/im
g/beachflag.png"
});
Contoh lengkap:
<!DOCTYPE html>
<html>
<head>
<script>
zoom:9,
};

propertiPeta);
// membuat Marker
position: new google.maps.LatLng(-8.623592, 116.222123),
map: peta,
icon:
"https://developers.google.com/maps/documentation/javascript/examples/full/im
g/beachflag.png"
});

</script>
</head>
<body>
</body>
</html>
Hasilnya:
Live demo: http://jsbin.com/menoyixine/1/edit?output
Pastikan menggunakan ukuran ikon 32x32 pixel agar terlihat bagus.
Membuat Marker Saat Peta diklik

Bagaimana kalau kita ingin membuat marker ketika peta diklik?
Hal ini dapat dilakukan dengan menambahkan event listerner klik pada peta. Lalu
memanggil fungsi untuk membuat marker.
Contoh fungsi untuk membuat marker:
function taruhMarker(peta, posisiTitik){

// membuat Marker
position: posisiTitik,
map: peta
});
}
Lalu fungsi tersebut kita panggil saat event peta diklik:
google.maps.event.addListener(peta, 'click', function(event) {
taruhMarker(this, event.latLng);
});
Fungsi taruhMarker() membutuhkan dua parameter,
yaitu: peta dan posisiTitik agar bisa membuat marker.
Pada contoh di atas, kita memberikan this untuk

objek peta dan event.latLng untuk posisi marker.
Kenapa menggunakan this?
Karena fungsi tersebut dipanggil di dalam event peta dan this sudah mewakili objek
dari peta.
<!DOCTYPE html>
<html>
<head>
<script>

// membuat Marker
map: peta
});
}
zoom:9,
};

propertiPeta);
// even listner ketika peta diklik

});

</script>
</head>
<body>
</body>
</html>
Hasilnya:
Live demo: http://jsbin.com/raluzez/12/embed?html,output
Membuat Hanya Satu Marker

Bagaimana kalau kita ingin membuat hanya satu marker saja ketika petanya diklik?
Kita harus melakukan mdofikasi terhadap fungsi taruhMarker() seperti ini:
var marker;
if( marker ){
// pindahkan marker
marker.setPosition(posisiTitik);
} else {
// buat marker baru
marker = new google.maps.Marker({
map: peta
});
}
}
Objek atau variabel marker kita taruh di luar fungsi agar menjadi variabel global.
Lalu di dalam fungsi taruhMarker() kita melakukan pengecekan dengan IF/ELSE.
if(marker){
//...
} else {
//...
}
Jika ada marker di peta, maka cukup pindahkan posisinya saja. Tapi kalau belum ada,
maka buat yang baru.
Untuk memindahkan posisi marker, kita cukup memanggil

method setPosition() dengan parameter koordinat yang baru:
<!DOCTYPE html>
<html>
<head>
<script>
// variabel global marker
var marker;
if( marker ){
// pindahkan marker
} else {
// buat marker baru
map: peta
});
}
zoom:9,
};
propertiPeta);

});

</script>
</head>
<body>
</body>
</html>
Hasilnya:
Live demo: http://jsbin.com/raluzez/14/embed?html,output
Bagaimana Cara Mengambil Titik Koordinat dari Marker?

Pertanyaan bagus.
Mengambil titik koordinat dari marker biasnya kita butuhkan saat membuat form
input. Lalu nilai koordinat tersebut dikirim ke database.
Kita bisa mengambil nilai koordinat dari marker dari dalam
fungsi taruhMarker() atau saat event peta diklik.
Contoh:
if( marker ){
// pindahkan marker
} else {
// buat marker baru
map: peta
});
}
console.log("Posisi marker: " + posisiTitik);
}
Kode di ata akan menampilkan koordinat posisi dari marker ke console.
Lalu bagaimana agar nilai dari koordinat tersebut kita taruh di dalam form?
Kita bisa memanfaatkan DOM untuk mengirim nilai tersebut ke from.
Contoh kode form-nya:
<form action="" method="post">

<input type="text" id="lat" name="lat" value="">
<input type="text" id="lng" name="lng" value="">
</form>
Lalu pada fungsi taruhMarker() kita berikan nilai untuk elemen tersebut.
if( marker ){
// pindahkan marker
} else {
// buat marker baru
map: peta
});
}
// isi nilai koordinat ke form

document.getElementById("lat").value = posisiTitik.lat();
document.getElementById("lng").value = posisiTitik.lng();
}
Kode lengkap:
<!DOCTYPE html>
<html>
<head>
<script>
// variabel global marker
var marker;
if( marker ){
// pindahkan marker
} else {
// buat marker baru
map: peta
});
}
// isi nilai koordinat ke form

document.getElementById("lat").value = posisiTitik.lat();
document.getElementById("lng").value = posisiTitik.lng();
zoom:9,
};

propertiPeta);

});

</script>
</head>
<body>

<input type="text" id="lat" name="lat" value="">
<input type="text" id="lng" name="lng" value="">
</form>
</body>
</html>
Hasilnya:
Nah kalau sudah nilai koordinatnya ada di form, kita tinggal kirim saja ke database.
Selain menggunakan input type="text”, kita juga bisa menggunakan hidden.

<input type="hidden" id="lat" name="lat" value="">
<input type="hidden" id="lng" name="lng" value="">
</form>

Google Maps API2

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Google Maps API2

Diunggah oleh

Hak Cipta:

Format Tersedia

Google Maps API: Membuat Marker

untuk Menandai Lokasi

# HTML # Google Maps # Javascript # API

Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba.

Mari kita mulai…

Mengenal Objek Marker

var marker = new google.maps.Marker({

var peta = new google.maps.Map(document.getElementById("googleMap"),

// event jendela di-load

<div id="googleMap" style="width:100%;height:380px;"></div>

var marker=new google.maps.Marker({

Contoh kode lengkapnya:

var peta = new google.maps.Map(document.getElementById("googleMap"),

// event jendela di-load

<div id="googleMap" style="width:100%;height:380px;"></div>

Live demo: http://jsbin.com/raluzez/8/embed

Selain animasi BOUNCE ada juga DROP (google.maps.Animation.DROP).

var marker=new google.maps.Marker({

var peta = new google.maps.Map(document.getElementById("googleMap"),

// event jendela di-load

<div id="googleMap" style="width:100%;height:380px;"></div>

Live demo: http://jsbin.com/menoyixine/1/edit?output

Pastikan menggunakan ukuran ikon 32x32 pixel agar terlihat bagus.

Membuat Marker Saat Peta diklik

Contoh fungsi untuk membuat marker:

function taruhMarker(peta, posisiTitik){

Pada contoh di atas, kita memberikan this untuk

Kenapa menggunakan this?

Contoh kode lengkapnya:

function taruhMarker(peta, posisiTitik){

var peta = new google.maps.Map(document.getElementById("googleMap"),

// even listner ketika peta diklik

// event jendela di-load

<div id="googleMap" style="width:100%;height:380px;"></div>

Live demo: http://jsbin.com/raluzez/12/embed?html,output

Membuat Hanya Satu Marker

Kita harus melakukan mdofikasi terhadap fungsi taruhMarker() seperti ini:

Lalu di dalam fungsi taruhMarker() kita melakukan pengecekan dengan IF/ELSE.

Untuk memindahkan posisi marker, kita cukup memanggil

function taruhMarker(peta, posisiTitik){

// even listner ketika peta diklik

// event jendela di-load

<div id="googleMap" style="width:100%;height:380px;"></div>

Live demo: http://jsbin.com/raluzez/14/embed?html,output

Bagaimana Cara Mengambil Titik Koordinat dari Marker?

function taruhMarker(peta, posisiTitik){

console.log("Posisi marker: " + posisiTitik);

Kita bisa memanfaatkan DOM untuk mengirim nilai tersebut ke from.

Contoh kode form-nya:

<form action="" method="post">

function taruhMarker(peta, posisiTitik){

// isi nilai koordinat ke form

function taruhMarker(peta, posisiTitik){

// isi nilai koordinat ke form

var peta = new google.maps.Map(document.getElementById("googleMap"),

// even listner ketika peta diklik

// event jendela di-load

<div id="googleMap" style="width:100%;height:380px;"></div>

<form action="" method="post">

Selain menggunakan input type="text”, kita juga bisa menggunakan hidden.

<form action="" method="post">

Anda mungkin juga menyukai