In the Angular Google Maps API, is it possible to update the attributes of <agm-marker> directly within the TypeScript code?

Currently, I am fetching markers from the database and displaying them on a map using Angular Google Maps (AGM) by utilizing the <agm-marker> tag.

In my code snippet below, you can see how I fetch and store the markers in an array named markers in the file componentName.component.ts:

 ngOnInit(): void {


this.markerService.fetchMarkers()

this.markerService.markersSubject.subscribe(markers => {

  markers.forEach(marker => {

    this.markers.push({
      lat: marker.latitude,
      lng: marker.longitude,
      title: marker.title,
      story: marker.story,
      path: marker.img_path
    })

  })

})

    } //onInit

Below is the HTML code responsible for rendering these markers:

    <agm-map
    [latitude]="latitude"
    [longitude]="longitude"
    [zoom]="zoom"
    [disableDefaultUI]="false"
    [streetViewControl]="false"
    [zoomControl]="false"
    [mapTypeControl]="false"
    [mapTypeId]="'terrain'"
    > 

    <agm-marker id="display-markers"
     *ngFor="let m of markers; let i = index"
      (markerClick)="openModal('marker-content' + i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [markerDraggable]="m.draggable"
      [iconUrl]="m.icon" 
      [visible]="true"
      [id]="i"
    </agm-marker>

   </agm-map>

I now need to implement the functionality that allows users to clear all markers by pressing a button. This means setting the [visible] attribute of each <agm-marker> to False. How can I achieve this within the component.ts file?

Are there alternative methods in Angular for removing all markers from the map?

I have searched extensively online but haven't found a solution yet. Any help is appreciated.

Thank you!

angulartypescriptgoogle-maps-markers

Answer №1

I might not have fully grasped the question, but it seems like you are looking for this:

HTML template

...
<agm-marker id="display-markers"
  ...
  [visible]="isMarkersVisible"
  ...
</agm-marker>
...
<button (click)="toggleMarkers()">{{isMarkersVisible ? "Hide" : "Show"}}</button>
...

TypeScript file

...
isMarkersVisible = true;
...
ngOnInit(): void { ... }
...
toggleMarkers(): void {
  this.isMarkersVisible = !this.isMarkersVisible;
}
...

I hope this information is helpful to you.

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

After 15 minutes of inactivity in the Angular project, the JWT (Json Web Token) token expires leading to the need for renewal or refresh

I have integrated a JWT token authentication service in my Angular project with an ASP.Net Core API as the backend. Here's how I set it up: Startup.cs public void ConfigureServices(IServiceCollection services) { services.AddAuthentication( ...

angularauthenticationjwttokenbearer-token

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Is there a more efficient way to get all the input values ​​and place them in the appropriate location in my object (localStorage) without having to individually retrieve them as shown in the code below? Below is the function I currently use to update ...

javascriptangulartypescriptionic-framework

In Typescript, inheritance of classes with differing constructor signatures is not permitted

While working on implementing a commandBus, I encountered an issue when trying to register command types with command handlers for mapping incoming commands. My approach was to use register(handler : typeof Handler, command : typeof Command), but it result ...

inheritancestaticcompiler-errorstypescript

Is it feasible to use Angular2 in conjunction with ui-calendar?

Entering the fascinating world of Angular 2 has me feeling like a beginner again. My team and I had been utilizing angularjs with ui-calendar in our project, but now we're transitioning to Angular 2 due to new production requirements. The challenge ar ...

angularfullcalendarangular2-servicesui-calendar

Guide to building a nested React component

My custom dropdown component requires 2 props: trigger (to activate the dropdown) list (content to display in the dropdown) Below is the implementation of my component: import { useLayer } from "react-laag"; import { ReactElement, useState } fr ...

javascriptreactjstypescript

Discover the pixel width of a Bootstrap grid row or container using JavaScript

How can I calculate the width of a Bootstrap grid row or container in pixels using JavaScript? I am working with Aurelia for my JavaScript project, but I'm open to solutions in standard JS (no jQuery, please). Looking at the Bootstrap documentation, ...

javascriptreactjsangularbootstrap-4aurelia

