ionic2 and google maps messing with back button pop - google-maps

Question

I have a page that will display a google map in ionic2 with the latlong that I pass through to the page, it won't always be the same latlong.
The problem is when I hit this page, it loads fine, I then click the back button in the toolbar and it goes back fine, if I go again into the map screen it loads without issue, click back again no problem, however if I do another back button action from that parent view to go to the home screen all that happens is the briefly flashes the home screen then loads the original screen in view with no content or buttons loaded.
As soon as I disable my new google.maps.Map code everything runs fine.
My code:
//below all the imports
declare var google;
//at the top of the class
longitude: any;
latitude: any;
#ViewChild('map') mapElement: ElementRef;
//in the constructor
this.longitude = navParams.get('longitude');
this.latitude = navParams.get('latitude');
//call map load on page load
ionViewDidLoad() {
setTimeout(() => {
this.loadMap();
},100);
}
loadMap() {
let latLng = new google.maps.LatLng(this.latitude, this.longitude);
let mapEle = this.mapElement.nativeElement;
let mapOptions = {
center: latLng,
zoom: 15
}
//this.map
let map = new google.maps.Map(mapEle, mapOptions);
let marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
google.maps.event.addListenerOnce(map, 'idle', () => {
mapEle.classList.add('show-map');
});
}
So in summary:
View A - push to view B
View B (list of locations) - push to view C with a lat and long parameter
View C (google map displaying the lat long) - pop back to view B
View B can push view C again no problem
View C can pop back to view B no problem
View B pop back to view A - renders a blank view B and there is no longer the back button visible.
I have a feeling that for some reason when I pop back to view B from C it clears the view stack so that would mean view B to A has an issue and it just renders a blank view B....as soon as I disable the logic to create a new google.maps.Map everything works again as expected and I can pop back to View A without issue.
Edit: Upon further investigating it seems that view A does load, the constructor is called etc. but almost immediately view B renders and it's constructor is called....almost as if popping back to view A causing the button click that called view B initially from view A to fire again? or that intent to execute again...
I've been up for 2 nights trying to figure this out and it all works perfectly fine when I disable google maps on view C.

Answer 1

I changed my loadMap() function to the below:
loadMap() {
let latLng = new google.maps.LatLng(this.latitude, this.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
}
I also moved this.loadMap(); from the IonViewDidLoad() function and instead put it in ionViewDidEnter() function.
Not sure what google map library you are using but I am not using any ionic library I am instead importing google maps API into the index.html page using this:
<script src="https://maps.google.com/maps/api/js?key=[YOUR KEY]"></script>