Ionic 2 with Google Maps


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:


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


  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"); = new google.maps.Map(htmlElement, mapOptions);;
    this.mapLoading = false;

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


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?


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.