Ошибка изображения при отсутствии подключения к Интернету для загрузки Google Map Canvas

Question

У меня есть приложение (WebApp), которое работает локально (конечно). Однако я могу предложить пользователям загрузить приложение, но не всегда имеет 3G/WiFi при запуске приложения. Поэтому Карта Google не загружается, если у пользователя нет подключения к Интернету, так как для этого требуется веб-API.

В качестве резервной копии я хотел бы показать изображение ('screenshot'), когда карта не может быть загружена.

Что было бы наиболее подходящим решением? Благодаря!

Вся карта холст работает с помощью этих кодовых частей

HTML

<div id="map-canvas"></div> 

CSS

#map-canvas { 
width:100%; 
height:200px; 
} 

Javascript

function initialize() { 
    var myLatlng = new google.maps.LatLng(51.81199,4.66656); 
    var mapOptions = { 
    zoom: 9, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Hello World!' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
// END OF GOOGLE MAPS // 

внешнего API Google скрипт

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

Answer 1

Вы не использовать следующую строку:

google.maps.event.addDomListener(window, 'load', initialize); 

На window.onload вы бы проверить, если google.maps существует, а затем используйте оператор if/else для переключения между условиями - initialize или загрузите изображение на место карты. Что-то вроде:

window.onload = function() { 
    var foundGoogle, img; 
    foundGoogle = typeof google === 'object' && typeof google.maps === 'object'; 
    if (foundGoogle) { 
    initialize(); 
    } else { 
    img = new Image(); 
    img.src = 'screenshot.png'; 
    document.getElementById('map-canvas').appendChild(img); 
    } 
}