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

CSS

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

JavaScript

var map = null;
var markersArray = [];
var markers = [];
var openedInfoWindow = "";
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();

markersArray.push({
    "title": 'marker 0',
        "address": 'New York,NY',
        "displayaddress": 'New York, NY',
        "linkurl": 'http://google.com'
});
markersArray.push({
    "title": 'marker 1',
        "address": 'Boston, MA',
        "displayaddress": 'Boston, MA',
        "linkurl": 'http://yahoo.com'
});
markersArray.push({
    "title": 'marker 2',
        "address": 'Newark,NJ',
        "displayaddress": 'Newark, NJ',
        "linkurl": 'http://mapquest.com'
});
google.maps.event.addDomListener(window, "load", initialize);

function initialize() {

    var mapOptions = {

        zoom: 8,
        center: new google.maps.LatLng(64.85599578876611, -147.83363628361917),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapInfoManual"),
    mapOptions);

    google.maps.event.addListener(map, 'zoom_changed', function () {
        zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function (event) {
            if (this.getZoom() > 20) // Change max/min zoom here
            this.setZoom(18);

            google.maps.event.removeListener(zoomChangeBoundsListener);
        });
    });
    addMarker();
}

function addMarker() {

    var bounds = new google.maps.LatLngBounds();
    for (i = 0; i < markersArray.length; i++) {
        CodeAddress(markersArray[i]);
    }
}

// Address To Marker
function CodeAddress(markerEntry) {
    var mytitle = (markerEntry['title']);
    var myaddress = (markerEntry['displayaddress']);
    var linkurl = (markerEntry['linkurl']);
    geocoder.geocode({
        'address': markerEntry['address']
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position:...