Moment For Technology

Autocomplete with the Google Map API in Ionic or Angular

Posted on Aug. 10, 2023, 10:16 a.m. by Ms. Holly Steele
Category: ionic Tag: angular6 ionic google-maps

First on the renderings:


Implementation steps:

Ionic or Angular is installed globally using NPM, regardless of the environment. Ionic is used as an example in this paper.

1. Installtype/googlemaps
npm install type/googlemaps -save
2. Declare the Google API Key in your applicationindex.htmlIn the
To apply for the address

Replace the value at key with your key and place the code in index.html

script src=""/script
3. Write code

I'm just going to use home

4. Run to see the effect

A few considerations

1. If you are Angular6 or above, be sure to state this in the first line of the relevant TS file

/// reference types="@types/googlemaps" /

If not, please declare this line of code

import {} from "googlemaps";

Specific discussion here:

2. I'm using the tag, whereas the API supports the native HTML tag. If it is not native, this error will be reported:

So my code for getPlaceAutoComplete () fetching the DOM in the file looks like this

let ele = document.getElementById('addresstext').getElementsByTagName('input')[0];
If it's nativeinput /Label, you can also write:

(For detailed code, please refer to GitHub address)

The HTML file

input #addresstext style="border:1px solid #111; width: 100%" /

Ts file

/// reference types="@types/googlemaps" / import { Component, ViewChild, OnInit, AfterViewInit , NgZone } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: '', styleUrls: [''], }) export class HomePage implements OnInit, AfterViewInit { @ViewChild('addresstext') addresstext: any; . private getPlaceAutocomplete() { let ele = this.addresstext.nativeElement; const autocomplete = new google.maps.places.Autocomplete(ele, { ... }}

The difference is that if it's native HTML, Google will automatically add placeholder for you :)

3*. Although it is inngAfterViewInit()In theory, the view is already initialized, so the DOM should be rendered. However, in the real project, you will still have the following error

For a guess, Google couldn't find the relevant DOM node at first, so I added one heresetTimeout()

ngAfterViewInit() { setTimeout(() = { this.getPlaceAutocomplete(); }, 1000); }
About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.