JSFiddle - React, Tailwind, and code Playground

by theraccoonbear

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 500px; width: 100%;"></div>
<div id="controls">
    <input type="button" id="dropPins" value="Drop Pins">
    <input type="button" id="hidePins" value="Hide Pins" disabled="true">
</div>
<div id="log"></div>

JavaScript

var points = [];
var map = null;
var total_pins = 500;

$(function() {

    var log = function(m) {
        $('#log').append(m + '<br>');
    };
    
    var initMap = function() {
        var mapOptions = {
            zoom: 4,
            center: {lat: 37.1459987, lng: -95.2694922},
            panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            mapTypeId: 'mystyle'
        };
        
        var myStyle = [
            {
                "featureType": "road",
                "elementType": "geometry",
                "stylers": [
                    { "visibility": "off" }
                ]
            },{
                "featureType": "administrative.locality",
                "stylers": [
                    { "visibility": "off" }
                ]
            },{
                "featureType": "poi",
                "stylers": [
                    { "visibility": "off" }
                ]
            },{
                "featureType": "administrative.country",
                "elementType": "labels",
                "stylers": [
                    { "visibility": "off" }
                ]
            }
        ];

	    map = new google.maps.Map(document.getElementById('map_div'), mapOptions);

	    map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));  
    };
    
    var generatePoints = function() {
        points = [];
        for (var i = 0; i < total_pins; i++) {
            var lng = -((Math.random() * 50) + 70);
            var lat = (Math.random() * 20) + 30;
            var latLng = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                position: latLng,
                map: null,
                animation: google.maps.Animation.DROP,
                optimized: false
            });
                
         ...