Web Tutorials

Interview Q & A

Code Examples

Utility Tools

Add Polyline onMouseClick Event With Markers on Google Maps

In this example you will learn how to add complex polylines on click with markers in google map.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

var draw_polyline = new google.maps.Polyline({    
    path: triangle_coordinates,    
    geodesic: false,    
    strokeColor: '#FF0000',    
    strokeOpacity: 2.0,    
    strokeWeight: 3    
  });

Add Polyline onMouseClick Event With Markers on Google Maps Example

<!DOCTYPE html>  
<html>  
  <head>  <!-- www.techstrikers.com -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
    <meta charset="utf-8">  
    <title>Add Complex Polylines on onClick</title>  
    <style>  
      html, body {  
        height: 100%;  
        margin: 0;  
        padding: 0;  
      }  
      #map {  
        height: 99%;
        width: 99%;
      }  
    </style>  
        <script async defer  
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>  
         <script>  

var poly;  
var map;  
  
function initMap() {  
 var lat_lng = {lat: 22.08672, lng: 79.42444};     
  map = new google.maps.Map(document.getElementById('map'), {      
    zoom: 6,      
    center: lat_lng,      
    mapTypeId: google.maps.MapTypeId.TERRAIN      
  });  
  
  poly = new google.maps.Polyline({  
    strokeColor: '#FF0000',  
    strokeOpacity: 1.0,  
    strokeWeight: 3  
  });  
  poly.setMap(map);  
  
  // Add a listener for the click event  
  map.addListener('click', addLatLng);  
}  
  
// Add a new point to the Polyline.  
function addLatLng(event) {  
  var path = poly.getPath();    
  path.push(event.latLng);  
  
  // Add a new marker at the new plotted point on the polyline.  
  var marker = new google.maps.Marker({  
    position: event.latLng,  
    title: '#' + path.getLength(),  
    map: map  
  });
}  
    </script>  
  </head>  
  <body>  
    <div id="map"></div>  
  </body>  
</html>  

Above example will produce following output