google maps: dragable cutsom overlay
see: http://stackoverflow.com/questions/22127626/can-we-make-custom-overlays-draggable-on-google-maps-v3
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>
CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.overlay{
background:yellow;
padding:30px;
border:4px double black;
}
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);
overlay = new DraggableOverlay(map,
map.getCenter(),
'<div class="overlay">drag me!</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()
...