1

I'm trying to build a simple google map location marker with a radius.

I'm using -

  • angular@11.0.4
  • angular-cli@11.0.4
  • agm/core@3.0.0

I'm getting the an error in terminal on running ng serve, regarding zoomControl property & a method I defined in the *.component.ts file.

Below is the error shown in terminal.

Error: src/app/Map/Map.component.html:19:16 - error TS2554: Expected 2 arguments, but got 1.

    19     (dragEnd)="markerDragEnd($event)"

    src/app/Map/Map.component.ts:41:16
    41   templateUrl: './Map.component.html',
        
    Error occurs in the template of component MapComponent.
    src/app/Map/Map.component.html:12:3 - error NG8002: Can't bind to 'AgmZoomControl' since it isn't a known property of 'agm-map'.
    1. If 'agm-map' is an Angular component and it has 'AgmZoomControl' input, then verify that it is part of this module.
    2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

    12   [zoomControl]="true"
        
    src/app/Map/Map.component.ts:41:16
    41   templateUrl: './Map.component.html',
                          
    Error occurs in the template of component MapComponent.

markerDragEnd() method from *.component.ts file.

markerDragEnd(m: any, $event: any) {
   this.location.marker.lat = m.coords.lat;
   this.location.marker.lng = m.coords.lng;
   this.findAddressByCoordinates();
}

Segment where zoomControl property & markerDragEnd() method is used.

<agm-map
  [(latitude)]="location.lat"
  [(longitude)]="location.lng"
  [(zoom)]="location.zoom"
  [disableDefaultUI]="true"
  [zoomControl]="true"
  [(fitBounds)]="location.viewport"
>
  <agm-marker
    [(latitude)]="location.marker.lat"
    [(longitude)]="location.marker.lng"
    [markerDraggable]="location.marker.draggable"
    (dragEnd)="markerDragEnd($event)"
  ></agm-marker>
</agm-map>

What can be the reason for error ?

iCantFindaGoodUsername
  • 768
  • 1
  • 6
  • 22
  • First, please don't post images of errors. When the link eventually expires important context is removed from your post. Copy and paste the error message instead. As far the error, make sure you import the module that provides `zoomControl` into the module hosting the component. – The Head Rush Jan 06 '21 at 14:08
  • because you send one arguments to the event (dragEvent), and your function are defined with two. should be `dragEvent(m:any){...}`. See that in the .html we pass as argument `$event` but the type of this variable can be severals things. If you look for the definition of the dragEvent (imagine this:https://angular-maps.com/api-docs/agm-core/directives/agmmarker#dragEnd) you see that the type is `EventEmitter`, so the variable $event is the type ` google.maps.MouseEvent` , that if that you get (and need) in your function – Eliseo Jun 30 '21 at 19:47

0 Answers0