Google maps autocomplete doesnt works in a second component

[robdom12]

I have a places list and an option to add places, when I click on add, its push to MapTestcomponent where I have an input that is filled with the autocomplete function of google maps, it works, but if push to my place list from a third component, when i access to my form , the input changes the attributes and doesnt works. why?

List of places HTML

<ion-content padding>
<ion-list inset>
  <ion-item text-wrap *ngFor="let item of direcciones$ | async">
    <ion-icon name='ios-navigate-outline' item-start></ion-icon>
    <p class="name">{{item.name}}</p>
    <p>{{item.name}}</p>
  </ion-item>
  <ion-item (click)="addPlace()">
    <ion-icon name='add' item-start></ion-icon>
    <p class="nombre">Add</p>
  </ion-item>
</ion-list>

List of places .ts

   addPlace(){

    this.navCtrl.push("AddPlacePage");
  }

AddPlace html

<ion-content padding>
  <form>
    <ion-item>
      <ion-label floating>Name</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Comments</ion-label>
      <ion-textarea id="Commentstxt" rows="6" cols="20" ></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-label floating>Address</ion-label>
      <ion-input  id="Addtxt" type="text"></ion-input>
    </ion-item>
  </form>
</ion-content>

AddPlace ts

this.mapsAPILoader.load().then(
  () => {
    // let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, { types: ["address"] });
    let nativeHomeInputBox = document.getElementById('Addtxt').getElementsByTagName('input')[0];
    let ionicTxtAr = document.getElementById('commentstxt').getElementsByTagName('textarea')[0];

    console.log(nativeHomeInputBox)

PD: this is only part of my ts

and works!

but if i push from a third component to place list, the input change to this, and doesnt works