David Barbata David Barbata - 1 year ago 121
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>
<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>
<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,
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();


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: