AGM maps zoom control position set

AGM maps zoom controls is setting up the controls position icon in any place in the map. Mapready event is taken care of set control position in Maprady function please follow the code below. You can off the zoom control set false of zoomControl directive.

Install Angular google map package

npm i @agm/core

Then import the “AgmCoreModule” in your app module

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";
import { AgmCoreModule } from "@agm/core";

@NgModule({
  imports: [
    BrowserModule,
   AgmCoreModule.forRoot({
		  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
		})
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

# install the types/googlemaps dependency package
npm i @types/googlemaps

Add below code in html file

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false" [zoomControl]="false"
  (mapReady)="mapReady($event)" (mapClick)="mapClicked($event)">

  <agm-marker *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(m.label, i)" [latitude]="m.lat"
    [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable" (dragEnd)="markerDragEnd(m, $event)">

    <agm-info-window>
      <strong>InfoWindow content</strong>
    </agm-info-window>

  </agm-marker>

  <agm-circle [latitude]="lat + 0.3" [longitude]="lng" [radius]="5000" [fillColor]="'red'" [circleDraggable]="true"
    [editable]="true">
  </agm-circle>

</agm-map>

# You can set combination of positions text as required zoom control position in your google map screen
TOP_RIGHT
LEFT_CENTER
LEFT_TOP
TOP_CENTER

zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}

Add the below code in ts file

import { Component, VERSION } from "@angular/core";
import { MouseEvent } from "@agm/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  // google maps zoom level
  zoom: number = 8;

  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`);
  }

  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true
    });
  }

  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log("dragEnd", m, $event);
  }

  mapReady(map) {
    map.setOptions({
      zoomControl: "true",
      zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
      }
    });
    //console.log(map);
    //this.loader = true;
    map.addListener("dragend", () => {
      //this.loader = false;
      //console.log(this.centerLatitude, this.centerLongitude)
      // do something with centerLatitude/centerLongitude
    });
  }

  markers: marker[] = [
    {
      lat: 51.673858,
      lng: 7.815982,
      label: "A",
      draggable: true
    },
    {
      lat: 51.373858,
      lng: 7.215982,
      label: "B",
      draggable: false
    },
    {
      lat: 51.723858,
      lng: 7.895982,
      label: "C",
      draggable: true
    }
  ];
}

// just an interface for type safety.
interface marker {
  lat: number;
  lng: number;
  label?: string;
  draggable: boolean;
}

ng serve

Summary

The main part of the code in bold format so you can understand easily and by copy the code you can insert into you application.

PROJECT ON GITHUB

PROJECT ON STACKBLITZ

Hope this article have been solve problem. Please give your valuable feedback. If you have any kind of questions or issues about this article, please let me know.

Follow related articles

• AGM dynamic marker not updating?
• ANGULAR GOOGLE MAPS (AGM) COMPLETE GUIDE TUTORIAL

Thank you! please like and share our Facebook page to get more interesting updates.