CODEWITHSUNDEEP
angulartypescriptangular7angular-google-maps
Ehtesham Ahmad Nadim
Ehtesham Ahmad Nadim

Reputation: 431

Is there any way to fit agm-polyline inside map in angular 7

I want to fit the polylines inside my map and want to set the zoom level dynamically according to polylines size and location of the polylines My code is here:

  <agm-map style="height: 500px" [latitude]='selectedLatitude' [longitude]='selectedLongitude'
    *ngIf='xPolyline.length'>
    <agm-polyline *ngFor='let polyline of xPolyline' [strokeColor]="'#0000ff'" [strokeOpacity]="0.9">
      <agm-polyline-point *ngFor="let point of polyline;let i = index;" [latitude]="point.latitude"
        [longitude]="point.longitude">
      </agm-polyline-point>
    </agm-polyline>
  </agm-map>

Upvotes: 0

Views: 983

Answers (2)

Wojciech Marciniak
Wojciech Marciniak

Reputation: 325

<agm-map ... [fitBounds]="true"></agm-map>

<agm-polyline-point ... [agmFitBounds]="true"></agm-polyline-point>

No further calculations or extra calls are necessary. AGM is going to calculate this for you on the fly.

Upvotes: 2

RBC
RBC

Reputation: 478

this.agmMap.mapReady.subscribe(map => {
   const bounds: LatLngBounds = new google.maps.LatLngBounds();
   for (const mm of polyline) {
      bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
   }
   map.fitBounds(bounds);
});

Here markers is the array of all available latitude and longitude. This will set the zoom level to fit all your polyline points in the map.

Upvotes: 1

Related Questions