JSFiddle - React, Tailwind, and code Playground

by seddass

HTML

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

CSS

html, 
body, 
#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var berlin = new google.maps.LatLng(42.850033, -83.5500523);

function HomeControl(controlDiv, map) {
    controlDiv.style.padding = '5px';
    controlDiv.style.width = '160px';
    controlDiv.style.height = '100%';
    controlDiv.style.borderColor = '#333';
    controlDiv.style.borderStyle = 'solid';
    controlDiv.style.borderWidth = '2px';
    
    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '2px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to set the map to Home';
    controlDiv.appendChild(controlUI);
    // Set CSS for the control interior
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.innerHTML = '<b>Custom control div</b>';
    controlUI.appendChild(controlText);
}

var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    scaleControl: false,
    scrollwheel: false,
    panControl: false,
    backgroundColor: '#5c606b',
    streetViewControl: false,
    mapTypeControlOptions: false
}
map = new google.maps.Map(mapDiv, mapOptions);

var marker = new google.maps.Marker({
    position: chicago,
    map: map,
    title: 'Chicago'
});
var marker = new google.maps.Marker({
    position: berlin,
    map: map,
    title: 'Berlin'
});

// add custom control hoping it will add padding-left to the map
var homeControlDiv =...