Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps drag and dragend event listeners won't work if marker created by click event listener

Just a noob trying to learn, I came out with a problem that when I try to create marker with click event, drag and dragend event listeners won't work. Whereas when created by default these work.

Here is what I have tried so far.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">         </script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(22,79); var myOptions = {   zoom: 5,   center: myLatlng,   mapTypeId: google.maps.MapTypeId.ROADMAP,  } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  marker = new google.maps.Marker({         position: myLatlng,         map: map,         title: 'Default Marker',         draggable:true });  google.maps.event.addListener(map,'click',function(event) {          marker = new google.maps.Marker({         position: event.latLng,         map: map,         title: 'Click Generated Marker',         draggable:true         });     } );  google.maps.event.addListener(     marker,     'drag',     function(event) {         document.getElementById('lat').value = this.position.lat();         document.getElementById('lng').value = this.position.lng();         //alert('drag');     });   google.maps.event.addListener(marker,'dragend',function(event) {         document.getElementById('lat').value = this.position.lat();         document.getElementById('lng').value = this.position.lng();         alert('Drag end');     });     } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:500px;height:500px;"></div>  Lat: <input type="text" id="lat"><br> Lng: <input type="text" id="lng">  </body></html> 
like image 976
Yogesh Malpani Avatar asked Jul 09 '12 07:07

Yogesh Malpani


People also ask

How do you drag a marker on Google Maps?

You can allow users to move a marker on the map by setting the marker's draggable property to true . For more information about draggable markers, see below.

Which is the preferred method for handling large number of markers is to store the data in?

As it turns out, the Android Maps Util Library https://github.com/googlemaps/android-maps-utils seems to be the number one choice when clustering markers.

How do you refresh a marker on Google Maps?

To reload the markers, when you create then, push them to an array. Then create a function where you iterate through the array, setting the markers map as null. After this, erase the array.

How many markers can be created if maps are generated by the Google wizard?

The use of markers in the map is quite limited but you can put up to 50 markers on a map in 10 different colors and in 3 different sizes with an optional letter in it on the map.


1 Answers

What you probably want to do is change the reference in your event listeners, from this to the event itself.

Then you need to add separate event listeners for your new marker at the same time as you create it. I'd suggest simply having one function which takes input arguments for the latlng, title, and anything else you need. And it then creates the marker and any event listeners required.

function initialize() {     var myLatlng = new google.maps.LatLng(22,79);     var myOptions = {       zoom: 5,       center: myLatlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     }      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);      addMarker(myLatlng, 'Default Marker', map);      map.addListener('click',function(event) {         addMarker(event.latLng, 'Click Generated Marker', map);     ); }  function handleEvent(event) {     document.getElementById('lat').value = event.latLng.lat();     document.getElementById('lng').value = event.latLng.lng(); }  function addMarker(latlng,title,map) {     var marker = new google.maps.Marker({             position: latlng,             map: map,             title: title,             draggable:true     });      marker.addListener('drag', handleEvent);     marker.addListener('dragend', handleEvent); } 
like image 102
duncan Avatar answered Sep 18 '22 09:09

duncan