JSFiddle - React, Tailwind, and code Playground

by BaronGrivet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.2/tabletop.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer_compiled.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.2/tabletop.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer_compiled.js"></script>

<div id="website-map">

</div>

CSS

#website-map {
  width: 100%;
  height: 500px;
  background-color: #fff;
}

JavaScript

var map;
var websites = [];
var websiteWindows = [];
var bounds = [];
var centreLat = -41.272682;
var centreLng = 173.284228;
var zoomPercent = 0;

document.addEventListener('DOMContentLoaded', function () {
  if (document.querySelectorAll('#website-map').length > 0)
  {
    if (document.querySelector('html').lang)
      lang = document.querySelector('html').lang;
    else
      lang = 'en';

    var js_file = document.createElement('script');
    js_file.type = 'text/javascript';
    js_file.src = 'https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js&callback=initMap';
    document.getElementsByTagName('head')[0].appendChild(js_file);
  }
});

function initMap() {
//    resizeMap();
    map = new google.maps.Map(document.getElementById('website-map'), {
        center: {
            lat: centreLat,
            lng: centreLng          
        },
        zoom: 2
    });
    console.log('map rendered');
    getWebsites();
}

function getWebsites() {
    Tabletop.init({
        key: 'https://docs.google.com/spreadsheets/d/1101vJhpVv76leqcKtUgjuAV3Ce1KBZv8dYbKykTda2g/pubhtml',
        callback: function(data, tabletop) {
            renderWebsites(data);
        },
        simpleSheet: true
    });
}

function renderWebsites(data) {

    $.each(data, function(index, website) {
      var position = new google.maps.LatLng(parseFloat(website['Latitude']), parseFloat(website['Longitude']));
      websites[index] = new google.maps.Marker({
        position: position,
        map: map,
        draggable: false,
        optimized: false,
        zIndex: 9
    });
    });
  
  var markerCluster = new MarkerClusterer(map, websites, {
        maxZoom: 14,
        imagePath: 'https://www.upshift.co.nz/assets/us',
        styles: [
            {
                url: 'https://www.upshift.co.nz/assets/us1.png',
                height: 49,
                width: 49,
                fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif;',
               ...