Angular Google Maps zoom is working just once then you can not change zoom value

Viewed 4830

I am working on a project which is used agm. Everything is fine apart from zoom issue. I put a lot of marker on the map and when I clicked one of them I want to to zoom it's latitude and longitude. I can center this markers latitude and longitude but zoom is just working once not second time. Is there anyone help me about it. Btw I am new on Angular.

Thanks.

4 Answers

cityInfo(i){
            this.latitude=this.parkandFlyCenter[i].lat;
            this.longitude=this.parkandFlyCenter[i].lon;
            // this is not working--> this.mapZoom=14;
            //But this is working(interesting !)
            this.mapZoom= this.mapZoom+0.5;
        
      }
<agm-map class="agm-map" 
    [latitude]="latitude" 
    [longitude]="longitude"
    minZoom="3" 
    [zoom]="mapZoom"
    [styles]="styles"
    [mapTypeControl]="true" 
    [mapTypeControlOptions]="mapType"
    (centerChange)="centerChange($event)"
    (zoomChange)="zoomChange($event)"
    (boundsChange)="boundsChange($event)"
    >
        <agm-marker-cluster [styles]="clusterStyles">
        <agm-marker *ngFor="let city of Cities; let i = index"
        [latitude]="city.lat"
        [longitude]="city.lon"
        [iconUrl]="icon"
        [label]="{color: 'white', text: sometext}"
        (markerClick)="cityInfo(i)">

        </agm-marker>
      </agm-marker-cluster> 
      </agm-map>

This was my solution(to be honest not a solution but someone can have the same issue and this can be a reference)

In HTML file-----

<agm-map #gm [latitude]="latitude"
       [longitude]="longitude"
       [zoom]="zoom"
       (zoomChange)="changeMapZoom($event)"    ---> You need to add this
       >
    ....
    ....
</agm-map>

And in TS file

changeMapZoom(e: any): any {
 this.zoom = e;   ---> here i set zoom level according to my need.
}

You can pass this function in any function with zoom level value. For ex. you need to search location then see below code.

this.mapsAPILoader.load().then(() => {
  this.setCurrentLocation();
  this.geoCoder = new google.maps.Geocoder();

  const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
  autocomplete.addListener('place_changed', () => {
    this.ngZone.run(() => {
      // get the place result
      const place: google.maps.places.PlaceResult = autocomplete.getPlace();

      // verify result
      if (place.geometry === undefined || place.geometry === null) {
        return;
      }

      // set latitude, longitude and zoom
      this.latitude = place.geometry.location.lat();
      this.longitude = place.geometry.location.lng();
      this.changeMapZoom(18);        -------------> here i pass zoom level value
    });
  });
});

I hope it helps someone. B'cos after a full day finding and search I got the solution.

Place change, search location in AGM map. reset zoom dynamically.

I was facing the same issue, Now I have the answer. [zoom]="zoom agm-map does not accept the same value again.

try this

zm = true

if(this.zm){
          this.zm = false
          this.zoom = 8;
          
        }
        else{
          this.zm = true
          this.zoom = 7;
        }

I am using AGM(Angular google maps) with AGM data layer for showing geojson. I Had fixed this issue by using method.

in html, I used (zoomChange)="changeMapZoom($event)"

 <agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng" (zoomChange)="changeMapZoom($event)" >

in .ts class

 changeMapZoom(e: any): any {
this.zoom = e;}
Related