2017-02-10 6 views
2

У меня есть приложение, в котором рассматриваются ситуации онлайн/оффлайн. В настоящее время у меня есть несколько экземпляров, в которых приложение запускается в автономном режиме, а api не загружается, что приводит к пустой странице карты.Reinitialize/Restart Google Map Api

Вызов карты google goi будет примерно таким.

<script src="http://maps.google.com/maps/api/js?key=APIKEY"></script> 

Я уже добавил слушатель события, который имеет дело с онлайн/оффлайн ситуации, которая что-то вроде этого

document.addEventListener("offline", function() 
{ 
    console.log("in offline event listener"); 

}, false); 

document.addEventListener("online", function() 
{ 
    console.log("in online event listener"); 

}, false); 

Как проверить, был ли инициализирован мой Google Map API, и как я повторной инициализации Это?

Update 1: Я могу вставить скрипт во время выполнения с помощью,

var script = document.createElement("script"); 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src", "http://maps.google.com/maps/api/js?key=APIKEY"); 
document.getElementsByTagName("body")[0].appendChild(script); 

Но это может привести к несколько экземпляров Google Map API вызова в результате в других моих плагинов карты не работают. Таким образом, мне все равно придется либо уничтожить неудачный вызов api карты, либо проверить, действительно ли api-карта google успешно вызвана и восстановлена.

ответ

2

Вместо перезапуска скрипта вы можете попробовать запустить его только при наличии подключения к Интернету.

Удалите <script>...</script> элемент из index.html

На главной странице JavaScript:

key = "YOUR GOOGLE MAP API KEY" 

GoogleMapInit(key); 

function GoogleMapInit(key){ 
    if (key != null){ 
    apiKey = key; 
    } 

    loadGoogleMaps(); 
} 

function loadGoogleMaps(){ 
    window.mapInit = function(){ 
    //Run any code that must be run after Google Map Api is done (E.g loading markers) 
    } 

    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.id = "googleMaps"; 

    if (apiKey){ 
    script.src = 'http://maps.google.com/maps/api/js?key=' + apiKey + '&callback=mapInit'; 
    } 
    else{ 
    script.src = 'http://maps.google.com/maps/api/js?callback=mapInit'; 
    } 
    document.body.appendChild(script); 
} 

Вы также можете обратиться к: https://www.joshmorony.com/part-3-advanced-google-maps-integration-with-ionic-and-remote-data/