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>
<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)
  {
    var js_file2 = document.createElement('script');
    js_file2.type = 'text/javascript';
    js_file2.src = 'https://www.upshift.co.nz/scripts/infobox.js';
    document.getElementsByTagName('head')[0].appendChild(js_file2);
 
  
    var js_file1 = document.createElement('script');
    js_file1.type = 'text/javascript';
    js_file1.src = 'https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js&callback=initMap';
    document.getElementsByTagName('head')[0].appendChild(js_file1);
	}
});

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) {

		var markerImage = new google.maps.MarkerImage('https://www.upshift.co.nz/assets/us0.png', new google.maps.Size(52, 52), new google.maps.Point(0, 0), new google.maps.Point(26, 26));

    $.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,
        icon: markerImage,
        draggable: false,
        content: document.getElementById('website' + index),
        optimized: false,
        zIndex: 9
    	});
      
     ...