I’m trying to implement the google places API in the ionic form. here’s the code:

onPageLoaded() {
var input = document.getElementById(‘autocomplete’);
var options = {componentRestrictions: {country: ‘us’}};
new google.maps.places.Autocomplete(input, options);

but this is what i get: InvalidValueError: not an instance of HTMLInputElement

ngAfterViewInit() {
    var input = document.getElementById('autocomplete');
    var options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(input, options);
              
I’m having the same problem.
<ion-input id="autocompleteInput" type="text" [(ngModel)]="data.location"></ion-input>
Either on PageLoaded or on ngAfterViewInit, the problem is that getElementById is returning a TextIput (from an ion-input) not an HTMLInputElement (regular input) as Google API is expecting.
I have no idea how to either cast it, or get the  inside the .
              
If you do it like this it should work:
ngAfterViewInit() {
    var input = document.getElementById('autocomplete').getElementsByTagName('input')[0];
    var options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(input, options);
              
Using @joshmorony’s solution should work.

The ion-input element in a template creates more than just an input element when it is rendered, which explains why people are getting the “not an instance of HTMLInputElement” error.
I’m wondering though, if there are any other ways of getting a component’s elements from the angular framework rather than searching the DOM.

I’m worried about more complex pages that use components multiple times, potentially resulting in duplication of an ID.
              
So a better way to do this now would be to use a local variable rather than searching the DOM. You can give something a local variable like this:
<div #myElement></div>
and then grab it using @ViewChild:
import {ElementRef, ViewChild} from '@angular/core';
@ViewChild('myElement') myElement: ElementRef;
constructor(){
Now a reference to the element will be available throughout the class. In this case you would need to do:
ngAfterViewInit() {
    let options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(this.myElement.nativeElement, options);
              
@clarkdrimlike

I have the same problem. Did you find a solution ?

Someone as a solution using @joshmorony’s with <ion-input>  ?

Thanks.
              
I gave the <ion-input> an id of id="locationSearchInput"
Then I grabbed the actual input like this which seems pretty dirty
const input = document.getElementById('locationSearchInput').getElementsByTagName('input')[0];
And used it with Google Places for example.
      new google.maps.places.Autocomplete(input, {
        types: []
              
Here is how i got it working

import { Component, ViewChild, NgZone, ElementRef } from ‘@angular/core’;
export class MapPage {

@ViewChild(“search”, { read: ElementRef })

public searchElementRef;
constructor(){}
autocomplete() {

… blabla
    let inputField = this.searchElementRef.nativeElement.getElementsByTagName('input')[0];
    let autocomplete = new google.maps.places.Autocomplete( inputField, {
      types: ["address"]
              
<ion-input type=“number” id=“amtRcv” [(ngModel)]=“dataMaster.my_Rcvpmt” (ionChange)=“onChange($event)” class=“clix-input-1”>
setAmount(){
var my_Rcvpmt1 = document.getElementById(‘amtRcvt’).getElementsByTagName(‘my_Rcvpmt1’)[0];
alert (‘my value2:’+ my_Rcvpmt1 );

i want to get value from this ion-input field but
I am not getting value “undefined”
can anybody help me please