JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="mapitems"></div>

CSS

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

JavaScript

$(document).ready(function() {
  var customMap = new CustomMap('mapitems', 42, -72, 10);
  customMap.init();
  customMap.setMarkers();
});

function CustomMap(mapId, defaultLat, defaultLng, defaultZoom)
{
    this.map = null;
    this.markerBounds = null;
    this.$mapContainer = document.getElementById(mapId);
    this.defaultLat = (defaultLat ? defaultLat : '-36.848460');
    this.defaultLng = (defaultLng ? defaultLng : '174.763332');
    this.defaultZoom = (defaultZoom ? defaultZoom : 15);
}

CustomMap.prototype.init = function() {
    var position = new google.maps.LatLng(this.defaultLat, this.defaultLng);
    this.map = new google.maps.Map(this.$mapContainer, {
        scrollwheel: true,
        mapTypeId: 'roadmap',
        zoom: this.defaultZoom,
        position: position
    });
    this.markerBounds = new google.maps.LatLngBounds();
};

CustomMap.prototype.setMarkers = function() {
    var that = this;
    // $.get('/locations.json', null, function(locations) {
        for (var i = 0; i < locations.length; i++) {
            that.processMarker(locations[i]);
        }
        that.map.fitBounds(that.markerBounds);
    // }, 'json');
};

CustomMap.prototype.processMarker = function(data) {
    if (data.lat && data.lng) {
        var position = new google.maps.LatLng(data.lat, data.lng);
        this.markerBounds.extend(position);
        var marker = this.getMarker(position);
        this.setInfoWindow(marker, data);
    }
};

CustomMap.prototype.getMarker = function(position) {
    return new google.maps.Marker({
        map: this.map,
        draggable:false,
        position: position
    });
};

CustomMap.prototype.setInfoWindow = function(marker, data) {
    var that = this;
    marker.infoWindow = new google.maps.InfoWindow({
        content: that.buildInfoHtml(data)
    });
    google.maps.event.addListener(marker, 'click', function() {
        marker.infoWindow.open(that.map, marker);
    });
};

CustomMap.prototype.buildInfoHtml = function(data)...