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>
<table border="1">
    <tr>
        <td>
            <div id="map_canvas"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="info"></div>
        </td>
    </tr>
</table>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%
}
#map_canvas {
    height: 400px;
    width: 100%;
}
tr,td,tbody, table {
    height: 100%;
    width: 100%;
}
}

JavaScript

var service = new google.maps.DistanceMatrixService();
var places = [{
    address: "New York, NY",
    lat: 40.7143528,
    lng: -74.0059731
}, {
    address: "Tampa, FL",
    lat: 27.950575, 
    lng: -82.4571776
}, {
    address: "Newark, NJ",
    lat: 40.735657,
    lng: -74.1723667
}, {
    address: "Boston, MA",
    lat: 42.3584308,
    lng: -71.0597732
}, {
    address: "Baltimore, MD",
    lat: 39.2903848, 
    lng: -76.6121893
}];
var foundlatlng = new google.maps.LatLng(40.65, -73.95); // Brooklyn, NY
var gotoLoc = [];
for (var i = 0; i < places.length; i++) {
    gotoLoc.push(new google.maps.LatLng(places[i].lat, places[i].lng));
}
var service = new google.maps.DistanceMatrixService(); //request distance matrix
var outputdiv = document.getElementById('info');

//     var goto = new google.maps.LatLng(places[i].lat, places[i].lng);
function callback(response, status) {
    var distancefield = distancefield;
    if (status == google.maps.DistanceMatrixStatus.OK) {
        var origins = response.originAddresses;
        var destinations = response.destinationAddresses;
        var htmlString = "<table border='1'>";
        var bounds = new google.maps.LatLngBounds();
        for (var c = 0; c < response.rows.length; c++) {
        var results = response.rows[c].elements;
        for (var r = 0; r < results.length; r++) {
            var element = results[r];
            var distancetext = element.distance.text;
            var durationtext = element.duration.text;
            var to = destinations[r];
            htmlString += "<tr><td>" +(r+1)+"</td><td>"+ places[r].address+"</td><td>"+ response.originAddresses[c] + "</td><td>" + to + "</td><td>" + distancetext + "</td><td>" + durationtext + "</td></tr>";
            var marker = new google.maps.Marker({
                icon:'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker' + (r + 1) + '.png',
                position: {lat:places[r].lat,lng:places[r].lng},
                map:map
     ...