google maps: dragable cutsom overlay

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

by barbarina

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></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;
      }
      
      
.testoPMV{
  font-family: 'Share Tech Mono', monospace;
  line-height: 12px; 
  color: orange;
}

.testoPMVCenter{
  font-family: 'Share Tech Mono', monospace;
  line-height: 12px; 
  color: orange;
  text-align: center;
}

.PMV3X20IMGIMG{
  background-color: black; border-style: solid; border-width: 3px; border-color: red;
                    padding: 5px; width:260px;
}

.PMV3X15IMG{
  background-color: black; border-style: solid; border-width: 3px; border-color: red;
                    padding: 5px; width:185px;
}

.PMV4X15{
  background-color: black; border-style: solid; border-width: 3px; border-color: green;
                    padding: 5px; width:140px;
}

.PMV3X20IMGIMGverde{
  background-color: black; border-style: solid; border-width: 3px; border-color: green;
                    padding: 5px; width:260px;
}

.linkDX{
   position: absolute;
    top: 50%;
    transform: translateY(-50%);
   
}

.imgFinta{
  background-color: black;
  width: 32px;
  height: 32px;
  display: inline-block;
  color: black;
}

.imgVera{
  background-color: black;
  background-image: url("https://s13.postimg.org/dnn00gtwz/image.gif");
  width: 32px;
  height: 32px;
  display: inline-block;
  color: black;
}

JavaScript

var map;
var markerP1;

//var overlayPMVRosso;

var overlayContentRosso = '<div class="panel-body" style="padding: 0 15px 0 0;">'+
    '<div class="row">'+
        '<div class="col-sm-12" style="display:inline-flex;">'+
    '<div class="PMV3X20IMGIMG">'+
                  '<span class="pull-left" style="margin-right: 10px; margin-left:4px;">'+
                  '<span class="imgFinta">a</span>'+
                  '<img src="https://s13.postimg.org/opwocfvb7/B_UP.gif" style="width: 32px; padding:0px;"  />'+
                  '</span>'+
                  '<span class="testoPMV">'+
                    '<div>SE PIOVE RIDUCI LA</div>'+
                    '<div>VELOCITA\' ! ANCHE</div>'+
                    '<div>SU ASFALTO DRENANTE</div>'+
                  '</span>'+
                  '</div>  '+    
        '</div>'+
        '</div>'+'</div>'+'</div>'+
      '</div>';

function initialize() {
	//var Marker = google.maps.Marker;

  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(43.83322764306724, 11.151112093326024),
   // mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   
  
 
  overlay = new DraggableOverlay(map,
                                 new google.maps.LatLng(43.83322764306724+0.0005, 11.151112093326024+0.0005),
                                 overlayContentRosso
            );
  
markerP1 = new google.maps.Marker({
    position: map.getCenter(),
    label: "PMV",
    draggable: false,
    map: map,
    visible: true,
  });
  
  //DraggableOverlay.prototype.onAdd(overlayPMVRosso);
  
}


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'){
     ...