JSFiddle - React, Tailwind, and code Playground

by Maarten Peels

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;bogusParam=.js"></script>
<div id="map-canvas" style="width:500px; height:500px;"></div>
<div id="directions-results"></div>

JavaScript

var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
  };

function initialize() {
    var gm = google.maps,
        mapOptions = {
            center: new gm.LatLng(40.78594004825638, -73.9598509460327),
            zoom: 14,
            mapTypeId: gm.MapTypeId.ROADMAP,
            disableDefaultUI: false
        },
        map = new gm.Map(document.getElementById('map-canvas'), mapOptions),
        polylineOptionsActual = new gm.Polyline({
            strokeColor: '#9f98FF',
            //strokeWeight: 5,
            strokeOpacity: 0,
            icons: [{
              icon: lineSymbol,
              offset: '0',
              repeat: '10px'
            }],
        }),
        rendererOptions = {
            map: map,
            suppressMarkers: false,
            polylineOptions: polylineOptionsActual
        },
        directionsService = new gm.DirectionsService(),
        directionsDisplay = new gm.DirectionsRenderer(rendererOptions);
    directionsDisplay.setPanel(document.getElementById('directions-results'));

    function getDirections() {
        var request = {
            origin: new gm.LatLng(40.7982413, -73.94613079999999),
            destination: new gm.LatLng(40.7753276, -73.9497867),
            travelMode: gm.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == gm.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
    getDirections();
}

google.maps.event.addDomListener(window, 'load', initialize);