google maps: draggable custom overlay

see: http://stackoverflow.com/questions/22127626/can-we-make-custom-overlays-draggable-on-google-maps-v3

by johannpickard

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px
      }
      .overlay {
          background:yellow;
          text-align:center;
          border-radius: 50%;
          width:30px;
          height:30px;
          line-height:30px;
      }

JavaScript

function initialize() {
    var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(52.5498783, 13.425209099999961),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    new DraggableOverlay(map,
    map.getCenter(),
        '<div class="overlay">123</div>');


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


    });

   ...