JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>
<div id="logo">MyEnterprise!</div>

CSS

#map{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}
#logo{
    position: absolute;
    padding: 10px;
    width: 200px;
    font-size: 24px;
    background-color: rgba(255,255,255,0.9);
    left: 50%;
    margin: 20px 0 0 -100px;
    text-align: center;
}
#newPos{
    position: absolute;
    left: 50%;
    margin: 24px 0 0 -130px;
}

JavaScript

var myOptions = {
    zoom: 11,
    center: new google.maps.LatLng(36.236797,-112.956333),
    disableDefaultUI: true,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: 'terrain'
}
var map = new google.maps.Map(document.getElementById("map"),myOptions);

google.maps.event.addDomListener(map, 'tilesloaded', function(){
    if($('#newPos').length==0){
        $('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
    }
});