JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

CSS

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

JavaScript

function randLatLng() {
        return new google.maps.LatLng(((Math.random() * 17000 - 8500) / 100), ((Math.random() * 36000 - 18000) / 100));
    }
    var colors = ['tomato', 'GreenYellow ', 'Chartreuse', 'yellow', 'cyan', 'orange', 'white', 'coral', 'fuchsia', 'GoldenRod', 'transparent'];


    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(0, 0),
            zoom:2
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
        var style = document.createElement('style');
        style.markers = [];
        document.getElementsByTagName('head')[0].appendChild(style);
        colors.forEach(function (color) {
            var marker = new google.maps.Marker({
                optimized: false,
                draggable: true,
                map: map,
                title:color,
                position: randLatLng(),
                icon: 'http://maps.gstatic.com/mapfiles/markers2/drag_cross_67_16.png#' + color
            })
            var selector = ['#', map.getDiv().id, ' img[src="', marker.getIcon(), '"]'].join('');
            if (style.markers.indexOf(selector) < 0) {
                style.markers.push(selector);
                style.sheet.insertRule([selector, '{background-color:', color, ';}'].join(''), 0);
            }

        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);