Maps API v3 Directions dotted polyline

Draw a dotted polyline for map Directions with infoWindow

by Alex Azuero

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 400px;
}

JavaScript

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var infoWindow = new google.maps.InfoWindow();

function initialize() {

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

    var polylineDotted = new google.maps.Polyline({
        strokeColor: '#0eb7f6',
        strokeOpacity: 0,
        fillOpacity: 0,
        icons: [{
            icon: lineSymbol,
            offset: '0',
            repeat: '10px'
        }],
    });

    var rendererOptions = {
        map: map,
        suppressMarkers: false,
        polylineOptions: polylineDotted
    };

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    var center = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    directionsDisplay.setMap(map);

    var start = "Lafayette Avenue 212, New York City";
    var end = "Myrtle Avenue 11612, New York City";
    var method = 'DRIVING';
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode[method]
    };

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var iwContent = response['routes'][0].legs[0].distance.text + '<br />' + response['routes'][0].legs[0].duration.text;
            infoWindow.setContent(iwContent);
        }
    });

    google.maps.event.addListener(polylineDotted, 'click', function (event) {

        infoWindow.setPosition(event.latLng);
        infoWindow.open(map, this);
    });

    google.maps.event.addListener(map, 'click', function () {

        infoWindow.close();
    });
}

initialize();