Can we create custom overlays dragged onto Google V3 maps

Question

Markers are draggable, but I don’t have a custom div on the marker, which changes when you hover over a click, etc., so I thought about using custom overlays, but I can’t figure out if custom overlay dragging supports it. There is already an answer to this, but the demonstration itself does not work,

how to make Custom Overlays draggable using google-maps v3

I did not find anything in the code link for the overlayView class.

Answer 1

Yes we can.

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

DraggableOverlay.prototype.onAdd = function() {
  var container=document.createElement('div'),
      that=this;

  if(typeof this.get('content').nodeName!=='undefined'){
    container.appendChild(this.get('content'));
  }
  else{
    if(typeof this.get('content')==='string'){
      container.innerHTML=this.get('content');
    }
    else{
      return;
    }
  }
  container.style.position='absolute';
  container.draggable=true;
      google.maps.event.addDomListener(this.get('map').getDiv(),
                                       'mouseleave',
                                        function(){
          google.maps.event.trigger(container,'mouseup');
        }
      );


      google.maps.event.addDomListener(container,
                                       'mousedown',
                                   function(e){
        this.style.cursor='move';
        that.map.set('draggable',false);
        that.set('origin',e);

        that.moveHandler  = 
              google.maps.event.addDomListener(that.get('map').getDiv(),   
                                               'mousemove',
                                               function(e){
             var origin = that.get('origin'),
                 left   = origin.clientX-e.clientX,
                 top    = origin.clientY-e.clientY,
                 pos    = that.getProjection()
                               .fromLatLngToDivPixel(that.get('position')),
                 latLng = that.getProjection()
                          .fromDivPixelToLatLng(new google.maps.Point(pos.x-left,
                                                                    pos.y-top));
                 that.set('origin',e);
                 that.set('position',latLng);
                 that.draw();
            });


        }
     );

      google.maps.event.addDomListener(container,'mouseup',function(){
        that.map.set('draggable',true);
        this.style.cursor='default';
        google.maps.event.removeListener(that.moveHandler);
      });


  this.set('container',container)
  this.getPanes().floatPane.appendChild(container);
};

function DraggableOverlay(map,position,content){
  if(typeof draw==='function'){
    this.draw=draw;
  }
  this.setValues({
                 position:position,
                 container:null,
                 content:content,
                 map:map
                 });
}



DraggableOverlay.prototype.draw = function() {
  var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
  this.get('container').style.left = pos.x + 'px';
  this.get('container').style.top = pos.y + 'px';
};

DraggableOverlay.prototype.onRemove = function() {
  this.get('container').parentNode.removeChild(this.get('container'));
  this.set('container',null)
};

It observes the mousemove event and changes the top / left overlay style based on the distance from the last mouse position.

---

Using:

new DraggableOverlay( 
       map,//maps-instance
       latLng,//google.maps.LatLng
       'content',//HTML-String or DOMNode
       function(){}//optional, function that ovverrides the draw-method
       );

, latLng -argument.

, draw-argument .

---

: http://jsfiddle.net/doktormolle/QRuW8/

---

: 3.27 google. 3.28 .

: https://developers.google.com/maps/documentation/javascript/releases#328