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

  • wayfajh - posted 3 months ago
    Pak Kalau mau muncul langsung dengan gps nya gmna pak?
    • alfa6661 - posted 3 months ago

      Update nilai lat sama lang sesuai dari device gps.

      var latLng = new google.maps.LatLng(-6.9147444000, 107.6098111000);

    • bumblewave - posted 1 year ago

      Gan mau tanya, itukan markernya 1 yang nampil. Misalnya kalau marker yang ditampilkan dari database(misalnya 5 data yang ada di database) lalu digeser2 koordinatnya dan tersimpan lagi di database gimana caranya gan ? Terima kasih.

      • alfa6661 - posted 3 months ago

        Bikin banyak objek markernya.

        marker1 = new google.maps.Marker({
        	position: latLngMarker1,
        	map: map,
        	draggable: true
        });
        
        marker2 = new google.maps.Marker({
        	position: latLngMarker2,
        	map: map,
        	draggable: true
        });
        Untuk update database pake event dragend

        marker.addListener('dragend', function() {
        	// Update database.
        });