Angular

AGM maps zoom control position set

Spread the love

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.

AGM maps zoom control position set
AGM maps zoom control position set

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
}

agm zoom control position
agm zoom control position

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

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


Spread the love
Tagged , , , , , , ,

About Chandra

Technology lover. Professionally Software Developer and write some Technical Blog to help newcomer.
View all posts by Chandra →

2 thoughts on “AGM maps zoom control position set

Leave a Reply

Your email address will not be published.