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: 512px; border: solid 2px #666;">
</div>

JavaScript

function latArc(lat) {
    var x = Math.sin(lat * Math.PI / 180);
    return Math.log((1 + x) / (1 - x)) / 2;
}

function latFraction(lat1, lat2) {
    var latArc1 = latArc(lat1);
    var latArc2 = latArc(lat2);

    console.log('85.05: ' + latArc(85.05112877980658));
    console.log('PI   : ' + Math.PI);
    console.log('==============');
    
    return fraction = (latArc1 - latArc2) / latArc(85.05);
}

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

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

    var latAngle = latFraction(ne.lat(), sw.lat());
    //console.log('latAngle: ' + latAngle);

    //console.log('s: ' + Math.log((mapDim.height / GLOBE_HEIGHT) / latAngle) / Math.LN2);

    var latZoomLevel = Math.floor(Math.log((mapDim.height / GLOBE_HEIGHT) / latAngle) / Math.LN2);

    //console.log('latZoomLevel: ' + latZoomLevel);

    return latZoomLevel;
}

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: 1, lng: -100 },
    { lat: 0, lng: -100 }
];

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 OFFSET = 268435456;
var RADIUS = OFFSET / Math.PI;

var lat = -85.051097723;
var x = OFFSET -...