David Barbata David Barbata - 7 months ago 64
Javascript Question

Google map api draggable marker

Here when I drag and drop marker. I write lat,lng coordinates created div. First no any div. When I drag and drop marker is created. I left marker where it writes lat,lng value to inside div. I drag and drop each time different a div is created. Divs have recenter class name. Later when I click a div. I can't get value of div. Also when I click a created div I want to move marker that lat,lng position. I hope I can explain my problem. You can look here http://jsfiddle.net/QvNUF/1015/

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng"><br>
<button id="selected">Selected Coordinates</button>
<button id="clear">Clear history</button>
<div id="results" ></div>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41.015137,28.979530);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
var x=event.latLng.lat();
var y=event.latLng.lng();
$("#results").append('<div class="recenter">'+x+y+'</div>');
});
};
$('.recenter').click( function() {
var a=$(this).text();
alert(a);
});
$("#clear").click(function(){
$("#results").text("");
$("#results").hide();
});
initialize();
</script>
</body></html>

Answer

You add the click-listener for .recenter before the divs have been created, click() will not affect objects which haven't been created yet.

You may add the click-listener for the <div/>'s directly when you create them:

$("#results")
 .append($('<div>')
          .text(event.latLng.toUrlValue())
          .data('latlng',event.latLng)
          .click(function(){
                  marker.setPosition($(this).data('latlng'));
                 }));

http://jsfiddle.net/doktormolle/QvNUF/1022/