Google Maps

Ionic Framework ionic-v3
1

I am using Ionic2.

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
OS:
Node Version: v6.2.2

I have two pages, each that load google maps. When I load them they work perfectly. However, if I access one page, it loads fine, but when I access another page that loads google maps straight after, the map does not render. If I access another page with no maps, then access the map page, it works perfectly again.

It is as if a previous pages map is preventing the current pages map from loading.

page1

html

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

ts

let htmlElement: HTMLElement = document.getElementById("map");
this.map = new google.maps.Map(htmlElement, mapOptions);

page2

html

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

ts

let htmlElement: HTMLElement = document.getElementById("map");
this.map = new google.maps.Map(htmlElement, mapOptions);

If I change the id to anything other than "map", it does not render.

If anyone can help, I would appreciate it.