JSFiddle - React, Tailwind, and code Playground

by Suvi Vignarajah

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="map-canvas"></div>
<input id="toggle" type="checkbox"/>
<label for="toggle">Toggle</label>

CSS

#map-canvas{
    height: 500px;
    width: 700px;
}
.custom-controls {
    visibility : hidden;
}

JavaScript

$(document).ready(function(){
    //Create Map        
    var map;
    var mapOptions = 
    {
        zoom: 12,
        center: new google.maps.LatLng(38, -87.57),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        scaleControl: false,
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    //Create Control Buttons
    var pointSelDiv = document.createElement('div');
    var pointSelUi = document.createElement('div');
    var pointSelImg = document.createElement('img');
    var polySelDiv = document.createElement('div');
    var polySelUi = document.createElement('div');
    var polySelImg = document.createElement('img');
    var circSelDiv = document.createElement('div');
    var circSelUi = document.createElement('div');
    var circSelImg = document.createElement('img');
    pointSelDiv.index = 1;
    pointSelDiv.style.padding = '5px';
    pointSelUi.style.cursor = 'pointer';
    pointSelUi.title = 'Select by point';
    $(pointSelImg).attr('src', 'http://development.advncs.com/dev/gis/mapviewer/assets/icons/pointsel.png');
    pointSelDiv.appendChild(pointSelUi);
    pointSelUi.appendChild(pointSelImg);
    $(pointSelDiv).addClass('custom-controls');
    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(pointSelDiv);
    polySelDiv.index = 2;
    polySelDiv.style.padding = '5px';
    polySelUi.style.cursor = 'pointer';
    polySelUi.title = 'Select by polygon';
    $(polySelImg).attr('src', 'http://development.advncs.com/dev/gis/mapviewer/assets/icons/polysel.png');
    polySelDiv.appendChild(polySelUi);
   ...