JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<button id="clear">Clear Map</button>
<div id="canvas-map"></div>

CSS

html, body, #canvas-map {
    height: 100%;
    width: a00%;
    margin: 0px;
    padding: 0px
}
@import url(http://fonts.googleapis.com/css?family=Montserrat:400, 700);
 *, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-family:'Montserrat', sans-serif;
    font-weight: 400;
    background: #EAEDF0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* LAYOUT
   --------------------------------------------------------------------- */
 a {
    color: #0099ff;
}
a:hover {
    color: #f1f1f1;
}
/* MAP
   --------------------------------------------------------------------- */
 #canvas-map {
    width: 100%;
    height: 400PX;
}
/* POPUP
   --------------------------------------------------------------------- */
 .infobox {
    background: #EAEDF0;
    line-height: 15px;
    position: absolute;
    border-radius: 6px;
    z-index: 1000000000000000;
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
}
.infobox .content {
    width: 100%;
    height: 100%;
}
.infobox .content .img {
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url(http://upload.wikimedia.org/wikipedia/en/9/9b/Persepolis_Teheran_Logo%282012%29.png) no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-radius: 6px 0 0 6px;
}
.infobox .content .txt {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 40%;
    padding: 10px;
}
.infobox .content .txt h1 {
    color: #0099ff;
    font-size: 16px;
    margin: 5px 0 10px;
}
.infobox .content .txt span {
    color: #888;
    font-size: 12px;
}
.infobox .content .fot {
    width:...

JavaScript

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 * offsetVertical, offsetHorizontal, className, height, width
 */

function InfoBox(opts) {
    google.maps.OverlayView.call(this);
    this.latlng_ = opts.latlng;
    this.map_ = opts.map;
    this.content = opts.content;
    this.offsetVertical_ = -195;
    this.offsetHorizontal_ = 5;
    this.height_ = 165;
    this.width_ = 266;
    var me = this;
    this.boundsChangedListener_ = google.maps.event.addListener(this.map_, "bounds_changed", function () {
        return me.panMap.apply(me);
    });
    // Once the properties of this OverlayView are initialized, set its map so
    // that we can display it. This will trigger calls to panes_changed and
    // draw.
    this.setMap(this.map_);
}
/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new google.maps.OverlayView();
/* Creates the DIV representing this InfoBox
 */
InfoBox.prototype.remove = function () {
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};

InfoBox.prototype.setPosition = function(latlng) {
    this.latlng_ = latlng;
};
/* Redraw the Bar based on the current projection and zoom level
 */
InfoBox.prototype.draw = function () {
    // Creates the element if it doesn't exist already.
    this.createElement();
    if (!this.div_) return;
    // Calculate the DIV coordinates of two opposite corners of our bounds to
    // get the size and position of our Bar
    var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (!pixPosition) return;
    // Now position our DIV based on the DIV coordinates of our bounds
    this.div_.style.width = this.width_ + "px";
    this.div_.style.left =...