Google map api draggable marker

Question

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>

I used marker.setPosition(latlng); but it didn't work. I can't get value of div. When I drag and drop two times. 2 divs is created that has recenter name class. I have to give growing class name. For example recenter_1, recenter_2 — David Barbata
– David Barbata, Commented May 5, 2016 at 8:11
Add onclick ="movemarker(x,y);" on evey div you append and then create function like function moveMarker(lat,lng) { var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng)); marker.setPosition(latlng); } — Pardeep Poria
– Pardeep Poria, Commented May 5, 2016 at 8:13
You are right. But firstly when a div is created that has recenter classname. İt is writing lat, lng value of div. Later I have to use a function as your said. — David Barbata
– David Barbata, Commented May 5, 2016 at 8:26
I don't create just a div. Every drag and drop is created a div. — David Barbata
– David Barbata, Commented May 5, 2016 at 8:27

Dr.Molle · Accepted Answer · 2016-05-05 08:47:46Z

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/

When I try this demo on my server I get an error. Cannot read property 'toUrlValue' of undefined. İs it an alternative this function?

Pardeep Poria · Accepted Answer · 2016-05-05 08:41:14Z

You need marker.setPosition(latlng) Also you will have to decalre marker, map as globals above you code yes , i checked your fiddle. I know your div structure ..just add onclick ="movemarker(x,y);" on div after class attribute and then

function moveMarker(lat,lng) { //console.log("lat:"+x+" lng:"+y); var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng)); marker.setPosition(latlng); }

Collectives™ on Stack Overflow

Google map api draggable marker

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related