JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div id="mapDiv" style="width: 500px; height: 375px; border: solid 2px #666;">
</div>

JavaScript

function getBoundsZoomLevel(bounds, mapDim) {
    var GLOBE_HEIGHT = 256;
    var GLOBE_WIDTH = 256;

    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var latAngle = ne.lat() - sw.lat();
    if (latAngle < 0) {
        latAngle += 360;
    }

    var lngAngle = ne.lng() - sw.lng();

    var latZoomLevel = Math.floor(Math.log(mapDim.height * 180 / latAngle / GLOBE_HEIGHT) / Math.LN2);
    var lngZoomLevel = Math.floor(Math.log(mapDim.width * 360 / lngAngle / GLOBE_WIDTH) / Math.LN2);

    return (latZoomLevel < lngZoomLevel) ? latZoomLevel : lngZoomLevel;
}

function createLatLngForPoint(point) {
    return new google.maps.LatLng(point.lat, point.lng);
}

function createMarkerForPoint(point) {
    return new google.maps.Marker({
        position: createLatLngForPoint(point)
    });
}

function createBoundsForMarkers(markers) {
    var bounds = new google.maps.LatLngBounds();
    $.each(markers, function() {
        bounds.extend(this.getPosition());
    });
    return bounds;
}

var $mapDiv = $('#mapDiv');

var mapDim = {
    height: $mapDiv.height(),
    width: $mapDiv.width()
}

var points = [
    { lat: 36.170603, lng: -114.577065 },
    { lat: 35.144478, lng: -115.33516959999997 }
];

var markers = [];
$.each(points, function() { markers.push(createMarkerForPoint(this)); });

var bounds = createBoundsForMarkers(markers);

var map = new google.maps.Map($mapDiv[0], {
    center: bounds.getCenter(),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: getBoundsZoomLevel(bounds, mapDim)
});

$.each(markers, function() { this.setMap(map); });

var projection = map.getProjection();