Google Maps Route Snap Demo With Custom Map Icons

by wholypantalones

HTML

<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<div id="map_canvas"></div>

CSS

#map_canvas {
    height: 500px;
    min-height:100%;
    width: 100%;
    overflow:hidden;
}

JavaScript

function init() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-33.417723, -70.605018),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    infowindow = new google.maps.InfoWindow();
    bounds = new google.maps.LatLngBounds();

    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(-33.417723, -70.605018),
        zIndex: 100,
        map: map,
        icon: {
            url: '//mt.google.com/vt/icon/text=1&psize=14&font=fonts/Roboto-Bold.ttf&color=FF5c1410&name=icons/spotlight/spotlight-waypoint-b.png&ax=44&ay=48&scale=1'
        },
        title: "Marker 1"
    });
    var marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(-33.022446, -71.551688),
        zIndex: 100,
        map: map,
        icon: {
            url: '//mt.google.com/vt/icon/text=2&psize=14&font=fonts/Roboto-Bold.ttf&color=ff135C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1'
        },
        title: "Marker 2"
    });
    var marker4 = new google.maps.Marker({
        position: new google.maps.LatLng(-32.75, -70.720812),
        zIndex: 100,
        map: map,
        icon: {
            url: '//mt.google.com/vt/icon/text=3&psize=14&font=fonts/Roboto-Bold.ttf&color=ff135C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1'
        },
        title:"Marker 3"
    });

    //FIRST POLYLINE SNAP TO ROAD

    ChileTrip1 = [
    new google.maps.LatLng(-33.417723, -70.605018), // m1
    new google.maps.LatLng(-33.022446, -71.551688), // m2
    new google.maps.LatLng(-32.75, -70.720812), // m3
    new google.maps.LatLng(-33.417723, -70.605018)]; // back to 1

    var traceChileTrip1 = new google.maps.Polyline({
        path: ChileTrip1,
        strokeColor: "red",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    var service1 = new google.maps.DirectionsService(),
    ...