title: Drag and Drop Google Maps Marker
body: <p>I have made a drag-and-drop feature so that users can drag an icon from the sidebar and when they <strong><em>drop</em></strong> the icon, a marker is placed.</p>
  
  <p>The below implementation seemed like the best (only) way to achieve it, but issues are occurring when the network is slow, presumably because the lat/lng from the mouseover event is (very) inaccurate. </p>
  
  <p>Can anyone offer an alternative way I could do this? Perhaps placing the marker immediately and then using the built-in maps drag-n-drop ?</p>
  
  <pre class="lang-js prettyprint-override"><code>function placeMarker(lat, lng) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      draggable: true,
      map: map
    });
    return marker;
  }
  
  $(".icon").draggable({helper: 'clone',
  
    start: function(e, ui) {
      map.setOptions({draggable: false});
      $("#map").css('cursor', 'crosshair');
    },
  
    stop: function(e,ui) {
      map.setOptions({draggable: true});
      $("#map").css('cursor', 'default');
  
      google.maps.event.addListenerOnce(map, "mouseover", function(event) {
        var lat = event.latLng.lat(),
            lng = event.latLng.lng(),
            id = ui.helper.context.id;
  
        pointA = id === "pointA" &amp;&amp; pointA === true 
                         ? pointA.setMap(null) : placeMarker(lat, lng); 
  
        pointB = id === "pointB" &amp;&amp; pointB === true 
                         ? pointB.setMap(null) : placeMarker(lat, lng);
      });
    }
  });
  </code></pre>