GmapsDrag event

gmaps event

by Leo

HTML

<script src="https://maps.google.com/maps/api/js"></script>
<body onload="init()">
<div id="map" style="height:300px; width:500px;">
</div>
</body>

JavaScript

function init()
{
	var myLatLng = new google.maps.LatLng(28.617161,-77.208111);
  var map = new google.maps.Map(document.getElementById("map"),
  {
		zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  );

  var overlay = new CustomMarker(
		new google.maps.LatLng(29.74850,-81.37890), 
		map,
		{
			markerId: 1234
		}
	);
  
   var overlay2 = new CustomMarker(
		new google.maps.LatLng(28.53880,-81.37890), 
		map,
		{
			markerId: 5678
		}
	);


}

function CustomMarker(latlng, map, args) {
	this.latlng = latlng;	
	this.args = args;	
	this.setMap(map);
}
    

    
CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.onAdd = function() {
	var self = this;
	
	var div = this.div;
	
	
		div = this.div = document.createElement('div');
		
		div.className = 'marker';
		
		div.style.position = 'absolute';
		div.style.cursor = 'pointer';
		div.style.width = '16px';
		div.style.height = '16px';
    div.draggable='true';
    
    div.style.backgroundColor = 'green';
      
		if (typeof(self.args.markerId) !== 'undefined') {
			div.dataset.markerId = self.args.markerId;
		}
    
    var panes = this.getPanes();
		panes.overlayMouseTarget.appendChild(div);
    
    google.maps.event.addDomListener(div, 'click', function(e) { console.log("CLICK");
    });
    
    google.maps.event.addDomListener(div, 'mousedown', function(e) {
      // Cancel the mousedown event to prevent dragging the map.
    	if (e.stopPropagation){
      	e.stopPropagation();
   		} else if(window.e){
     		window.e.cancelBubble=true;
   		}
    });
    var shiftX, shiftY, draggable;
    div.addEventListener('dragstart', function(e) { 
        shiftX = e.offsetX;
        shiftY = e.offsetY;
        e.dataTransfer.setDragImage(document.createElement('div'), 0, 0)
        console.log("START offsetX=" + shiftX+", shiftY="+shiftY);
        draggable = e.target;
    });
    div.addEventListener('drag', function(e) { 
         var bbox =...