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/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js"></script>
<div id="bounds"></div>
<div id="CAbounds"></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

var mapLabels = [];
var CanadaBounds = new google.maps.LatLngBounds();
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': "Canada"
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            CanadaBounds = results[0].geometry.viewport;
            map.fitBounds(results[0].geometry.viewport);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
    google.maps.event.addListener(map, 'bounds_changed', function () {
        var bounds = map.getBounds();
        var south = bounds.getSouthWest().lat();
        if (south < CanadaBounds.getSouthWest().lat()) 
            south = CanadaBounds.getSouthWest().lat();
        var west = bounds.getSouthWest().lng();
        if (west < CanadaBounds.getSouthWest().lng()) 
            west = CanadaBounds.getSouthWest().lng()
        var north = bounds.getNorthEast().lat();
        if (north > 85) north = 85;
        var east = bounds.getNorthEast().lng();
        if (east > CanadaBounds.getNorthEast().lng())
            east = CanadaBounds.getNorthEast().lng();
        document.getElementById('bounds').innerHTML = bounds.toUrlValue(6);
        var urlStr = "http://api.geonames.org/citiesJSON?formatted=true&south=" + south.toFixed(6) + "&west=" + west.toFixed(6) + "&north=" + north.toFixed(6) + "&east=" + east.toFixed(6) + "&lang=en&username=geocodezip&style=full";
        $.getJSON(urlStr, function (data) {
            bounds = new google.maps.LatLngBounds();

            for (var i = 0; i < data.geonames.length; i++) {
                if (data.geonames[i].countrycode !=...