Switch the value to a public object on Google's autocomplete feature

I have a public object called location, and when the callback is executed, I need to assign values to that object....

public location: any;

ngOnInit() {
        let autocomplete = new google.maps.places.Autocomplete((this.search.nativeElement), {types: ['(cities)']});

        //add event listener to Google Autocomplete and capture address input
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            let place = autocomplete.getPlace();
        });

}

Therefore, I require the place from the addListener function to be assigned to the public variable location... How can this be achieved?

Answer №1

When working with Google context in a callback, it's important to define your object instance to another variable instead of using "this".

This is how I typically handle it:

public location: any;

ngOnInit() {
        let autocomplete = new google.maps.places.Autocomplete((this.search.nativeElement), {types: ['(cities)']});

        //add event listener to google autocomplete and capture address input
        
        let self = this;
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            self.location = autocomplete.getPlace();
        });

}

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

Tips on transforming a JSON array object into a JSON array

**Background:** I have been utilizing lodash to eliminate the empty key from my JSON data. However, upon removal of the keys, it transforms my array into an object. For instance: { "projection": "Miller", "series": [ { "mapPolygons": { ...

Ways to merge various Ajax call data requests from distinct JavaScript files

I have code in a file that is responsible for making Ajax calls. This file is utilized as a function by several other files, each creating a new instance. Here is the JavaScript code being called: define(["underscore", "homeop", "domReady!"], funct ...

Learn how Angular 2 allows you to easily add multiple classes using the [class.className] binding

One way to add a single class is by using this syntax: [class.loading-state]="loading" But what if you want to add multiple classes? For example, if loading is true, you want to add the classes "loading-state" and "my-class". Is there a way to achieve t ...

Leveraging asynchronous response data within asynchronous components

Here's the structure of a parent component and a child component: export default { name : 'parentNode', mounted: function () { var that = this; if (that.$store.state.auth.isAuthenticated) { that. ...

Mysterious Loop in JavaScript Unfolding with Three.Js

In order to expand my knowledge of Angular and Three.Js, I am currently working on a prototype SPA that showcases different 3D elements rotating. There are several Angular templates accessible through a navigation menu, each displaying unique rotating elem ...

In Angular, what is the best way to change the format of the timestamp '2019-02-22T12:11:00Z' to 'DD/MM/YYYY HH:MM:SS'?

I am currently working on integrating the Clockify API. I have been able to retrieve all time entries from the API, which include the start and end times of tasks in the format 2019-02-22T12:11:00Z. My goal is to convert the above date format into DD/MM/Y ...

The attribute 'getTime' is not found in the data type 'number | Date'

class SW { private startTime: number | Date private endTime: number | Date constructor() { this.startTime = 0, this.endTime = 0 } start() { this.startTime = new Date(); } stop() { this.endTim ...

Preserve the form's values after an onclick event to maintain the user's input in session storage

My website consists of a single page with an interface designed to showcase prediction results in {{ prediction_text }} from a flask backend. Users input values into a form that utilizes the app.py script to generate prediction outcomes. The issue I am fac ...

Using JS and d3.js to eliminate or combine duplicate connections in a d3.js node diagram

Hey there! Hello, I am new to working with js/d3.js and tackling a small project. Here are some of my previous inquiries: D3.js: Dynamically create source and target based on identical JSON values JS / d3.js: Steps for highlighting adjacent links My cu ...

Custom-designed foundation UI element with a parameter triggers TypeScript issue

When running this tsx code: import React from "react"; import BaseButton from "@mui/base/Button"; import styled from "@emotion/styled"; export const enum BUTTON_TYPE { MAIN = "main", LINK = "link", } ...

The Node.js azure-storage TableService does not offer any functionalities or operations

Having trouble connecting to my Azure storage account due to issues with the azure-storage module. Specifically, after creating a TableService object, I am only able to access the filter method on it. When attempting to use methods like queryTables and cre ...

Is it possible to save the project by generating incremental JSON diffs?

In the process of developing a web-based paint program, I have implemented a system where the user's artwork state is saved as a json object. Each time an addition is made to the client's undo stack (which consists of json objects describing the ...

Passing all emitted events from Vue 3 child component to its parent - A complete guide

My Vue components are structured as follows: <TopParent> <!-- Listening for events from EventProducer here --> <Child_1> <Child_2> <Child_3> ... <Child_N> <EventProducer /> &l ...

The continuous invocation of the ngStyle background-image in Angular 4 is causing a decrease in the loading speed of the page

I'm currently working on an Angular CLI Project "@angular/cli": "^1.1.1", "@angular/compiler-cli": "^4.0.0", In order to dynamically load images from the assets folder within an ng-for loop, I am using the following line of code: [ngStyle]="{&a ...

The state of the button remains unchanged in jQuery/Rails 3

After immersing myself in the Hartl Rails 3 tutorial for a few days (about 4 to be exact), I encountered an issue while attempting to convert the site from prototype to jQuery in chapter 12. The problem lies in getting the "follow"/"unfollow" button to upd ...

Converting data into a multidimensional array in AngularJS: A comprehensive guide

Struggling to convert a JSON array into a multidimensional array, looking for some guidance. I attempted using _.groupBy in underscore.js, but it's not proving successful with the nested array. If there is any way to convert from the given data [{ ...

Three.js Collada Loader struggles to load a small scene with multiple objects

While I am new to Three.js, the question I have is quite complex. I am working with a Collada scene in DAE format, which actually includes references to other DAE files. The structure of this "parent" file looks something like this: <library_visual_sc ...

The issue with functions not executing when triggered by HammerJS

In my application, there is a component that displays information for different days as they are cycled through using the functions dayUp() and dayDown(). Here is an example of how these functions are structured: dayUp() { if (this.dayCount == 7) { ...

Utilizing Ajax to update the login form without reloading the page and displaying any errors

I have created a login form that utilizes ajax to handle login errors such as "incorrect password" from my login.php file. Instead of reloading a new page with the error message, it now displays the errors on the same login form, which is working perfectly ...

Populate an array of objects with time values up to 24 hours ago

Here is an array of objects that I am working with: {x: "14:33", y: 0} {x: "14:34", y: 0} {x: "14:35", y: 1} {x: "14:36", y: 1} {x: "14:37", y: 0} {x: "15:33", y: 0} {x: "15:34", y: 0} {x: "15:35", y: 1} {x: "15:36", y: 1} {x: "15:37", y: 0} Let's c ...