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
}
.dummy-div {
    background: rgba(255, 0, 0, 0.5);
}

JavaScript

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

function createDummyDiv(w, h){
    var out = $(document.createElement('div')).addClass('dummy-div')
    .css('width', w).css('height', h);
    return out[0];
}

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
map.controls[google.maps.ControlPosition.LEFT_TOP].push(createDummyDiv('150px', '100%'));

var bounds = new google.maps.LatLngBounds();
bounds.extend(chicago);
bounds.extend(berlin);

// add bounds visualisation with red line
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var boundingBoxPoints = [
    ne, new google.maps.LatLng(ne.lat(), sw.lng()),
    sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
var boundingBox = new google.maps.Polyline({
    path: boundingBoxPoints,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});
boundingBox.setMap(map);

// and it seems that the custom control doesnt add padding left to fitBounds();
map.fitBounds(bounds);