JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/infobox.js"></script>
<div id="bounds"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

CSS

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

JavaScript

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        styles: [{
            "featureType": "administrative.locality",
                "elementType": "labels",
                "stylers": [{
                "visibility": "off"
            }]
        }]
    });
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': "Brazil"
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // map.fitBounds(results[0].geometry.viewport);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
    google.maps.event.addListener(map, 'zoom_changed', function () {
        for (var i = 0; i < mapLabels.length; i++) {
            if (map.getZoom() > 5) {
                mapLabels[i].setVisible(true);
            } else {
                mapLabels[i].setVisible(false);
            }
        }
    });
    google.maps.event.addListener(map, 'bounds_changed', function () {
        document.getElementById('bounds').innerHTML = map.getBounds().toUrlValue(6);
    });
    var bounds = new google.maps.LatLngBounds();
    var mapLabels = [];

    for (var i = 0; i < citiesJSON.geonames.length; i++) {
        var marker = new google.maps.Marker({
            position: {
                lat: citiesJSON.geonames[i].lat,
                lng: citiesJSON.geonames[i].lng
            },
            // map:map,
            title: citiesJSON.geonames[i].name
        });
        bounds.extend(marker.getPosition());
        var myOptions = {
            content: citiesJSON.geonames[i].name,
            boxStyle: {
                border: "none",
                textAlign: "center",
                fontSize: "8pt",
                width: "100px"
            },
            disableAutoPan: true,
            pixelOffset: new google.maps.Size(-50, 0),
            position: new...