Unable to utilize AgmMarkerSpiderModule

I followed the instructions to add the AgmMarkerSpiderModule from the official package documentation. However, when I compile, I encountered the following error message:

/directives/marker-spider.ts:14:24 - error TS2307: Cannot find module '@agm/core/services/google-maps-types' or its corresponding type declarations.

Here is a snippet of my package.json file:

"dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@agm/markerclusterer": "^3.0.0-beta.0",
    "@angular/animations": "^10.1.5",
    "@angular/cdk": "^10.0.0",
    "@angular/common": "^10.1.5",
    "@angular/compiler": "^10.1.5",
    "@angular/core": "^10.1.5",
    "@angular/forms": "^10.1.5",
    "@angular/localize": "^10.1.5",
    "@angular/material": "^10.2.5",
    "@angular/platform-browser": "^10.1.5",
    "@angular/platform-browser-dynamic": "^10.1.5",
    "@angular/router": "^10.1.5",
    "@angular/service-worker": "^10.1.5",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@google/markerclustererplus": "^5.1.3",
    "@ng-bootstrap/ng-bootstrap": "^6.2.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@types/googlemaps": "3.39.12",
    "@types/jwt-decode": "^2.2.1",
    "agm-spiderfier": "^1.0.1",
    "bootstrap": "^4.5.2",
    "font-awesome": "^4.7.0",
    "jwt-decode": "^3.0.0",
    "ng2-pdf-viewer": "^6.3.2",
    "node-sass": "^4.14.1",
    "rxjs": "^6.6.3",
    "ts-overlapping-marker-spiderfier": "^1.0.2",
    "tslib": "^2.0.2",
    "zone.js": "~0.10.3"
  },

Could someone provide assistance with resolving this issue?

angulartypescriptgoogle-maps

Answer №1

Hopefully, this solution will be effective:

Ensure that the following versions are utilized:

"dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@agm/snazzy-info-window": "^3.0.0-beta.0",
    "@types/googlemaps": "^3.43.2",
    "agm-spiderfier": "1.0.1",
}

Please follow the steps below:

  1. Delete the node_modules folder.
  2. npm cache clean --force
  3. npm install

HTML Template :

<agm-map class="agm-map" [zoom]="zoom" [zoomControl]="true" [disableDefaultUI]="false" [streetViewControl]="false"
    (mapReady)="onMapReady($event)" [fitBounds]="true">
    <agm-marker-spider>
        <agm-marker *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label"
            [agmFitBounds]="true">

            <agm-snazzy-info-window [closeWhenOthersOpen]="true" [disableAutoPan]="false">
                <ng-template>
                    <h3 class="marker-title">
                        Window Title
                    </h3>
                    <div class="">
                        Info Window Content
                    </div>
                </ng-template>
            </agm-snazzy-info-window>

        </agm-marker>
    </agm-marker-spider>
</agm-map>

Component.ts:

zoom: number = 6;
map: any;
lat: number = null;
lng: number = null;

public onMapReady(map) {
  this.map = map;
}
markers = [
  {
    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,
  },
  {
    lat: 17.385,
    lng: 78.4867,
    label: "D",
    draggable: true,
  }
];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The render properties are not compatible with each other

I am currently using ReactQuill as a component, but I encounter this error when implementing it with Typescript. Do you have any suggestions on how to resolve this issue? The JSX element type 'ReactQuill' is not recognized as a constructor fun ...

reactjstypescriptquill

What steps should I take to resolve the issue of my Vite.ts/React website displaying as a blank white page on Github Pages?

Being new to React and Vite, I'm facing an issue where I see a blank white page when opening the link. Unlike traditional JavaScript, I am using TypeScript for this project, which could be the reason behind my problem. The project I created is a hang ...

reactjstypescriptgitgithub-pagesvite

What is the method for substituting one text with another using two-way data binding?

I implemented two different cases in my Mat-Table. When there is no data, the user will see a message saying "No Data Found". However, if the user enters text in the filter search, the "No Data Found" message should be hidden and replaced with the entered ...

javascriptangulartypescriptmat-table

Prevent the Icon in Material UI from simultaneously changing

I'm working on a table where clicking one icon changes all icons in the list to a different icon. However, I want to prevent them from changing simultaneously. Any suggestions on how to tackle this issue? Code: import React from 'react'; im ...

javascriptcssreactjstypescriptmaterial-ui

Angular and WEB API experiencing issues with the update function synchronization

Currently, I'm developing a CRUD example using dotnet core and Angular. In the backend, I have implemented a function in the CarController.cs as shown below: CarController.cs [Route("UpdateCar")] [HttpPut] public IActionResult Put([ ...

