Issue: the function this.infoWindowFunction is not defined

Attempting to make a function call with parameters is giving me the error mentioned in the subject. The function declaration and call should be correct based on how I'm doing it below.

I have tried the following methods but none seem to work:

  • infoWindowFunction =function( infoWindow, content, marker, map){...}
  • infoWindowFunction( infoWindow, content, marker, map){...}
  • infoWindowFunction=( infoWindow, content, marker, map) => {...}
  • and even the changes below, which seem to fix the error but the function is still not working as intended:
let obj={infoWindowFunction: function( infoWindow, content, marker, map)  {
      marker.addListener("click", function (e) {
        infoWindow.setContent(content);
        infoWindow.open(map, marker);
      });
    }}

obj.infoWindowFunction( infoWindow,content, map, marker);

Below is a self-contained sample code snippet:

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// Code snippet continues...

The error message I'm receiving is:

Error: this.infoWindowFunction is not a function

Answer №1

Revamp your calculateAndDisplayRoute method by using the => syntax instead of the traditional function keyword.

calculateAndDisplayRoute(directionsService, directionsRenderer, map, infowindow) {
  directionsService.route(
    {
      origin: { query: this.directionsForm.get('origin').value },
      destination: { query: this.directionsForm.get('destination').value },
      travelMode: 'DRIVING'
    },

    (response, status) => {   //<----- utilize arrow function in place of the `function` declaration
      if (status === 'OK') {
        //console.log(response);
        directionsRenderer.setDirections(response);
        var infoWindow = new google.maps.InfoWindow();
        //this.showSteps(response, infowindow, map, this.markerArray);
        //---------------------Origin Marker----------------------------
        var marker = new google.maps.Marker({
          map: map,
          position: response.routes[0].legs[0].start_location,
          title: response.routes[0].legs[0].start_address
        });
        var content =
          'Formatted Address: ' + response.routes[0].legs[0].start_address +
          '<br/>Location Type: ' + response.geocoded_waypoints[0].types +
          '<br/>Place ID: ' + response.geocoded_waypoints[0].place_id;
        this.infoWindowFunction(infoWindow, content, map, marker);

        //---------------------Destination Marker----------------------------
        var marker = new google.maps.Marker({
          map: map,
          position: response.routes[0].legs[0].end_location,
          title: response.routes[0].legs[0].end_address
        });
        var content =
          'Formatted Address: ' + response.routes[0].legs[0].end_address +
          '<br/>Location Type: ' + response.geocoded_waypoints[1].types +
          '<br/>Place ID: ' + response.geocoded_waypoints[1].place_id;
        this.infoWindowFunction(infoWindow, content, map, marker);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
}

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 Highcharts Angular library is struggling to access the 'series' property due to it being undefined

Encountered an error message that has puzzled me. I am eager to explore highstock.js and its associated files, but I'm uncertain about the best approach. Despite the chart displaying correctly, this error consistently arises. https://i.sstatic.net/p ...

What is the optimal method for navigating through a complex nested object in Angular?

Looking to navigate through a nested object structure called purchase. Within this structure, there is a sub-array named purchaseProducts which contains another sub-array called products along with additional data. What methods do you suggest for efficien ...

What is the ideal location to store your JWT security and secret key?

Currently, I am in the process of creating a web application with .NET Core 2.1 and Angular. To enhance security measures, I am eager to integrate web tokens into the project. From a security standpoint, I am curious about the most optimal location for st ...

Angular 2 - Post-Constructor Lifecycle Event Triggered

I am currently working on a project using Angular 2. After calling the component's constructor, I need to capture an event that indicates when the constructor call has completed. In my constructor, I am making a network call like this: import { Comp ...

Changing the Month Label Format from Short (MMM) to Long (MMMM) in Angular Material Datepicker

I am looking to customize the month labels in Angular Material datepicker. By default, the month view displays in MMM format and I want to change it to MMMM using custom MatDateFormats. export const APP_DATE_FORMATS: MatDateFormats = { parse: { dat ...

Angular 10: A Guide to Utilizing RouterModule

I'm working on enhancing one of my components by adding a button that will navigate the page to a different component : <input type="button" value="Shops List" [routerLink]="['shops-list']" class="btn&qu ...

Misunderstanding the concept of always being right

Here is a code snippet that raises an error in TypeScript: class Status { constructor(public content: string){} } class Visitor { private status: Status | undefined = undefined; visit(tree: Tree) { if (tree.value > 7) { this.status = new ...

picker elementClass()

I encountered an issue while using the datepicker from Material UI. The datepicker has a method called dateClass: dateClass() { return (date: Date): MatCalendarCellCssClasses => { const unvailableArray = this.shareDate.unavailableDates; ...

Angular 4 has the capability to automatically log out in all tabs when a user logs out in one open tab

I am looking to implement a feature where I automatically log out from all open tabs when logging out from one tab. Currently, I am storing a jwt token in localStorage upon login and removing the token upon logout. Any suggestions on how I can utilize st ...

Guide to configuring a function to display the maximum value on a boxplot in Highcharts

I'm currently using Angular in combination with the highcharts boxplot API. While I am aware that I can manually set the max value of the y-axis in the chart configuration, such as: max: 100, tickInterval: 10. There's now a need for me to dynami ...

What is the best way to declare an array of objects within another array using typescript?

If you need to create an array of objects, the syntax would be: public racks: Rack[]; However, I am looking to create an array that can hold multiple arrays of racks, like this: [ [rack1, rack2, rack3], [rack4, rack5, rack6], [rack7] ] How ca ...

I'm encountering problems with downgrading packages in Angular 4

Recently, I inherited an Angular project from my company. Despite being new to Angular, I tried starting the project after running npm install. However, I encountered the error below and provided details of my package in hopes of receiving instructions to ...

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

What is the best way to retrieve TemplateRef from an Angular component?

TS Component ngOnInit() { if(somecondition) // The line of code that is causing issues this.openModal(#tempName); } HTML Component <ng-template #tempName> Content goes here! </ng-template> this.openModal(#tempNa ...

The Karma testing feature in Angular Quickstart encounters issues right from the start

When attempting to run karma tests after a clean install of the official Angular quickstart on Windows 10, I encountered an issue. Following a series of four commands, here is what happened: C:\projects\temp>git clone https://github.com/angul ...

Encountering an issue with MUI Props: "Must provide 4 to 5 type arguments."

I'm attempting to use a custom component and pass in AutocompleteProps as a prop, all while utilizing typescript. Here's my current setup: type Props = { autoCompleteProps?: AutocompleteProps<T> label: string loading?: boolean } cons ...

Angular: adding a component to the root module

I'm currently learning Angular and I've created an Angular project with the following file structure: Angular Project File Structure data-table.component.ts: import { Component, OnInit, PipeTransform, Pipe, Input } from '@angular/core&apos ...

Leverage the generic parameter type inferred from one function to dynamically type other functions

I am in the process of developing an API for displaying a schema graph. Here is a simplified version of what it entails: interface Node { name: string; } type NodeNames<T extends Node[]> = T[number]["name"]; // Union of all node names as strings ...

Issue encountered during frida-il2cpp-bridge module installation

Having trouble with installing the frida module (frida-il2cpp-bridge)? I followed the steps, but encountered errors. You can check out the installation steps here. The specific error message I received is: Spawned `com.games`. Resuming main thread! Refe ...

Delete a specific element from an array using a specified criteria

I'm attempting to remove a specific item from an array based on the selected option. To better understand, take a look at this code: component.html <fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" name="tipoprodotto"> ...