JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the BlankMapType displays blank gray tiles coordinates.
 */

/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function BlankMapType() {}

BlankMapType.prototype.tileSize = new google.maps.Size(256, 256);
BlankMapType.prototype.maxZoom = 19;

BlankMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('div');
    // div.innerHTML = coord;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.fontSize = '10';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '0px';
    div.style.borderColor = '#AAAAAA';
    div.style.backgroundColor = '#E5E3DF';
    return div;
};

BlankMapType.prototype.name = 'Blank';
BlankMapType.prototype.alt = 'Blank Map Type';

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var blankMapType = new BlankMapType();

function initialize() {
    var mapOptions = {
        zoom: 10,
        center: chicago,
        streetViewControl: false,
        mapTypeId: 'blank',
        mapTypeControlOptions: {
            mapTypeIds: ['blank', google.maps.MapTypeId.ROADMAP],
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    google.maps.event.addListener(map, 'maptypeid_changed', function () {
        var showStreetViewControl = map.getMapTypeId() != 'blank';
        map.setOptions({
            'streetViewControl': showStreetViewControl
        });
    });

    // Now attach the coordinate map type to the map's registry
    map.mapTypes.set('blank', blankMapType);
    setMarkers(map, beaches);
}
/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
   ...