Drag and Drop Google Maps Marker

alfa6661
- January 10, 2016
0 (0 votes)
Rate :
Mendapatkan longitude dan latitude Google Maps dengan cara drag and drop marker.

Pada artikel sebelumnya telah dibahas mengenai Bagaimana Menambahkan marker pada google map dan Cara Membuat animasi marker pada google map. Pada kesempatan kali ini, akan dicontohkan bagaimana cara mendapatkan longitude, latitude dan alamat dengan cara melakukan drag and drop pada marker.

Untuk memungkinkan pengguna untuk drag marker ke lokasi yang berbeda pada map, kita perlu mengatur properti draggable menjadi true.

var latLng = new google.maps.LatLng(-6.9147444000, 107.6098111000);
var options = {
	center:latLng, // longitude latitude bandung
	zoom:14,
	mapTypeId:google.maps.MapTypeId.ROADMAP // Tipe ROADMAP
};
// create map object
map = new google.maps.Map(document.getElementById("googleMap"),options);
marker = new google.maps.Marker({
	position: latLng,
	map: map,
	draggable: true // set true
});

Dengan kode diatas, kita memungkinkan pengguna untuk melakukan drag and drop pada marker. Langkah selanjutnya, kita harus mendapatkan longitude dan latitude pada saat marker di drag, dan mendapatkan alamat dari marker saat di drop. Untuk itu kita memerlukan 2 event pada marker yaitu drag dan dragend.

marker.addListener('drag', function() {
	// TODO
});
marker.addListener('dragend', function() {
	// TODO
});

Untuk mendapatkan longitude dan latitude kita bisa menggunakan fungsi getPosition.

var pos = marker.getPosition();
var lng = pos.lng(); // longitude
var lat = pos.lat(); // latitude

Untuk mendapatkan alamat terdekat dari marker yang di drop kita bisa menggunakan google maps geocoder.

geocoder = new google.maps.Geocoder();
function geocodePosition() {
	pos = marker.getPosition();
  	geocoder.geocode({latLng: pos}, function(responses) {
		if (responses && responses.length > 0) {			
			var address = responses[0].formatted_address; // alamat
		} else {
			var address = "Tidak ditemukan";
		}
	});
}

Sekian yang bisa saya tulis, untuk lebih lengkapnya silahkan lihat demo / download source nya.

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article