CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Yogesh Malpani
Yogesh Malpani

Reputation: 971

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>

Upvotes: 35

Views: 108690

Answers (3)

duncan
duncan

Reputation: 31912

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);
}

Upvotes: 67

Vishal
Vishal

Reputation: 141

var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zoom:25,
        title: title,
        draggable:true,
});
var infowindow = new google.maps.InfoWindow({
    content: info 
  });
infowindow.open(map,marker);

google.maps.event.addListener(marker,'drag',function(event) {
    document.getElementById('lat').value = event.latLng.lat();
    document.getElementById('lng').value = event.latLng.lng();
    var infowindow = new google.maps.InfoWindow({
        content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude: ' + event.latLng.lng()
      });
    infowindow.open(map,marker);
});

google.maps.event.addListener(marker,'dragend',function(event) 
        {
    document.getElementById('lat').value =event.latLng.lat();
    document.getElementById('lng').value =event.latLng.lng();
    var infowindow = new google.maps.InfoWindow({
        content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude:'+`event.latLng.lng()
      });
    infowindow.open(map,marker);
});

Upvotes: 14

krikara
krikara

Reputation: 2435

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location,
      draggable:true,
      map: map
  });

  map.setCenter(location);
}

Try creating the marker like this .

Upvotes: 4

Related Questions