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>
<div id="mapcanvas" style="width:100%;height:100%;"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    suppressMarkers: true
});
var directionsService = new google.maps.DirectionsService();
var map;
var infowindow = new google.maps.InfoWindow();

function initMap(locations) {
    function calcRoute(latdest, lngdest) {
        var start = new google.maps.LatLng(-23.571064, -46.645424);
        var end = new google.maps.LatLng(latdest, lngdest)
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
                infowindow.setContent(directionsDisplay.directions.routes[0].legs[0].distance.text + " - " + directionsDisplay.directions.routes[0].legs[0].duration.text);
            }
        });
    }
    map = new google.maps.Map(document.getElementById('mapcanvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-23.571064, -46.645424),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    directionsDisplay.setMap(map);

    var marker, i;
    var image = null;
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                calcRoute(locations[i][1], locations[i][2]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
google.maps.event.addDomListener(window, 'load', function () {
    initMap([
        ["Vila Noemia", -23.670237, -46.467286],
        ["Osasco", -23.535465, -46.794234],
        ["Guarulhos", -23.458911, -46.526912]
    ]);
});