Determining the clicked marker in Typescript with Google Maps

Dealing with an array of marker objects labeled markers. I've implemented a for loop to assign event listeners to each one. However, I'm struggling to determine the exact marker that was clicked.

This is my current code snippet:

for(var i = 0; i < this.markers.length; i++) //adds listener to all markers
{
  google.maps.event.addListener(this.markers[i], "click", () =>
  {
    //need to get access to which marker was clicked
    //need to use arrow function to retain proper reference to "this"
  }); 
}

I've attempted passing arguments to the arrow function without success. Any suggestions?

Answer №1

Iterating through each of the markers in this.markers, a listener is added to respond to click events on each marker. By creating a new scope with mark as a reference to the current marker, the click event will return the actual marker when triggered.

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

Creating dynamic HTML templates in Webstorm using template strings with Angular 2

As mentioned in the release notes for WebStorm 2016.1, there is an image displayed. https://i.sstatic.net/9h1Yg.png Check this out here However, when I try to replicate it, mine ends up looking like this https://i.sstatic.net/ScP8W.png Do I need to ma ...

Why is the defined function not being called in this Typescript nested this situation

Currently, I am in the process of developing an app with Ionic 2 Beta and Typescript. I have encountered an error related to how this is used within nested functions in Typescript. Despite my efforts, I am struggling to understand it fully. Below you will ...

Angular: accessing public properties

I have a component called "user.service.ts" that I want to share. import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { AppConfig } from '../app.config&apos ...

The Google Maps Javascript API will only load data if the console is open

I'm facing an issue with displaying a map on my webpage where I want to set a marker. What's the problem Despite no errors in the console or from Google, the map data is not loading properly. All I see is the Google logo and a grey background, ...

Troubleshooting issues with setTimeout in Angular 2 using typescript

Within this HTML code, I am monitoring the page for idle activity. If the user is idle for a certain period of time, an inactivity alert will be displayed and the user will be logged out. <div *ngIf="environmentData" xmlns="http://java.sun.com/jsf/html ...

Reusing components in Angular 2 to dynamically display various data on a single page based on the service response

Looking at my HTML <div> <section></section> <section></section> </div> My Component import {Component} from '@angular/core'; import {Observable} from 'rxjs/rx'; import {HTTP_PROVIDERS} from ...

A dynamic Angular component consisting of two distinct rows to be seamlessly integrated into an existing table

I'm currently working on a component called "template" that can consist of either two rows. @Component({ selector: '[my-row]', template: ` <tr> <td>first</td> <td>second</td> </tr> <t ...

Implementing Angular Universal on Azure Platform

After converting my application to Angular Universal at the request of my clients, I successfully ran it using npm run serve:ssr and accessed it through http://localhost:4000. Now, the challenge lies in deploying it. Upon running npm run build:ssr, a dist ...

Passing an array of ID's between two components in Angular: A comprehensive guide

Greetings fellow readers, I have encountered a new challenge in my Angular project. I need to pass an array of IDs from one component to a completely unrelated component. Most solutions suggest using ViewChild, Input, or Output, but since the components ar ...

"Production environment encounters issues with react helper imports, whereas development environment has no trouble with

I have a JavaScript file named "globalHelper.js" which looks like this: exports.myMethod = (data) => { // method implementation here } exports.myOtherMethod = () => { ... } and so forth... When I want to use my Helper in other files, I import it ...

Encountering unmounted component error in React Native development

A cautionary error message: unable to update a state in React on an unmounted component. Although this may seem harmless, it could signify a memory leak in your application. To resolve this issue, be sure to cancel all subscriptions and synchronous tasks ...

Tips and tricks for setting up a functional react select component using Material UI

Having an issue with React Select material UI where the dropdown select is not functioning properly. The popup does not open up as expected. I am looking to display react select in a modal dialog box. import MenuItem from "@mui/material/MenuItem" ...

Warning: The gulp_jspm module is now deprecated and will be removed

Whenever I run gulp_jspm, a DeprecationWarning pops up. Is there an alternative method to generate my bundle files without encountering this warning? It seems like when I used gulp-jspm-build, I had to include some node files that were not necessary before ...

Retrieve the child nodes from the array and organize them into a

Given an array of regions, where the highest region has key: 10 and parent_id: null, the goal is to restructure this array in order to return a tree representation. The desired regions tree structure for input [10] should be: Egypt Zone 1 Tagamo3 Giza H ...

the category is unspecified

As I try to deploy my code and run the build, TypeScript is throwing an error stating that 'object' is of type unknown. I am currently working on resolving this issue in my specific scenario. export default function Home() { async function send ...

In Typescript, create and set up a 2D array while ensuring type checking in the subsequent lines of code

After researching online, I came across the following format: twoDArr: string[][] = [['a', 'b', 'c'], ['x', 'x']] However, upon trying to console.log(twoDArr), I encountered a TypeScript error indicating ...

Changing the color of the pre-selected date in the mat-datepicker Angular component is a key feature that can enhance the

Is there a way to adjust the color of the preselected "today" button in mat-datepicker? https://i.stack.imgur.com/wQ7kO.png ...

Retrieve the matching values from a JSON object by filtering it with an array, then create a new JSON object containing only

var structureInfos = [{ name: 'HMDB0006285', identifier: 'Six two eight 5' }, { name: 'HMDB0006288', identifier: 'Six two double eight'}, { name: 'HMDB0006293& ...

Guide on incorporating the authorization function from next-auth into a TypeScript Next.js 13 app directory

Can you help me understand the proper way to declare the authorize function in [...nextauth].ts? I have been attempting it as shown below: export default NextAuth({ session: { strategy: "jwt" }, providers: ...

Using the attribute selector in an Angular 2 standalone component

In my research, I have come across several sources mentioning that an angular component selector can be enclosed in square brackets similar to a directive selector. However, when I tried it, it did not work for me: import { ChangeDetectionStrategy, Compone ...