Custom React component - DataGrid

Just starting out in the world of React and attempting to create a custom component with parameters. I'm curious about the correct approach for achieving this. Here's my current code snippet - how do I properly pass Columns, ajax, and datasourc ...

javascriptreactjstypescriptasp.net-corereact-redux

Importance of having both package.json and package-lock.json files in an Angular project

As a newcomer to Angular, I recently installed a sample app using angular-cli and noticed the presence of both package.json and package-lock.json files. The package-lock.json file contains specific dependencies, while the package.json file includes other i ...

node.jsangularangular-clipackage.json

Utilize Firebase to perform a case-insensitive query

Our Angular/Ionic app requires users to provide their email during registration, which is then saved in the User collection. We also validate if the email is already in use with a query like this: firestore .collection("User") .where("email", "==", ...

angularfirebaseionic-frameworkgoogle-cloud-platformgoogle-cloud-firestore

Creating a component with @input for unit tests in Angular can be achieved through the following steps

I'm encountering issues while attempting to create a testing component with an @input. The component utilizes properties from the feedback model, and although I imported them into the test file, errors are being displayed. Can anyone offer assistance? ...

angulartypescriptjasminekarma-jasmine

Issue encountered while attempting to utilize a basic redux reducer to define a boolean value, regarding a mismatch in overrides

Currently, I am working on a project to enhance my understanding of Redux and Typescript. I am still navigating through the learning curve in this area. Based on what I have learned from a book, I have established a "slice" that includes definitions for r ...

typescriptredux

What steps are required to transform a TypeScript class with decorators into a proper Vue component?

When I inquire about the inner workings of vue-class-component, it seems that my question is often deemed too broad. Despite examining the source code, I still struggle to grasp its functionality and feel the need to simplify my understanding. Consider th ...

typescriptvue.jsvue-class-componentsvue-property-decorator

The operation of multiplying values is not functioning properly in the output field

I'm currently working on a functionality where an output field needs to multiply its value based on the input entered into another field. For example, if the input field is set to 2, then the output field should display the result of multiplying that ...

angularangular-material

Angular intercepts HTTP requests

I am facing a challenge with an application that receives a JWT token from the backend, which has a validity of 15 minutes. The frontend then sends this JWT to the backend by appending it to the Authorization header using a HTTP interceptor. My goal is to ...

angularauthenticationjwtinterceptor

Exploring Page Navigation Techniques in Angular 2

Exploring the world of Angular 2, I've come across a task to implement pagination. In my research, it led me to realize that the pagination logic must be coded in systems.config.js. My query now is locating the elusive file systems.config.js. What pur ...

angularpagination

Troubleshooting problem with iPhone X responsiveness

Struggling with responsive issues on iPhone X. Issue is only appearing on actual device. Any tips for fixing this? I'm facing an issue where the website looks good and responsive on all devices in Chrome's responsive view. But when I access it th ...

javascripthtmlcssangularbootstrap-4

How can one trigger a service method in nestjs through a command?

I am looking to run a service method without relying on API REST - I need to be able to execute it with just one command ...

node.jstypescriptnestjs

The items are not displayed in the app.component.html file

I am having trouble displaying the product list in an HTML file. Despite receiving the product data in a JavaScript message, it is not showing up when I try to list it in the HTML. Can anyone assist me in resolving this issue? Below is the code snippet: im ...

angular

Is there a way to communicate with the Microsoft bot from within the bot itself, ensuring that the message follows the dialog flow and receives the appropriate response?

It would make more sense if the title of this were "how can I ensure the bot responds smoothly in case context is lost or there's a server restart during a user interaction with the bot. It's confusing as it is and I need to break down the planni ...

node.jstypescriptbotframeworkdirect-line-botframework

Typescript - The type is lacking certain properties from another type, despite having all options defined

I have defined the following TypeScript declarations: type TDisplayKey = "a" | "b" | "c"; const DISPLAY_KEYS: Record<string, TDisplayKey> = { A: "a", B: "b", C: "c" }; const DISPLAY_KEY_TITLES: Record<TDisplayKey, string> = { [DISPLA ...

typescript