Menambah dan Menghapus Marker Pada Google Maps API Menggunakan Action Click
Table of Contents
Untuk melengkapi fitur pada Google Maps API pada website yang kita bangun, kita dapat menambahkan marker maupun menghapus marker menggunakan kursor sebelah kiri maupun sebelah kanan. Kali ini, klik kiri pada kursor akan digunakan untuk menambahkan marker, sedangkan klik kanan kursor akan kita gunakan untuk menghapus marker. Intinya, code javacript yang akan dilampirkan pada website adalah seperti ini :
var map;
var markers = [];
function initialize() {
var NY = new google.maps.LatLng(-7.984528, 112.620253);
var mapOptions = {
zoom: 13,
center: NY,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
google.maps.event.addListener(map, 'rightclick', function(event) {
marker.setMap(null);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
Untuk contoh penggunakan code javascript secara keseluruhan, dapat dilihat seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Marker Hapus</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#map-canvas, #map_canvas {
height: 650px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var markers = [];
function initialize() {
var NY = new google.maps.LatLng(-7.984528, 112.620253);
var mapOptions = {
zoom: 13,
center: NY,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
google.maps.event.addListener(map, 'rightclick', function(event) {
marker.setMap(null);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 800px; height: 600px"></div>
</body>
</html>
Simpan dengan ekstensi .php dan letakkan pada folder htdocs, kemudian buka melalui server localhost. Pertama kali dibuka, web akan menampilkan peta Kota Malang tanpa marker.
untuk menambahkan marker, klik kiri pada kursor mouse, maka akan menampilkan satu marker tiap satu klik :
kemudian, untuk menghapus marker, pilih marker yang akan dihapus, lantas klik kanan pada kursor mouse, maka marker pun akan terhapus :
Yuk, langsung praktik.... klik kiri untuk nambah marker dan klik kanan untuk hapus marker
Sekian apa yang dapat saya jabarkan, semoga memberikan manfaat bagi teman-teman.
Wassalam