html.netangulartypescript.net-core

The app.component.ts does not always trigger this function

I am looking to ensure that the following function is triggered every time a user visits my website, regardless of the URL, in order to track traffic. The site is built in Angular2 (v7). I have placed the function early on in the Angular execution stack ...

javascriptangularfirebasegoogle-cloud-firestore

Unlock the power of TypeScript by linking together function calls

I am looking for a way to create a type that allows me to chain functions together, but delay their execution until after the initial argument is provided. The desired functionality would be something like this: const getStringFromNumber = pipe() .then ...

typescripttypescript-generics

What is the proper way to structure a React component class without any props?

When working with Typescript in a React project, the top level component typically does not receive any props. What is the recommended approach for typing this scenario? I have been using the following coding structure as a template, but I am curious if t ...

reactjstypescript

Issue with default country placeholder in Ionic 6.20.1 when using ion-intl-tel-input

I have successfully downloaded and set up the "ion-intl-tel-input" plugin from https://github.com/azzamasghar1/ion-intl-tel-input, and it is functioning properly. However, I am facing an issue with changing the default country select box placeholder from " ...

typescriptionic-frameworkcordova-pluginsionic6intl-tel-input

Utilizing the relativeTo method within a guard across various feature modules

I am facing a challenge with two lazily loaded Feature Modules that have a similar flow consisting of Select, Review, and Confirm steps. I want to create a single Guard for the Review step that can navigate back to Select based on the current Module contex ...

angular

What is the best way to trigger a function when a button is enabled in Angular 8?

Here is a portion of my sign-in.component.html file. I have created a function in the corresponding sign-in.component.ts file that I want to trigger when the button below becomes enabled. Here is an example of what I am trying to achieve: <div class= ...

javascripthtmlangularangular8

Revealing a single element in an Angular 6 application that is utilized by several modules

As I am in the process of breaking down a large module into smaller ones, I have encountered an issue that needs to be addressed. Here are the specifics: The Search component is currently being used across multiple components. Initially, it was declared i ...

angularangular6

Tips for setting up the configuration of @typescript-eslint guidelines

I am in the process of transitioning to @typescript-eslint but I am finding the documentation to be quite inadequate. One specific issue I am facing is the errors like the following: Line 58: Expected a semicolon @typescript-eslint/member-del ...

typescripteslinttypescript-eslint

Creating a map in Typescript initialized with a JSON object

In my Typescript class, there is a map that I'm trying to initialize: public map:Map<string,string>; constructor() { let jsonString = { "peureo" : "dsdlsdksd" }; this.map = jsonString; } The issue I'm encounte ...

javascriptjsontypescriptinitialization

Ag-Grid is displaying a third column that is not present in my dataset

Recently, I've been working with Angular and incorporating the Ag-Grid into my project. My goal is to display a grid with two columns; however, upon implementation, an unexpected third separator appears as if there are three columns in total. https: ...

angularag-grid-angular

Struggling with transferring data rows between tables in Angular with Angular Material

I have implemented a data table using angular material with initial data rows. Additionally, I have included an empty data table where rows can be transferred from the first table. Transferring rows from the first table to the second table is functioning ...

angularangular-material

An issue arises in Typescript when attempting to pass an extra prop through the server action function in the useForm

I am struggling with integrating Next.js server actions with useFormState (to display input errors on the client side) and Typescript. As per their official documentation here, they recommend adding a new prop to the server action function like this: expo ...

reactjstypescriptnext.jsserver-action

I must find a solution for implementing the nullish-coalescing operator and optional chaining

Recently, I upgraded my angular application to version 15 and now need to ensure it works properly in Chrome 69. However, when testing in Chrome 69, I encountered 2 errors related to optional chaining and nullish coalescing operators. I am looking for gui ...

angularangular-clipolyfillsbabel-polyfillcore-js

Can you clarify the typescript type of the Mutation list within the callback function of the mutation observer?

Can you provide the typescript data type of the variable mutationList in the callback function? const targetNode = document.getElementById("some-id"); const config = { attributes: true, childList: true, subtree: true }; const callback = (mutationList, ...

javascripttypescriptcallbackmutation-observers

The data in the object bound to [ngmodel] does not update properly when changed within a method

Hello everyone, I am in need of some assistance with a puzzling issue. Currently, I am generating a set of inputs using JSON. When I make changes to the data in the web interface, everything works fine. The problem arises when I try to modify the value ...

angulartypescriptangular-materialangular-ngmodel