JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.0&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var map;
var wyPts = [];



function addWayPoints(location) {
    wyPts.push({
        location: location,
        stopover: true
    });
}

function createInfoWindowContent(latLng, contentStr) {
    var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng;
    return content;
}


function displayRoute(origin, destination, service, display) {
    service.route({
        origin: origin,
        destination: destination,
        //waypoints: [{location: new google.maps.LatLng(30.439025, -97.685654)}, {location: new google.maps.LatLng(30.434882, -97.677015)} , {location:new google.maps.LatLng(30.429495, -97.675274)}],
        waypoints: wyPts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function (response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            display.setDirections(response);
        } else {
            alert('Could not display directions due to: ' + status);

        }
    });
}


function initMap() {


    //////////source  destination and middle waypoints

    var src = new google.maps.LatLng(30.444719, -97.686202); // //school
    //addWayPoints(src);
    var midPt1 = new google.maps.LatLng(30.439025, -97.685654); // 
    addWayPoints(midPt1);
    var midPt2 = new google.maps.LatLng(30.434882, -97.677015); // 
    addWayPoints(midPt2);
    var midPt3 = new google.maps.LatLng(30.429495, -97.675274); // 
    addWayPoints(midPt3);


    /* for (var i = 0; i < wyPts.length; i++) {
                alert("pts are : " + wyPts[i].location);
            } */

    var destination = new google.maps.LatLng(30.401820, -97.669545); //


    ///////////draw the map
    map = new google.maps.Map(document.getElementById('map'), {
        center: src,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT,
            mapTypeIds: [google.maps.MapTypeId.ROADMAP,
 ...