Я работаю с Ionic 3 и Angular 5 и хочу отобразить карту в своем приложении. Я создал компонент карты, но у меня возникают проблемы с отображением карты после обновления страницы.

MapComponent

карта.html

<div id="map" style="height:100%; width: 100%;"></div>

карта.тс

По сути, я создаю новый необработанный элемент карты, чтобы избежать инициализации карты в том же элементе HTML, что вызывает ошибку Leaflet («контейнер карты уже инициализирован»)

ngOnInit() {
    var map: any = null;
    var mapElement = document.getElementById("map");
    mapElement.parentElement.innerHTML = '<div id="map" style="height:100%; width: 100%;"></div>';
    console.log("new map element created");
    var initMap = function () {
        console.log("init map..");
        L.mapquest.key = 'XXXXXX';
        map = L.mapquest.map('map', {
          center: [37.7749, -122.4194],
          layers: L.mapquest.tileLayer('map'),
          zoom: 15
        });
    }
    initMap();
}

Результат

Карта корректно отображается с первого раза. Но когда я возвращаюсь во второй раз на страницу, где отображается карта, я не получаю никакой ошибки, а просто получаю пустой элемент div, как будто Leaflet не может инициализировать карту. Так же в консоли вижу, что элемент создается до инициализации карты, так что должно работать.

Есть ли у вас какие-либо материалы, чтобы помочь мне с этой проблемой? Заранее спасибо.