Google map not shown in more than one page - no errors shown, different IDs

Ionic Framework ionic-v3
1

In my ionic 3 application I use google maps in two pages: the main one, where is shown the position of the user, and another page in which I want to show a route. In the main page the maps work correctly, but then if I go to the other page, the map is not shown: instead, theres a blank space. This is the code I use to load the map:

loadMap() {
let element: HTMLElement = document.getElementById('mappa');
let map: GoogleMap = this.googleMaps.create(element);
var directionsDisplay = new google.maps.DirectionsRenderer(); 
directionsDisplay.setMap(map)

map.one(GoogleMapsEvent.MAP_READY).then(() => {
 directionsDisplay.setDirections(this.route)
});

I call this function inside a setTimeout method to make it work correctly (I used the same method for the map in the main page, and worked). Since there could be problems using the same ID for both maps, I changed the element id so that the maps would have different ones; to change it, I wrote

@ViewChild('mappa') map;

in one class and

@ViewChild('map') map;

in the other one (the main one).

Where could the error be? Even if the method “directionsDisplay.setDirections(this.route)” would not work, the map should be still shown, without directions, am I right?