JSFiddle - React, Tailwind, and code Playground

by nicolas tenorio

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            #map_canvas {
                height: 560px;
                width: 100%
            }
            #map_canvas img {
                max-width: none;
            }
            #map_canvas div {
                -webkit-transform: translate3d(0, 0, 0);
            }
        </style>
        <title>Google Maps JavaScript API v3 Example: Map Simple</title>
        <link rel="stylesheet"
        href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"
        />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(41.875696, -87.624207),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    var ctaLayer = new google.maps.KmlLayer('http://190.216.202.35/control/patios.kml');
    ctaLayer.setMap(map);
    google.maps.event.addListener(ctaLayer, 'click', function (kmlEvent) {
        alert(kmlEvent.featureData.name);
    });
}
        </script>
    </head>
    
    <body onload="initialize()">
        <div data-role="page">
            <div data-role="header" data-position="fixed">
                 <h1>Title</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                <div id="map_canvas"></div>
            </div>
            <!-- /content -->
            <div data-role="footer" data-position="fixed">
                
<h4>Page Footer</h4>

            </div>
            <!-- /header -->
       ...