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 }); }
<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>