Onclick Polyline

by Shreerang Patwardhan

HTML

<html>
<head>
<title>Google Maps API v3 : On-click polyline</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
</head>
<body onload="initialize()">
<div id="map" style="height: 230px; width: 530px"></div>
</body>
</html>

JavaScript

var poly;
var map;

function initialize()
{
    map = new google.maps.Map(document.getElementById('map'),
    {
        zoom: 14,
        center: new google.maps.LatLng(12.303022,76.644917),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    poly = new google.maps.Polyline(
    {
        strokeColor: '#00ABD3',
        strokeOpacity: 1.0,
        strokeWeight: 3
    });
    poly.setMap(map);

    google.maps.event.addListener(map, 'click', addLatLng);
}

function addLatLng(event)
{
    var path = poly.getPath();
    path.push(event.latLng);
   
    var marker = new google.maps.Marker(
    {
        position: event.latLng,
        title: '#' + path.getLength(),
        map: map
    });
}