Ionic 2 with Google Maps

Ionic Framework ionic-v3
1

I am using ionic 2 (beta11) and Google maps. I have a page that works fine, and it displays the map as expected.

To access this page, I click on an item and the page is loaded via this.nav.push(MapPage, {. As you can see the map loads:

enter image description here

However, when I go up another level, and do this.nav.push(MapPage, { again (displaying the same page), the page is displayed, but the map looks like this:

enter image description here

So it has navigated from one page to the same page, but the second time the map is not visible.

Here is my code:

html

  <ion-card id="map" class="job-map"></ion-card>

map.ts

  load(bounds: google.maps.LatLngBounds): void {
    let mapOptions = {
      center: bounds.getCenter(),
      zoom: 15,
      maxZoom: 15,
      minZoom: 1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var htmlElement: HTMLElement = document.getElementById("map");
    this.map = new google.maps.Map(htmlElement, mapOptions);
    this.map.fitBounds(bounds);
    this.ref.markForCheck();
    this.mapLoading = false;
  }

If anyone can offer any suggestions, I would appreciate it.

2

Is it because there are two pages on the stack, and both pages have the same element with id “map”, and it is only applying it to the first one?

3

The problem was because there were two pages on the stack with the same element id of “map”. If I give each page a unique id, it works.