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" style="border: 2px solid #3872ac;"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
var locations = [
                ['Italy 3', 45.343294, 8.853324, 16],
                ['Italy 2', 44.534529, 10.303519, 15],
                ['Italy 1', 41.416810, 15.313285, 14],
                ['Bulgaria', 42.235462, 23.838675, 13],
                ['Albania', 41.317868, 20.147269, 12],
                ['Turkey 2', 39.714402, 32.803519, 11],
                ['Turkey 1', 37.968918, 29.200003, 10],
                ['Romania 2', 44.251917, 25.464652, 9],
                ['Romania 1', 45.651325, 22.476371, 8],
                ['Bosnia', 43.872979, 17.246879, 7],
                ['Serbia', 43.841292, 20.718558, 6],
                ['Athens', 37.977984, 23.741343, 4],
                ['Istanbul', 41.2440257, 29.0616179, 5],
                ['Rome', 41.851999, 12.555716, 3],
                ['Berlin', 52.481801, 13.291800, 2],
                ['Beirut', 33.787747, 35.796924, 1]
            ];

            var infowindow = new google.maps.InfoWindow();

            var marker, i;
var bounds = new google.maps.LatLngBounds();
            for (i = 0; i < locations.length; i++) {
                var markernumber = Math.floor((Math.random() * 100) + 1);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + markernumber + '|F6DD0E|000000'
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i, markernumber) {
                    return function() {
                        infowindow.setContent(locations[i][0] + '<br>There are ' + markernumber + ' stories.');
    ...