JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry&amp;key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="float:left;width:100%;height:100%;"></div>

CSS

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

JavaScript

var map;
var origLoc = new google.maps.LatLng(45, -85);

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(33.811192,-115.032444),
        zoom: 3
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);


    limitCoord = [
    new google.maps.LatLng(12.982854,77.636325),
    new google.maps.LatLng(12.979466, 77.635510),
    new google.maps.LatLng(12.981097, 77.640574),
    new google.maps.LatLng(12.980781, 77.645423),
    new google.maps.LatLng(12.978565, 77.650831),
    new google.maps.LatLng(12.973839, 77.651989),
    new google.maps.LatLng(12.968612, 77.653019),
    new google.maps.LatLng(12.965367, 77.648149),
    new google.maps.LatLng(12.964865, 77.641540),
    new google.maps.LatLng(12.967960, 77.634244),
    new google.maps.LatLng(12.963779,77.631755)];

    var bounds = new google.maps.LatLngBounds();
    var gmarkers = [];
    for (var i = 0; i < limitCoord.length; i++) {
        bounds.extend(limitCoord[i]);
        var marker = new google.maps.Marker({
            position: limitCoord[i],
            title: "marker " + i,
            draggable: true,
            map: map,
            arrayIdx: i
        });
        gmarkers.push(marker);
    }
    var boundsUpdate = new google.maps.LatLngBounds();
    // boundsCenter.setPosition(new google.maps.LatLng(12.976369,77.65406));

    gmarkers[0].setIcon("http://maps.google.com/mapfiles/ms/icons/blue.png");
    gmarkers[6].setIcon("http://maps.google.com/mapfiles/ms/icons/blue.png");
    gmarkers[10].setIcon("http://maps.google.com/mapfiles/ms/icons/blue.png");
    gmarkers[10].setPosition(new google.maps.LatLng(35.689488,139.69170)); // Tokyo
    gmarkers[0].setPosition(new google.maps.LatLng(47.60621,(360-122.332071),true)); // Seattle
    gmarkers[6].setPosition(new google.maps.LatLng(30.820807,-123.749998)); // IDL
    // boundsCenter.setPosition(new google.maps.LatLng(46.735093,159.568125,true));

    var coord1 = new...