title: Drag and drop marker in google maps
body: <p>i want to create marker on google map through dragging marker image from outside the map canvas and drop it inside the canvas, i've registered dom event listener of google maps but inside the listener i have no access to latLng object, how do i find the latLng of dropping point?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  &lt;head&gt;
      &lt;title&gt;Active Users&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="style.css" /&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" &gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=maps&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="big_wrapper"&gt;
          &lt;div id="gmap_canvas" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
          &lt;div id="controls"&gt;
             &lt;div class="command"&gt;
                Coordinates: &lt;br /&gt;
                &lt;input type="text" id="lat" value="33.718629" /&gt;&lt;br /&gt;
  
                &lt;input type="text" id="lng" value="73.059082" /&gt;&lt;br /&gt;
                &lt;input type="button" value="Go" id="go" /&gt;
             &lt;/div&gt;
  
             &lt;div class="command"&gt;
                 Markers: &lt;br /&gt;
                 &lt;img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" /&gt;
             &lt;/div&gt;
             &lt;div class="command" id="debug"&gt;
             &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>and here is my javascript code</p>
  
  <pre><code>var geocoder;
  var map;
  
  $(function() {
  
      $("#go").click(function()
      {
          map.setCenter(new google.maps.LatLng($("#lat").val(), $("#lng").val()));
      });
  
  
  });
  
  function initialize() {
      // prepare Geocoder
      geocoder = new google.maps.Geocoder();
  
      var myLatlng = new google.maps.LatLng(33.718629,73.059082);
  
      var myOptions = { // default map options
          zoom: 2,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
      mapDiv = document.getElementById('gmap_canvas');
  
      google.maps.event.addListener(map, 'dragend', function(event)
      {
          document.getElementById('lat').value = map.getCenter().lat();
          document.getElementById('lng').value = map.getCenter().lng();
      });
  
      google.maps.event.addListener(map, 'click', function(e)
      {
          alert(e.latLng);
      });
  
      google.maps.event.addDomListener(mapDiv, 'drop', function(event)
      {
          alert(event);
          google.maps.event.trigger(map, 'click');
      });
  }
  
  function allowDrop(ev)
  {
      ev.preventDefault();
  }
  
  function drag(ev)
  {
      ev.dataTransfer.setData("Text",ev.target.id);
  }
  
  function drop(ev)
  {
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      alert(ev.latLng);
  }
  
  // initialization
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>