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>

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js&callback=initMap"></script>

CSS

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

JavaScript

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

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

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

function renderWebsites(data) {

    $.each(data, function(index, website) {
    });
}