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.

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 — Deniz Bayar, Oct 30 '18 at 11:56
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! — Tanuki, Jul 26 '19 at 07:22

score 6 · Accepted Answer · answered Oct 30 '18 at 12:33

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)

honestly it would be great to have a more complete description of how you solved the problem — aless80, Nov 15 '18 at 15:43
@aless80 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. — Deniz Bayar, Aug 02 '19 at 09:37

score 1 · Answer 2 · answered Aug 29 '22 at 14:51

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

score 0 · Answer 3 · answered Jun 17 '21 at 13:45

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.

score 0 · Answer 4 · answered Nov 29 '21 at 17:27

0

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

answered Nov 29 '21 at 17:27

DINESH Adhikari

1,242
1
12
11

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. – M H May 30 '23 at 04:34

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

4 Answers4