JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<h3>My Google Maps Demo - <a href="http://www.latlong.net/convert-address-to-lat-long.html">Convert address to latlng</a></h3>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcmdLeT1BAVksYwvNMqOK7MszXXdFg618&callback=initMap">


</script>

SCSS

#map {
    height: 100vh;
    width: 100vw;
}

.content-window {
    background: red;
}

.maps-image-block {
    width: 100%;
    height: 176px;
    overflow: hidden;
    
    img {
        width: 100%;
    }
}

.maps-content-block {
    padding: 10px;
}

h1 {
    margin: 0;
}

JavaScript

(function(){var b;
function h(a){this.extend(h,google.maps.OverlayView);this.b=[];this.d=null;this.g=100;this.m=!1;a=a||{};void 0==a.backgroundColor&&(a.backgroundColor=this.A);void 0==a.borderColor&&(a.borderColor=this.B);void 0==a.borderRadius&&(a.borderRadius=this.C);void 0==a.borderWidth&&(a.borderWidth=this.D);void 0==a.padding&&(a.padding=this.H);void 0==a.arrowPosition&&(a.arrowPosition=this.u);void 0==a.disableAutoPan&&(a.disableAutoPan=!1);void 0==a.disableAnimation&&(a.disableAnimation=!1);void 0==a.minWidth&&(a.minWidth=
this.G);void 0==a.shadowStyle&&(a.shadowStyle=this.I);void 0==a.arrowSize&&(a.arrowSize=this.v);void 0==a.arrowStyle&&(a.arrowStyle=this.w);void 0==a.closeSrc&&(a.closeSrc=this.F);m(this);this.setValues(a)}window.InfoBubble=h;b=h.prototype;b.v=15;b.w=0;b.I=1;b.G=50;b.u=50;b.H=10;b.D=1;b.B="#ccc";b.C=10;b.A="#fff";b.F="https://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif";b.extend=function(a,c){return function(a){for(var c in a.prototype)this.prototype[c]=a.prototype[c];return this}.apply(a,[c])};
function m(a){var c=a.c=document.createElement("DIV");c.style.position="absolute";c.style.zIndex=a.g;(a.i=document.createElement("DIV")).style.position="relative";var d=a.j=document.createElement("IMG");d.style.position="absolute";d.style.border=0;d.style.zIndex=a.g+1;d.style.cursor="pointer";d.className="js-info-bubble-close";d.src=a.get("closeSrc");google.maps.event.addDomListener(d,"click",function(){a.close();google.maps.event.trigger(a,"closeclick")});var e=a.e=document.createElement("DIV");e.style.overflowX="auto";e.style.overflowY=
"auto";e.style.cursor="default";e.style.clear="both";e.style.position="relative";var f=a.k=document.createElement("DIV");e.appendChild(f);f=a.N=document.createElement("DIV");f.style.position="relative";var...