title: draw route and automatically Zoom in/out Google map based on the path drawn in angular 6
body: <p>I have plotted the map with latitude and longitude and drawn path between them and the map returns as follows: </p>
  
  <p><a href="https://i.stack.imgur.com/sQejm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sQejm.jpg" alt="screenshot of incorrect behavior"></a></p>
  
  <p>but the expected result as follows: </p>
  
  <p><a href="https://i.stack.imgur.com/hbegR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hbegR.jpg" alt="desired behavior"></a></p>
  
  <p>following is the code is used to draw the route</p>
  
  <pre><code> for (var i = 0; i &lt; mapData.length; i++) {
            var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
            myTrip.push(latLng);
            // Push the 1st datapoint but don't draw the flightpath. Flightpath must be drawn only if more than one datapoint
            if (i === 0) {
              latLngPath.push(latLng);
            }
            if (i &gt; 0) { // Push the datapoint and draw the flightpath.
              latLngPath.push(latLng);
  
              var flightPath = new google.maps.Polyline({
                path: latLngPath,
                strokeColor: "#F1575A",
                strokeOpacity: 1,
                strokeWeight: 4,
                zIndex: 300,
                icons: [{
                  icon: {
                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    strokeColor: "",
                    fillOpacity: 1,
                    scale: 3,
                    //offset: '100%'
                  },
                  repeat: '100px'
                }]
              });
              flightPath.setMap(this.map);
              // get the new datapoint 
              var lastLatLng = latLngPath.slice(-1)[0];
              latLngPath = [];
              latLngPath.push(lastLatLng);
  
            }
          }
  </code></pre>