Postingan lainnya
WEB GIS (Munculkan Koordinat dari 2 marker googlemap ke kolom input koordinat dgn Drag Dragend)
Selamat Malam, saya ingin bertanya
saya telah berhasil memunculkan 1 koordinat(lang lng) dari 1 marker ke kolom input koordinat.
tapi untuk marker ke 2 tidak mau masuk ke kolom input koordinat 2.. sudah coba berbagai macam cara tetap tidak bisa
begini penampakan gambar dan codingnya.. mohon bantuannya semua suhu2
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.122309, lng: 117.473979},
zoom: 14
});
// ini adalah marker pertama yang work
var marker = new google.maps.Marker({
position: {lat: 0.122309, lng: 117.473979},
map: map,
title: 'Click to zoom',
draggable:true
});
//dibawha ini adalah saya paksakan menambah marker ke 2
var marker = new google.maps.Marker({
position: {lat: 0.122309, lng: 117.473979},
map: map,
title: 'Click to zoom',
draggable:true
});
marker.addListener('drag', handleEvent);
marker.addListener('dragend', handleEvent);
var infowindow = new google.maps.InfoWindow({
content: '<h4>Marker untuk Koordinat Latlng 1</h4>'
});
infowindow.open(map, marker);
}
function handleEvent(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
}
$(function(){
initMap();
})
</script>
0
2 Jawaban:
handleEvent dan marker dibuat sendiri gan. Semoga membantu
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=SECRET&callback=initMap"
async defer></script>
<meta charset="utf-8">
<style>
#map {
height: 350px;
width: 680px;
}
</style>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.122309, lng: 117.473979},
zoom: 14
});
// ini adalah marker pertama yang work
var marker = new google.maps.Marker({
position: {lat: 0.122309, lng: 117.473979},
map: map,
title: 'Click to zoom',
draggable:true
});
marker.addListener('drag', function(e){
handleEvent(e,'lat','lng');
});
var infowindow = new google.maps.InfoWindow({
content: '<h4>Marker untuk Koordinat Latlng 1</h4>'
});
infowindow.open(map, marker);
//marker 2
var marker2 = new google.maps.Marker({
position: {lat: 0.122309, lng: 117.473979},
map: map,
title: 'Click to zoom',
draggable:true
});
var infowindow = new google.maps.InfoWindow({
content: '<h4>Marker untuk Koordinat Latlng 2</h4>'
});
infowindow.open(map, marker2);
marker2.addListener('drag', function(e){
handleEvent(e,'lat2','lng2');
});
}
function handleEvent(event,lat,lng) {
document.getElementById(lat).value = event.latLng.lat();
document.getElementById(lng).value = event.latLng.lng();
}
$(function(){
initMap();
})
</script>
</head>
<body>
<div id="map"></div>
<input id="address" type="text" style="width:600px;"/><br/>
<label>marker 1</label><br>
<input type="text" id="lat" placeholder="Latitude"/>
<input type="text" id="lng" placeholder="Longitude"/> <br>
<label>marker 2</label><br>
<input type="text" id="lat2" placeholder="Latitude"/>
<input type="text" id="lng2" placeholder="Longitude"/> <br>
</body>
</html>
0
