Google Maps make my page transparent

Ionic Framework ionic-v3
1

Hi guys,me again lol.
when i try load the google maps in another page, they made my page transparent as you see in the image,
but when i try load in my home.ts, inside of platform.ready, he works, but when i try load in my page he fails


https://postimg.org/image/igqlu86hj/

my code

home.ts

  import {Component, OnInit, Input} from '@angular/core';
  import {NavController, Platform} from 'ionic-angular';
  import {GoogleMap, GoogleMapsEvent, GoogleMapsMarker, GoogleMapsLatLng, Geolocation} from 'ionic-native';

  import {PetShop} from '../../model/PetShop';
  import {DetailsPetPage} from '../details-pet/details-pet';

  @Component({
    templateUrl: 'build/pages/home/home.html'
  })
  export class HomePage implements OnInit{
    private map;

    constructor(
        private navCtrl: NavController,
        private platform:Platform
    ) {
      console.log(this.pets);
      this.platform.ready().then(() => {

         });
      }

      ngOnInit(){

      }

      tap(petshop){

        this.navCtrl.push(DetailsPetPage,{pet: petshop})
      }

    
  }

home.html

<ion-header>
  <ion-navbar danger>
    <ion-title>Home</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="home">
  <h2>Welcome to Ionic!</h2>

  <ion-card *ngFor="let pet of pets" (click)="tap(pet)">
      <ion-card-header>
        [{{pet.id}}]{{pet.name}}
      </ion-card-header>
      <ion-card-content>
        Lorem  Ipsum
        {{pet.distance}}

      </ion-card-content>

  </ion-card>
    <div id="map"></div>
</ion-content>

details.ts

import {Component, OnInit} from '@angular/core';
import {NavController, NavParams, Platform} from 'ionic-angular';
import {Geolocation, GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} from "ionic-native/dist/index";

@Component({
  templateUrl: 'build/pages/details-pet/details-pet.html',
})
export class DetailsPetPage implements OnInit {
  private map;
  private petshop;

  constructor(
      private nav: NavController,
      private navParams:NavParams,
      private platform:Platform
  ) {

  }

  ngOnInit():any {
    this.petshop = this.navParams.get("pet");
    this.platform.ready().then(()=>{
      this.setupMap() 
    });


  }

  setupMap(){
    this.map = new GoogleMap('map-details');

    GoogleMap.isAvailable().then(() => {
      console.log("Map is Avaliable");

      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        console.log("MAp is ready");

        let myPosition = new GoogleMapsLatLng(38.9072, -77.0369);
        console.log("My position is", myPosition);

        let latLng = new GoogleMapsLatLng(-23.6339946,-46.6077185);


        this.map.setCenter(latLng);
        this.map.addMarker({icon:"blue",title:"Discubra", position: latLng});
        this.map.animateCamera({ target: latLng, zoom: 10 });
      });
    });
    /*var options =  {
      enableHighAccuracy: true,
      timeout: 5000
    };
    Geolocation.getCurrentPosition(options).then((resp) => {
      let lat = resp.coords.latitude;
      let lon = resp.coords.longitude;

      console.log("Positions is avaliable",resp.coords);

      this.map = new GoogleMap('map');


      GoogleMap.isAvailable().then(() => {

        console.log("Google is avaliable");

        this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
          console.log("Maps i avaliable");

          let myPosition = new GoogleMapsLatLng(lat,lon);
          this.map.setCenter(myPosition);
          this.map.addMarker({icon:"blue",title:"Estou aqui", position: myPosition});

          let petLocation = new GoogleMapsLatLng(this.petshop.latitude,this.petshop.longitude);
          this.map.addMarker({icon:"blue",title:"Estou aqui", position: myPosition});

          this.map.animateCamera({ target: myPosition, zoom: 10 });
        });
      });


    }).catch((e)=>{
      console.log("error gps ",e);
    })*/

  }

}

detail.html

<!--
  Generated template for the DetailsPetPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar danger>
    <ion-title>{{petshop.name}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  OK
  <div id="map-details"></div>
</ion-content>

detai.scss
.details-pet {
.scroll,
#map-details{
width: 100%;
height: 100%;
}
}

2

anyone can help me ? ‘-’

3

I don´t know how to solve it just yet, i´d try changing the background color of everything else except for the div, but you might find relief in knowing that thats how the google maps native plugin works.

for more information you can check it on the plugin´s documentation here: https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work

4

Te prevent the transparency i put this

this.map.remove()

On my ngOnDestroy