Google Maps with InfoBox Js Plugin

Google Maps with InfoBox Js Plugin

by Abid Shaik

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/infobox-lib.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
		<div id="map" style="width: 100%; height: 500px"></div>
    <div class="infobox-wrapper">
      <div id="infobox">
        <img id="LegendImg" src="https://s3.amazonaws.com//assets.brightdoor.com/bdt/media/legend200825122429.png" />
      </div>
    </div>

CSS

.infobox-wrapper {
    display:block;
}
.infoBox{border-top:20px solid red !important; }
#infobox {
    text-shadow:0 -1px #000000;
    -webkit-box-shadow: 0 0  8px #000;
    box-shadow: 0 0 8px #000;
}
#LegendImg{width:100%;}

JavaScript

function initialize() {
  var loc, map, marker, infobox;

  loc = new google.maps.LatLng(35.780, -78.640);

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: loc,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

//Invisible Marker this is where the InfoBox is anchored to
  marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: false
  });

  infobox = new InfoBox({
    content: document.getElementById("infobox"),
    pixelOffset: new google.maps.Size(-150, 0),
    zIndex: null,
    boxStyle: {
      width: "300px"
    },
  });

  infobox.open(map, marker);
	
	google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, marker);
        map.panTo(loc);
    });
		
}

google.maps.event.addDomListener(window, 'load', initialize);

$(document).one( "click", function() {
  console.log($("#infobox").parent(".infoBox")); 
	$("#infobox").parent(".infoBox").draggable();
})