JSFiddle - React, Tailwind, and code Playground

by Manan Patel

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="sidebar" class="sb_blue"></div>
<div id="map"></div>

CSS

#map {
    width:512px;
    height:512px;
    margin:10px;
}
#sidebar {
    float:left;
    margin:10px;
}
.sb_blue button {
    text-align: left;
    cursor:pointer;
    background-color: #99b3cc;
    font-family: Verdana;
    margin: 1px;
}
.sb_blue button:focus {
    background-color: #eee;
}
.sb_blue button:hover {
    background-color: #fff;
}

JavaScript

/**
 * map
 */
var mapOpts = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true,
    scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
//  We set zoom and center later by fitBounds()


/**
 * makeMarker() ver 0.2
 * creates Marker and InfoWindow on a Map() named 'map'
 * creates sidebar row in a DIV 'sidebar'
 * saves marker to markerArray and markerBounds
 * @param options object for Marker, InfoWindow and SidebarItem
 * @author Esa 2009
 */
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];

function makeMarker(options) {
    var pushPin = new google.maps.Marker({
        map: map
    });
    pushPin.setOptions(options);
    google.maps.event.addListener(pushPin, "click", function () {
        infoWindow.setOptions(options);
        infoWindow.open(map, pushPin);
        if (this.sidebarButton) this.sidebarButton.button.focus();
    });
    var idleIcon = pushPin.getIcon();
    if (options.sidebarItem) {
        pushPin.sidebarButton = new SidebarItem(pushPin, options);
        pushPin.sidebarButton.addIn("sidebar");
    }
    markerBounds.extend(options.position);
    markerArray.push(pushPin);
    return pushPin;
}

google.maps.event.addListener(map, "click", function () {
    infoWindow.close();
});


/**
 * Creates an sidebar item 
 * @constructor
 * @author Esa 2009
 * @param marker
 * @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,
 */

function SidebarItem(marker, opts) {
    var tag = opts.sidebarItemType || "button";
    var row = document.createElement(tag);
    row.innerHTML = opts.sidebarItem;
    row.className = opts.sidebarItemClassName || "sidebar_item";
    row.style.display = "block";
    row.style.width = opts.sidebarItemWidth || "120px";
    row.onclick = function () {
        google.maps.event.trigger(marker, 'click');
    }
    row.onmouseover = function () {
   ...