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

Question

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.

Melany

can you create an stackbliz? – Aerobiosis

Hi @Catgrammer I have solved my issue. Thank you for your interest. For the future if someone having the same issue I will add my interesting solution :D – Melany

I also have the same problem. For some baffling reazon arbitrarilty changing zoom in code doesnt work! Only incrasing or decreasing it does. And there is nothing on google at all about it or how to fix it! – Nicks

Answer 1

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)

Melany

honestly it would be great to have a more complete description of how you solved the problem – Paillasse

@Paillasse I am superlate sorry but as I write on the answer. // this is not working--> this.mapZoom=14; //But this is working(interesting !) this.mapZoom= this.mapZoom+0.5; If I try to assign directly a number zoom is not working. However if you increase it with small numbers it works. – Melany

Answer 2

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;}

Merman

Answer 3

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.

Montemontefiascone

Answer 4

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;
        }

Fowkes

I feel like your assessment is correct ("agm-map does not accept the same value again.") but your solution code is insufficient. Please add more details. – Courtney