JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?libraries=drawing&sensor=false&.js"></script>
<div id="map"></div>
<div id="logo">MyEnterprise!</div>
CSS
#map {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
#logo {
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 0 3px 1px #000;
font-size: 28px;
height: 43px;
left: 50%;
margin: 22px 0 0 -94px;
padding: 15px 0 0;
position: absolute;
text-align: center;
width: 190px;
}
#newPos {
position: absolute;
left: 50%;
margin: 14px 0 0 -135px;
}
#newPos .gmnoprint > div {
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 0 3px 1px #000;
margin: 3px;
overflow: hidden;
}
.gmnoprint {
opacity: 0;
}
JavaScript
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(36.236797, -112.956333),
disableDefaultUI: true,
mapTypeId: 'terrain'
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addDomListener(map, 'tilesloaded', function () {
if ($('#newPos').length == 0) {
$('div.gmnoprint').last().wrap('<div id="newPos" />');
$('div.gmnoprint').css({
opacity: 1
});
}
});
var setPos = function () {
google.maps.event.trigger(map, 'tilesloaded');
};
window.setTimeout(setPos, 1000);