MAP_READY doesn't load on second Instance

I’m submitting a … (check one with “x”) [ x ] question [ ] any problem or bug report [ ] feature request

The plugin version: (check one with “x”) [ ] 1.4.x [ x ] 2.0.0-beta3

If you choose ‘problem or bug report’, please select OS: (check one with “x”) [ ] Android [ ] iOS

cordova information: (run $> cordova plugin list)

cordova-plugin-googlemaps 2.0.0-beta3-20170903-1743 "cordova-plugin-googlemaps"

Current behavior:

The map logic is inside the MapsPage, when I enter to the MapsPage the map loads correctly, from there I go to another page, and from that page I go again to the MapsPage (pushing the page, not popping it from the navigation stack), now the map never hits the MAP_READY event. I don’t want to destroy the first map, because I might go back to it later.

What am I missing to see the expected behavior?

Environment info: local packages: ionic/app-scripts : 2.1.3 Cordova Platforms : android 6.2.3 Ionic Framework : ionic-angular 3.6.0 System: Android SDK Tools : 25.1.3 Node : v6.11.2 npm : 5.0.4 OS : Windows 10

Expected behavior:

The map should hit the MAP_READY event again (the second time I enter to the MapsPage), with a new id for the map.

Steps to reproduce:

1. Add maps plugin
2. Go to the Maps Page
3. Go from the MapsPage to a second page
4. Go from that second page to the MapsPage (pushing the MapsPage, not popping it)
5. The MAP_READY event doesn’t fire again

Screen capture or video record:

Related code, data or error log (please format your code or data):

Code for the Maps Page:

.ts file:

  map: any;
  selectedMarker: {
    title: string,
    snippet: string
  }
  constructor(
    private navCtrl: NavController,
    private platform: Platform) {
    this.setSelectedMarker("Hello Friend...", "¡¡¡Click Me!!!");
    let mapCenter: LatLng = new LatLng(-17.3829278, -66.1596725);
    setTimeout(() => {
      this.loadMap(mapCenter).then(success => {
        this.addMarker(mapCenter);
      });
    }, 1)
  }

  private setSelectedMarker(title: string, snippet: string) {
    this.selectedMarker = {
      title: title,
      snippet: snippet
    }
  }

  private loadMap(mapCenter: LatLng): Promise<boolean> {
    var promise: Promise<boolean> = new Promise<boolean>(resolve => {
      this.platform.ready().then(() => {
        console.log("Platform ready!");
        let element = document.getElementById('map');
        this.map = (<any>window).plugin.google.maps.Map.getMap(element, this.getMapConfigurations(mapCenter));
        this.map.one((<any>window).plugin.google.maps.event.MAP_READY, map => {
          console.log("Map Ready!");
          resolve(true);
        });
      });
    });
    return promise;
  }

  private addMarker(pinPos: LatLng) {
    let markerOptions: MarkerOptions = {
      position: pinPos,
      title: "Hello",
      snippet: "World!"
    }
    this.map.addMarker(markerOptions);
  }

  private goToSecondMap() {
    this.navCtrl.push(BlackPage);
  }

  private getMapConfigurations(mapCenter: LatLng) {
    return {
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': false
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': mapCenter,
        'tilt': 10,
        'zoom': 15,
        'bearing': 15
      }
    }
  }

.html file:

<ion-header>

  <ion-navbar>
    <ion-title>Maps</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <div class="mapsSpace">
    <div id="map" class="map"></div>
  </div>

  <div class="noMapSpace" on-tap="goToSecondMap()">
    <div class="hostSpace">
      <div class="hostInfo">
        <div class="hostAddress">{{selectedMarker.title}}</div>
        <div class="hostAddress">{{selectedMarker.snippet}}</div>
      </div>
    </div>
  </div>

</ion-content>

.scss file:

ion-app._gmaps_cdv_ .nav-decor {
    background-color: transparent;
    display: none !important;
  }

  page-maps {
    .mapsSpace{
      height: 100%;
    }

    .map {
      height: 100%;
    }

    .noMapSpace {
      z-index: 1000;
      opacity: 0.8;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 12vh;
      left: 5vw;
      height: 15vh;
      width: 90vw;
      padding: 5px 0;
      background-color: #1C1C1C; //border: solid 2px color($colors, darkGray);
    }

    .hostSpace {
      margin: 0;    
      display: flex;
      align-items: center;
      justify-content: center; //background-color: $cardBackgroundColor;
      border-radius: 10px;
    }

    .hostInfo {
      width: 65vw;
      padding: 0 10px;
    }

    .hostAddress {
      color: white;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
}

---

If your problem is solved, please consider small amount donation to this project. Appreciate for your kindness. https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/README.md#buy-me-a-beer

[wf9a5m75]

Check out this project. https://github.com/carvemerson/map

[wf9a5m75]

Maybe this? https://github.com/mapsplugin/v2.0-demo