JSFiddle - React, Tailwind, and code Playground

by Nico

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div class="outer-wrapper">nav></div>
<div class="inner-wrapper">
    <div class="map-wrapper">
        <div class="inner-map-wrapper">
               <aside id="map" ></aside>
        </div>
    </div>
</div>

CSS

body {
    height: 100%;
}
.outer-wrapper {
    position:absolute;
    top:0px;
    left:0px;
    width:500px;
    height:40px;
    background-color:black;
    z-index:100;
}
.inner-wrapper {
    width: 500px;
    height:500px;
    margin-top: -40px;
    min-height: 420px;
    padding-top: 40px;   
    background-color:#ccc;
    position:relative;
}

.map-wrapper{
    position:absolute;
    top:80px;
    left:0;
    bottom:6px;
    right:0;
    width: 500px;
    height:500px;
}

.inner-map-wrapper{
    position:absolute;
    top:0px;
    left:0;
    width: 500px;
    height:500px;
}
#map {
    width:100%;
    height:100%;
    display:block;
    position:relative;

}

aside:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    text-indent: -999em;
    width: 0;
}

JavaScript

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

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

  /*
    var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p>asdfasd</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.open(map,marker);
  });
  */
    var marker = new google.maps.Marker({
			map: map,
			draggable: true,
			position: new google.maps.LatLng(-25.363882,131.044922),
			visible: true
		});
    
    var boxText = document.createElement("div");
		boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
		boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(-140, 0)
			,zIndex: null
			,boxStyle: { 
			  background: "#333"
			  ,opacity: 0.75
			  ,width: "280px"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: false
			,pane: "floatPane"
			,enableEventPropagation: false
		};

		google.maps.event.addListener(marker, "mouseover", function (e) {
			ib.open(map, this);
		});

		var ib = new InfoBox(myOptions);

		ib.open(map, marker);
}

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