Retrieve location details from a geocoding service similar to the autocomplete feature on Google

Using the AutoComplete feature of Google Maps has been quite helpful for me.

Upon selecting a location from the list, I am able to retrieve the place using the autoComplete.getPlace() function. One of the variables within this function is adr_address and its value is formatted like so:

"<span class="street-address">xxx</span>, <span class="locality">xxx</span>, <span class="country-name">xxx</span>"

The issue arises when I manually input the address instead of choosing it from the list. In such cases, the adr_address variable is not available in the getPlace function. To work around this, I verify the address using Geocoder. If the status returned by Geocoder is OK, I want to obtain a similar result as the one provided by adr_address.

Is there a way to achieve this?

angulartypescriptgoogle-mapsautocompleteangular-cli

Answer №1

I discovered a method to retrieve adr_address using Geocoder with place_id and PlacesService.

new google.maps.Geocoder().geocode({"address":location }, function(results, status){
                        if (status == google.maps.GeocoderStatus.OK) {
                            var service = new google.maps.places.PlacesService(document.createElement('div'));
                            service.getDetails({
                                placeId: results[0].place_id
                            }, function(place, status) {
                                if (status === google.maps.places.PlacesServiceStatus.OK) {
                                    doSomething(place.adr_address);
                                }
                            });
                        }
                        else {
                            //Geocoding failed
                        }
                    });

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

Is it appropriate to incorporate existing cshtml markup from MVC into Angular 6?

I am currently working on a project that involves migrating an MVC application to Angular6. The designs for this project are already created in cshtml files, which are essentially views. My question is, would it be acceptable to use these existing designs ...

asp.net-mvcangularmigration

Obtain multiple class instances through HTTP-Get in Angular

Initially, explaining this with my actual code can be confusing, so I'll simplify the issue using a smaller example. Imagine my project retrieves data from 2 tables on the server, employeeDetails and employeeNames. employeeNames: This table consists ...

angulartypescriptasync-awaitangular-promisehttp-get

Changing the Angular form based on the value selected from the drop-down menu

I am currently working on a Reactive form in Angular 7 that includes 2 dropdowns (select) which are supposed to function as cascading dropdowns. However, I am facing an issue where the cascading dropdowns are not working as intended. Whenever I select an o ...

javascriptangulartypescriptangular-reactive-forms

Troubleshooting Appium error management is ineffective

As a newcomer to appium, I might have made some mistakes. I'm encountering a problem with appium while using wdio and jasmine. it('wtf', (done) => { client.init().element('someName').getText() // ^ here ...

javascripttypescriptjasmineappiumwebdriver-io

Where should an EventListener be added in an Angular Service Worker?

I am currently in the process of developing an Angular Progressive Web Application (PWA) with offline capabilities. While I have made significant progress, I am facing challenges regarding events for the service worker. Specifically, I am unsure about wher ...

angulartypescriptangular-service-workerservice-worker-events

Angular's trio of services tied in a circle of dependency

I'm encountering an issue with my angular project. These warnings keep popping up: WARNING in Circular dependency detected: src\app\core\http\content.service.ts -> src\app\core\http\domain.service.ts -> ...

angulartypescriptcircular-dependency

The process of accessing XMLHttpRequest in Angular

How can I enable XMLHttpRequest in Angular? I am trying to access getData.php and encountering the following error: Access to XMLHttpRequest at 'http://localhost:8888/*****/****/getData.php' from origin 'http://localhost:4200' has been ...

javascriptphpangular

Incorporate a dynamic background image that adapts to the width of an element

In my Angular application, I am utilizing a mat-card component to showcase the details of each individual prof object: <mat-card class="mat-elevation-z4"> <mat-card-header> <mat-card-title>{{prof["fullName&quo ...

angular

Issue with Angular 6: Unable to match nested routes

I am working on a project to test nested routing in Angular. While the app-routes are functioning correctly, I am encountering an error stating that the children "cannot match any routes". After checking other solutions, I am still confused due to version ...

angularnested-routes

The transformation of interfaces into types using module augmentation in Typescript

Can interface be changed to type when adding modules with TS? I am looking to customize the Theme in Material-UI with my own properties. I have created a file called createPalette.d.ts: import '@material-ui/core/styles/createPalette'; declare mo ...

javascripttypescriptmaterial-ui

Enabling state persistence in NextJS version 13 across multiple pages

Just getting started with NextJS and noticed that the old method of persisting components/state using _app.js is deprecated in NextJS 13. The new routing model allows for a layout.js file to house common components. However, I'm encountering an issue ...

reactjstypescriptnext.js

Finding the IP address of a server in Angular: A Comprehensive Guide

Is there a way to dynamically retrieve the server host IP address in an Angular application launched with ng serve --host 0.0.0.0? This IP address will be necessary for communication with the backend server. As each coworker has their own unique IP addres ...

node.jsangulartypescript

The assigned type 'string' for Apache ECharts does not match the expected type 'pictorialBar'

This demonstration is functional. Nevertheless, the options utilize any and my goal is to convert them to the EChartOption type. This is my current progress and the demonstration compiles successfully with this setup (With type: 'bar' commented ...

angulartypescriptechartsngx-echarts

A step-by-step guide to showcasing images in Angular using their respective local image paths

I have developed a Spring REST controller to upload images to my local file system and save their paths in a database. I now want to display these images in a browser using Angular 5 in a table format. I am fetching the image paths as a list and serving ...

angularspring-boot

Converting and downloading CSV to XLSX directly from the front end using TypeScript and React

After successfully converting a JSON response to CSV format for download using the function below, I am now looking to achieve the same functionality but with xlsx files on the front end. The current function works well for CSV files and handles Japanese ...

javascriptreactjsexceltypescriptcsv

A guide on creating dynamic field names for trees in TypeScript

Example: interface Tree { [key: string]: Tree | {name: string} } const t: Tree = { b: { name: 'test 1' }, c: { d: { name: 'test 2' } }, e: { f: { g: { name: 'test 3' } ...

typescript

Using multiple Y-Axes with ng2-chart results in a specific error stating that it is not compatible with the type '_DeepPartialObject<{type: "time"; } & Omit<CartesianScaleOptions'

Currently, I've implemented ng2-charts in Angular 15 to showcase a line chart containing two sets of data positioned on both sides of the Y-Axis. The code snippet utilized is as follows: public chart1Data: ChartConfiguration<'line'> ...

angularng2-charts

How can we track and record NaN values in JavaScript/TypeScript as they occur in real-time?

Is there a reliable method to identify and prevent NaN values during runtime, throughout all areas of the application where they might arise? A) Are there effective linting tools available to alert about possible occurrences of NaN values within specific ...

javascripttypescripterror-handlinglinthealth-monitoring

What is the best way to turn off the annoying pop-up messages that show up for input validation, specifically the one that says "Please complete

Currently using Angular 2, my form has input fields similar to this simplified version: <input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1"> <!--more inputs like this --> Although I have implement ...

javascripthtmlformsangular

Utilizing React-hook-Form to transfer data between two SelectBoxes

This simple logic is causing me some trouble. Despite using react-hook-form, I thought this would be easy. However, after struggling with it for over a week, I'm still facing challenges. I'm incorporating nextUI components into my project. < ...

reactjstypescriptreact-hook-formreact-forms