title: Add dynamic line using angular2 google maps
body: <p>I am currently using <strong><a href="https://github.com/SebastianM/angular2-google-maps" rel="nofollow noreferrer">https://github.com/SebastianM/angular2-google-maps</a></strong> Angular Google Maps link attached, my requirement is to draw dynamic line using <strong>agm-polyline</strong>  when user clicks the button it places a point on map with latitude and longitude, now i want to draw a path using the same linee:
  my sample is</p>
  
  <p><strong>app.html</strong></p>
  
  <pre><code>        &lt;button (click)="add()"&gt;Add Line&lt;/button&gt;
  &lt;agm-map [latitude]="lat" [longitude]="lng" [panControl]="true" [usePanning]="true" [rotateControl]="true"&gt;
          &lt;agm-marker [latitude]="lat" [longitude]="lng"&gt;
          &lt;/agm-marker&gt;
        &lt;/agm-marker&gt;
                &lt;agm-polyline *ngFor="let data of lines" [editable]="true"&gt;
                              &lt;agm-polyline-point
                                [latitude]="data.lat"
                                [longitude]="data.lng"&gt;
                              &lt;/agm-polyline-point&gt;
                &lt;/agm-polyline&gt;
      &lt;/agm-map&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code> add() {
  console.log('on shape')
  this.lines.push({lat: 51.79, lng: 7.8});//creates a point now want to add draw path 
  </code></pre>
  
  <p>}</p>
  
  <p>it creates a point now using this point i want to draw a line any help will be greatly appreciated</p>