Location Autocomplete doesnt Work

Ionic Framework
1 
home.html
<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-input #search  [(ngModel)]="source"  id="source" placeholder="Source"></ion-input> <br>
        <ion-input [(ngModel)]="destination" id="destination" placeholder="Destination"></ion-input>
    </ion-list>
    <ion-button expand="full" (click)="getdirection()">Get Direction</ion-button>
    <div #mapElement class="map"></div>  
</ion-content>

home.ts
import { Component, ViewChild, OnInit, AfterContentInit, ElementRef  } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { MapsAPILoader } from '@agm/core';
declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit , AfterContentInit {
  latitude: number;
  longitude: number;
  destination: string = '';
  source: string = '';
  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;
  map;
  @ViewChild('search', { read: ElementRef } ) searchElementRef: ElementRef;
  @ViewChild('mapElement') mapElement;
constructor( private geolocation: Geolocation,private mapsAPILoader: MapsAPILoader) {
  this.source = '';
  this.destination = '';

}

ngOnInit() {
 
}

ngAfterViewInit() {
  //let source_input =  (document.getElementById('source').getElementsByTagName('input')[0] as HTMLInputElement);
 // let destination_input = (document.getElementById('destination').getElementsByTagName('input')[0] as HTMLInputElement);
 this.mapsAPILoader.load().then(() => {
  let options = {
    types: ['geocode'],
    componentRestrictions: {country: 'IN'}
    };

  let autocomplete1 = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, options);
  //let autocomplete2 = new google.maps.places.Autocomplete(destination_input, options);

  let self = this;

  google.maps.event.addListener(autocomplete1, 'place_changed', function() {
    let place = autocomplete1.getPlace();
    let geometry = place.geometry();

    if ((geometry) !== undefined) {
      console.log(place.name);
      console.log(geometry.location.lng());
      console.log(geometry.location.lat());
    }
  });

  // google.maps.event.addListener(autocomplete2, 'place_changed', function() {
  //   let place = autocomplete2.getPlace();
  //   let geometry = place.geometry();

  //   if ((geometry) !== undefined) {
  //     console.log(place.name);
  //     console.log(geometry.location.lng());
  //     console.log(geometry.location.lat());
  //   }
  // });
 });
  
}
ngAfterContentInit(): void {
  this.geolocation.getCurrentPosition().then((res) => {
    this.latitude = res.coords.latitude;
    this.longitude = res.coords.longitude;
    this.map = new google.maps.Map(
      this.mapElement.nativeElement,
      {
        center: {lat: this.latitude, lng: this.longitude},
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    
    this.directionsDisplay.setMap(this.map);
    this.addMarker(this.map);
  }).catch((error) => {
    window.alert('Error Getting Coordinates!');
  });
}

addMarker(map: any) {
  let latlong = new google.maps.LatLng(this.latitude, this.longitude);
  let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: latlong
  });
 
  let content = '<h4>Location..</h4>';
  
  this.addInfoWindow(marker, content);
  }
  addInfoWindow(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });

  }

  getdirection() {
     this.directionsService.route({
      origin:this.source,
      destination: this.destination,
      travelMode: 'DRIVING'
    }, (response, status) => {
      if (status === 'OK') {
        this.directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
  }


google api
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=My_Key&libraries=places" async defer></script>


Error:
InvalidValueError: not an instance of HTMLInputElement

Please Give any solution please,…

2

I believe this is happening because the maps API is only expecting a simple HTMLInputElement, but your ngModel is tied to an HTMLIonInputElement fromthe framework.

You could try manually styling a generic <input> element and passing that reference to the maps API