Google Maps - Polyline

by hmahida

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=drawing&amp;dummy=.js"></script>
<div id="map_canvas"></div>

CSS

#map_canvas {
    width:100%;
    height:100vh;
    border: 1px solid #4D2722;
}

JavaScript

//
// Consider the new Data Layer before using Polyline!
// https://developers.google.com/maps/documentation/javascript/datalayer
//


$(function () {
    var myLatlng = new google.maps.LatLng(44.60, -79.42);
    var myOptions = {
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Define the custom symbols. All symbols are defined via SVG path notation.
    // They have varying stroke color, fill color, stroke weight,
    // opacity and rotation properties.
    var symbolOne = {
        path: 'M -2,0 0,-2 2,0 0,2 z',
        strokeColor: '#F00',
        fillColor: '#F00',
        fillOpacity: 1
    };

    var symbolTwo = {
        path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
        strokeColor: '#00F',
        rotation: 33
    };

    var symbolThree = {
        path: 'M -2,-2 2,2 M 2,-2 -2,2',
        strokeColor: '#292',
        strokeWeight: 4
    };


    var line = new google.maps.Polyline({
        path: [
        new google.maps.LatLng(44.60778, -79.42986),
        new google.maps.LatLng( 44.60791, -79.42952),
        new google.maps.LatLng(44.60797, -79.42889),
        new google.maps.LatLng(44.60803, -79.42697)],
        strokeColor: "#EE0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        cid: '1234',
        map: map,
      
    });

    google.maps.event.addListener(line, 'click', function (event) {
        alert('CID: ' + line.cid);
    });

});