AGM angular Google Maps Set Zoom programmatically

Question

I am working with AGM (Angular Google Maps) and OpenLayers.

I need to set the zoom of my AGM programmaticly but haven't been able to figure out how it works.

HTML Maps...

<div id="mapWrap" class="mapWrap" style="padding: 0px; width: 100%; height: 
100%; text-align: left">

  <agm-map  
    [latitude]="lat" 
    [longitude]="lng"
    [zoom]="currZoom" 
    [mapTypeId]="mapType" 
    [mapTypeControl]="mapControls" 
    [zoomControl]="mapControls" 
    [streetViewControl]="mapControls" 
  ></agm-map>

  <div id="map" class="map" style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: absolute; opacity: 0.5"></div>
</div>

Component Code

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';
import { GoogleMap } from '@agm/core/services/google-maps-types';

import olMap from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import OSM from 'ol/source/OSM.js';
import XYZ from 'ol/source/XYZ';
import {transform} from 'ol/proj';
import {msFormValues} from './../values/ms-form-values';

@Component({
  selector: 'ms-map',
  templateUrl: './ms-map.component.html',
  styleUrls: ['./ms-map.component.scss']
})
export class MsMapComponent implements OnInit {

// testCoord = 
transform([msFormValues.googleLng,msFormValues.googleLat],'EPSG:3857', 
'EPSG:4326');

lat: number = msFormValues.googleLat;
lng: number = msFormValues.googleLng;
currZoom: number = msFormValues.googleZoom;
mapType = 'satellite' ;
mapControls = false;

constructor() {}

ngOnInit() {
  const osmLayer = new TileLayer({
    source: new OSM()
  });

  const xyzLayer = new TileLayer({
    source: new XYZ({
      url: 'http://tile.osm.org/{z}/{x}/{y}.png'
    })
  });
  msFormValues.view = new View({
    center: [0,0],
    zoom: 0,
    projection: 'EPSG:3857',
    maxZoom: 20,
    minZoom: 5
  });

  msFormValues.googleZoom = msFormValues.view.getZoom();
  msFormValues.map = new olMap({
    target: 'map',
    layers: [
      osmLayer,
      // xyzLayer
    ],
    view: msFormValues.view
  }); 

  msFormValues.view.on('change:center',function() {
    var mapCenter = transform(msFormValues.view.getCenter(),'EPSG:3857', 'EPSG:4326');
    msFormValues.googleLat = mapCenter[1];
    msFormValues.googleLng = mapCenter[0];
  });
  msFormValues.view.on('change:resolution',function() {
    msFormValues.googleZoom = msFormValues.view.getZoom();   
  });

  }
  setMapType(mapTypeId: string) {}
}

I'm actually porting this from AngularJS where I had all this working with the raw JS for google however in Angular 6 is seems just pulling the google librarys to a component library wasn't very straightforward and didn't work once you tried to install your component into another application.

Answer 1

so according to the @agm/core documentation there is a zoom @input https://angular-maps.com/api-docs/agm-core/components/agmmap#zoom

changing the value of this input affects the zoom of the map

add a function like this to your component

public setZoom(): void {
  this.zoom = 10;
}

and then bind the function on a button

<button (click)="setZoom()">Set Zoom</button>

adjust it to your needs

Answer 2

Just to add to the answer, you can also animate the zoom using interval

zoomIn(){
   const interValZoom = setInterval(() => {
    this.zoom = this.zoom + 1 ;
        if (this.zoom > 15) {
            clearInterval(interValZoom); 
             // stop the zoom at your desired number
            }
    }, 100);
}

then on your button

<button (click)="zoomIn()"> Animate Zoom</button>