JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>
<button onClick="runAllChainEvents();">Sign in</button>

CSS

html,body {
  height: 100%;
}
#map {
   height: 100%;
}

JavaScript

var neighborhoods = [
    {lat: -36.862338, lng: 174.7425013},
    {lat: -36.867204, lng: 174.7692113},
    {lat: -36.848362, lng: 174.7426733},
    {lat: -36.845028, lng: 174.7748043},
    {lat: -36.862644, lng: 174.7340973},
    {lat: -36.862775, lng: 174.7836023}
];
var markers =[];
var map;
var dabblers = "https://maps.google.com/mapfiles/ms/micons/blue.png";
var yourLocation = "https://maps.google.com/mapfiles/ms/micons/red.png";
var myLocationIconArray = [];
var hasHappened = false;
var infoWindowContentString = '';
var dabblerInfoWindow = null;
var addInfowindow;
var distanceArray = [];
var defaultPos = {lat: -36.8527785, lng: 174.7617562};
var centerPos;

var dabblersArray = [
    {lat: -36.862338, lng: 174.7425013, type: 'sweet'},
    {lat: -36.867204, lng: 174.7692113, type: 'sweet'},
    {lat: -36.848362, lng: 174.7426733, type: 'sweet'},
    {lat: -36.845028, lng: 174.7748043, type: 'savoury'},
    {lat: -36.862644, lng: 174.7340973, type: 'savoury'},
    {lat: -36.862775, lng: 174.7836023, type: 'savoury'}
];

/* Initializes map with custom styles, centers location, 
   and defines Map UI */
function initMap() {
    var customMapType = new google.maps.StyledMapType([
        {
          stylers: [
            {hue: '#8c8c8c'},
            {visibility: 'simplified'}
          ]
        },
        {
          elementType: 'labels',
          stylers: [{visibility: 'off'}]
        },
        {
          elementType: 'landscape',
          stylers: [{color: '#e6e6e6'}]
        },
        {
          featureType: 'road',
          stylers: [{color: '#ffffff'}]
        },
        {
          featureType: 'road.highway.controlled_access',
          stylers: [{color: '#cccccc'}]
        },
        {
          featureType: 'road.arterial',
          stylers: [{color: '#cccccc'}]
        },
        {
          featureType: 'water',
          stylers: [
            {color: '#dce6e6'},
            {"lightness": -10},
            {"saturation": -30}
          ]
 ...