The functionality for handling gestures on AgmMap appears to be non-functional

I am currently using the AGM Map feature available on and I need to disable the zooming functionality when scrolling. Despite setting gestureHandling = "'cooperative'", it does not seem to work. Are there any specific factors causing this issue?

.map-container {
    margin-top: 56px;
    margin-left: 0;
    padding: 0;
    -ms-overflow-x: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    overflow: hidden;
}

.main-container {
    margin-top: 56px;
    margin-left: 235px;
    padding: 15px;
    -ms-overflow-x: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    overflow: hidden;
}
agm-map{
    height: 100vh;
    width: 100vw;
     margin-left: 0;
     padding: 0;
     -ms-overflow-x: hidden;
     overflow-x: hidden;
     overflow-y: scroll;
     position: relative;
     overflow: hidden;

}
@media screen and (max-width: 992px) {
    .main-container {
        margin-left: 0px !important;
    }
}
<div [@routerTransition] class="map-container">
<agm-map [latitude]="lat" [longitude]="lng" [zoom]='12' [gestureHandling]="'cooperative'">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

</div>

angulargoogle-mapstypescript

Answer №1

Even though I didn't set apiVersion, specifying the directive [scrollwheel]="null" worked perfectly for my situation!

Answer №2

https://github.com/SebastianM/angular-google-maps/issues/1411

After investigating the issue thread, it became apparent that the issue did not lie within the AGM module itself, but rather with the Google API. I encountered the same obstacle and managed to resolve it by adjusting the apiVersion parameter to '3.31' within the 'forRoot' method of the modules:

imports: [
AgmCoreModule.forRoot( {
  apiKey: Globals.googleApiKey,
  apiVersion: '3.31'
} ),

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

Encounter the error message "Unable to resolve all parameters" after including the Interceptor

Currently, I am in the process of implementing HttpInterceptor functionality. However, upon adding it to @NgModule, I encountered the following error message in Chrome: Uncaught Error: Can't resolve all parameters for JwtInterceptor: (?, ?). at s ...

angular

Participating in consolidated data

I need to merge data from my trainings-table with my users-table. The structure of the data is as follows: - users - key1 - name - trainingIds - t_key1 - t_key3 - trainings - t_key1 - name - description - t_k ...

angulartypescriptfirebasefirebase-realtime-databaseangularfire2

At runtime, the array inexplicably becomes null

Having recently ventured into the world of Ionic framework development, I have encountered a puzzling issue. At runtime, an array inexplicably gets nulled and I am struggling to pinpoint the root cause. export interface Days { name:string; } @Compon ...

javascriptangulartypescriptionic-framework

Angular 2's one-of-a-kind singleton solution

I'm feeling a bit lost when it comes to singleton services in Angular 2. I need a translation service that will be accessible throughout the entire application, and I want to ensure that only one instance of the service exists. My issue arises when tr ...

angulartypescript

Display error messages upon submitting the form

I am currently working on an Angular 6 Form with validation. My main goal is to display error messages only after the form has been submitted. It is crucial that these messages remain constant while the user types in the input field. For instance, if a use ...

javascriptangularformsangular-forms

Ways to resolve a 404 error on a live Angular application being hosted by NGINX

I am encountering an issue with my deployed application on a server where every time I refresh a specific page, I receive a NGINX 404 error. The application is running within Docker. Below is the configuration file for NGINX. server { listen 80; locat ...

angularnginx

modify brand information through the use of javascript and customizable settings

In the default setting, I want all product details to be displayed. If the option value matches the product's brand name (b_name), then I want to display the corresponding details. Let's consider a list of products with their details: Samsung ...

javascripthtmlangularreactjs

Testing Ag Grid's column headers using Jest and Angular CLI has proven challenging, as some columns from columnDefs remain elusive

Currently, I am using Jest and Angular Cli testing to validate column headers. In my attempt to replicate the process outlined on https://www.ag-grid.com/javascript-grid-testing-angular/#testing-grid-contents, I have encountered an issue where only 2 out ...

angulartypescriptjestjsag-grid-angularangular-observable

What is the method for one Angular module to incorporate another module and initialize it with a custom value?

I am in need of a module that can instantiate another one with a unique variable, as demonstrated below. // app.module.ts MyServiceModule.forRoot({ custom: 'customVar' }) After this, I attempt the following within the myServiceModule: #NgModule ...

angularangular-servicesangular-moduleangular-providers

Navigating through tslint: adhere to the one-variable-per-declaration rule

What is the best way to write code following this rule? let exampleArray = [...]; for (let j = 0, k = exampleArray.length; j < k; j++) { ... } ...

typescripttslint

JavaScript Looping through multiple files for upload will return the last file in the series

I'm currently working on implementing a multiple file upload feature using JavaScript. Within my HTML, I have the following input: <input type="file" (change)="fileChange($event,showFileNames)" multiple /> When the onChange event is triggere ...

javascriptfiletypescriptupload

Alert: Circular dependency detected!

In an effort to have cleaner imports, I've set up a typescript file that exports all the components I'm using. For example: import { Comp1, Comp2, Comp3 } from index/components However, when using this approach, I encounter a warning during bu ...

angular

Incorporating a library downloaded from GitHub into a Vue project instead of relying solely on npm installation

I've been struggling to install the https://github.com/MadimetjaShika/vuetify-google-autocomplete library through npm. I am new to using vue, and I need to install the prerelease developer's build, version 2.0.0-Alpha.9, because the older one is ...

google-mapsnpmvue.js

Displaying time in weekly view on the Angular 4.0 calendar

I've integrated the library into my Angular application to manage calendar events display and creation. The app features a monthly, weekly, and daily view option for users. However, I noticed that in the weekly view, only the dates are shown without ...

angularcalendar

Step-by-step guide on executing a multi-location "delete" operation using AngularFire2 or Firebase in Angular2

My goal is to simultaneously remove 2 nodes on Firebase in a single operation. I am familiar with the remove() function for deleting a node when I have its location. However, I am unsure about what type of data the remove() operation returns - whether it i ...

angularfirebasepromisefirebase-realtime-databaseangularfire2

In Typescript, an interface is defined where the "id" property is required to be a number, while all other properties must be of

I am in need of creating an interface to represent data received from the server, where the id is a number and all other properties are strings. This is what I attempted: interface AnyChartsData { id: number; [key: string]: string; } However, I enco ...

typescript

An issue arises when trying to group and sum an array of objects due to difficulty converting strings to arrays in TypeScript

Below is the provided code snippet: Definition of Interface - interface IWEXInterface { readonly Date?: string; "Exec Qty"?: string; readonly Expiry?: string; } Data Collection - let data: IWEXInterface[] = [ { Date: &qu ...

javascripttypescript

Is it possible to dynamically assign a template reference variable to a newly created DOM element in TypeScript?

After creating a DOM element with this.document.createElement('h1'), I am looking to insert the element into a section tag using a template reference variable (myTRF), similar to the example below: <section> <h1 #myTRF>This is my he ...

javascriptangulartypescript

Is there a way to display a variety of images on separate divs using *ngFor or another method?

I have created a custom gallery and now I would like to apply titration on the wrapper in order to display a different image on each div. Currently, my code is repeating a single image throughout the entire gallery. HTML <div class="wrapper" ...

angulartypescripthttpngfor

Creating and managing global context with useReducer in TypeScript and React

One issue that I am facing is with the route containing a login and logout button, where the browser error states 'Property 'dispatch' does not exist on type '{}'. (home.tsx) import React, { useContext, useEffect, useRef, use ...

reactjstypescript