JSFiddle - React, Tailwind, and code Playground

by poroushorse

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
<div id="map_canvas"></div>
<div id="header"></div>
<div id="sidebar"></div>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; }
#header { width: 100%; height: 50px; background: #000; position: absolute; top: 0; left: 0; }
#sidebar { width: 100px; height: 100%; background: #999; position: absolute; top: 0; right: 0; }

.info-box { background: #ffffff; }

JavaScript

var myLatLng = new google.maps.LatLng(51.53880833606918, -0.01652240753173828);

var mapOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    panControl: false,
    streetViewControl: false,
    mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
});

var infoBubbleOptions = {
    content: '<h1>This is a test infobox.</h1>',
    position: myLatLng,
    boxClass: 'info-box',
    alignBottom: true,
    pixelOffset: new google.maps.Size(-150, -40),
    maxWidth: 300,
    closeBoxMargin: '10px',
    boxStyle: {
        width: '300px',
        height: '200px'
    },
    disableAutoPan: false,
    infoBoxClearance: new google.maps.Size(10, 10)
};

var infoBubble = new InfoBox(infoBubbleOptions);

google.maps.event.addListener(marker, 'click', function() {
    infoBubble.open(map);
});

var padderTop = document.createElement('div');
padderTop.style.height = '50px';
padderTop.style.width = '100%';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(padderTop);

var padderSide = document.createElement('div');
padderSide.style.height = '100%';
padderSide.style.width = '100px';
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(padderSide);