JSFiddle - React, Tailwind, and code Playground

by tcloninger

HTML

<!doctype html>
<!-- Hello! I am Marc Grabanski, you can find me at -> http://marcgrabanski.com -->
<html>
    <head>
        <title>Google Maps and jQuery</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://github.com/1Marc/jQuery-UI-on-Google-Maps/raw/master/jquery-ui-themswitcher.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/flick/jquery-ui.css" rel="stylesheet">
    </head>
    <body>
        <div id="themes"></div>
        <div id="map"></div>
        <div id="list"></div>
        
        <div id="dialog" title="Dialog Title Goes Here" style="display:none;">
            <p>Content of the dialog</p>
        </div>
        
        <ul id="accordion-template" class="accordion" style="display:none;"> 
            <div> 
                <h3><a href="#">First</a></h3> 
                <div>Point <span class="index">x</span>.</div>
            </div> 
            <div> 
                <h3><a href="#">Second</a></h3> 
                <div>Test content <a href="#" class="dialog">dialog link</a>.</div>
            </div> 
            <div> 
                <h3><a href="#">Third</a></h3> 
                <div>Nam dui erat, auctor a, dignissim quis.</div> 
            </div> 
        </div>
        
        <div id="tabs-template" class="tabs" style="display:none">
            <ul>
                <li><a href="#test1">Test1</a></li>
                <li><a href="#test2">Test2</a></li>
                <li><a href="#test3">Test3</a></li>
            </ul>
            <div id="test1">
                <p>You are at point #<span class="index">x</span></p>
            </div>
            <div id="test2">
                <p>This is some <a href="#" class="dialog">dialog link</a>.</p>
            </div>
            <div id="test3">
                <p>There is more content that goes...

CSS

body { font-size:16px; }
#map { float:left; width:500px; height:500px; margin-top:10px; }
#message, #list { position:absolute; }
#list li { list-style:none; padding:3px; margin-bottom:2px; }
#list li:hover { cursor:pointer; cursor:hand; }
#controls { position: relative; }
.accordion, .tabs { font-size:12px!important; width:220px; }
.ui-dialog, .ui-slider { font-size:12px!important; }
.icon { float:left; position:absolute; cursor:pointer; cursor:hand; padding:3px; }

JavaScript

$(function(){
  
  var burnsvilleMN = new google.maps.LatLng(44.797916,-93.278046);
    // Creating a map
  var map = new google.maps.Map($('#map')[0], {
    zoom: 8,
    center: burnsvilleMN,
    // disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
/*
  var mapStyle = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { invert_lightness: true }
      ]
    },{
      featureType: "road",
      elementType: "all",
      stylers: [
        { hue: "#0800ff" }
      ]
    },{
      featureType: "poi",
      elementType: "all",
      stylers: [
        { hue: "#1900ff" }
      ]
    },{
      featureType: "water",
      elementType: "all",
      stylers: [
        { hue: "#0008ff" }
      ]
    }
  ];
  
  var mapTheme = new google.maps.StyledMapType(mapStyle, { name: "Custom Map Theme" });
  map.mapTypes.set('maptheme', mapTheme);
  map.setMapTypeId('maptheme');
*/
  
  var boundsChange = google.maps.event.addListener(map, "bounds_changed", function() {
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        var markers = [];
        for (var i = 0; i < 10; i++) {
        var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
            southWest.lng() + lngSpan * Math.random());
            var marker = new google.maps.Marker({
          position: latLng,
          map: map
      });
    
            markers[i] = marker;
        }
        google.maps.event.removeListener(boundsChange);
        
        /*
        $(markers).each(function(i,marker){
            $("<li />").addClass('ui-state-default ui-corner-all')
                .html("Point "+i)
                .click(function(){
                    message.open(marker, i);
                })
                .appendTo("#list");

        ...