离子3谷歌地图未显示在多个页面 - 没有显示错误，不同的ID

Question

在我的离子3应用程序中，我使用两个页面的谷歌地图：主要的一个，其中显示用户的位置，另一个页面，我想要显示路线。 在主页面中，地图正常工作，但如果我转到另一页，则不显示地图：相反，地图是空白区域。 这是我用来加载地图的代码：

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

// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
map.one(GoogleMapsEvent.MAP_READY).then(() => {
  directionsDisplay.setDirections(this.route)
});

}

我在setTimeout方法中调用此函数以使其正常工作（我在主页面中对地图使用了相同的方法，并且工作正常）。 由于两个地图使用相同的ID可能会出现问题，因此我更改了元素ID，以便地图具有不同的ID;为了改变它，我写了

@ViewChild('mappa') map; 

在一个班级和

@ViewChild('map') map;

在另一个（主要的）。

错误在哪里？ 即使方法＆＃34; directionsDisplay.setDirections（this.route）＆＃34;不行，地图应该仍然显示，没有方向，我是对的吗？