CODEWITHSUNDEEP
angulargoogle-mapsionic-frameworkgoogle-api
Jibs
Jibs

Reputation: 11

How to fix: InvalidValueError: not an instance of HTMLInputElement with Ionic 4/5

I have this error that I can not solve, actively sought on ionic forum and on Stackoverflow but nothing works. I’m trying to implement the google places API in the ion-search-bar.

I've made this tutorial: https://github.com/angular-material-extensions/google-maps-autocomplete Thank you in advance for your help.

tab1.page.html 

<ion-searchbar placeholder="Adresse / Parcelle" autocomplete mode="md" class="searchbar"
    matInput
    matGoogleMapsAutocomplete
    [country]="de"
    (onAutocompleteSelected)="onAutocompleteSelected($event)"
    (onLocationSelected)="onLocationSelected($event)">
   </ion-searchbar>

tab1.module.ts

export class Tab1PageModule implements AfterViewInit {

  ngAfterViewInit() {
    let input = document.getElementById('autocomplete').getElementsByTagName('input')[0];
    let options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(input, options);
};
}

Upvotes: 1

Views: 2326

Answers (1)

Mutondi
Mutondi

Reputation: 41

use the getInputElement Method of the ion component. It will return the native ELEMENT you can use.

  1. Put a #mysearch on your ionSearch, then you will need to define it:

    @ViewChild("mySearch",{static:false}) searchElementRef: IonSearch**Bar**; (remember to import IonSearchBar!!!)

  2. In your method: use the provided getInputElement() from ionic which returns the native component. 

    this.searchElementRef.getInputElement().then((input:HTMLInputElement)=>{
    var autocomplete = new google.maps.places.Autocomplete(input, {
    types: ["geocode"]


    });
)

  3. You can use this for ion-input too!

Upvotes: 4

Related Questions