html5 - ¿Usando Google Maps V3 sin conexión, por ejemplo, con caché-manifest?

caching google-maps (4)

Los propios programadores de Google han abordado este problema y, lamentablemente, la información no está bien difundida. Pero sí, puedes usar el manifiesto de caché para hacer exactamente lo que has descrito.

Lecturas Requeridas

Primero, eche un vistazo a la publicación de blog de Google Code aquí: http://googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html
Luego lea el post de Missouri State: http://blogs.missouristate.edu/web/2010/05/12/google-maps-api-v3-developing-for-mobile-devices/

La técnica

Debe almacenar en caché todas las URL utilizadas por Google Maps
Emplea métodos para luchar contra los métodos de caché persistentes de Chrome y Firefox eliminándolos de "sitios web sin conexión"
Todas las personalizaciones deben ser del lado del cliente en javascript

Su archivo de caché se verá así (según el estado de Missouri):

CACHE MANIFEST /map/mobile/examples/template.aspx /map/mobile/examples/template.css /map/mobile/examples/template.js NETWORK: http://maps.gstatic.com/ http://maps.google.com/ http://maps.googleapis.com/ http://mt0.googleapis.com/ http://mt1.googleapis.com/ http://mt2.googleapis.com/ http://mt3.googleapis.com/ http://khm0.googleapis.com/ http://khm1.googleapis.com/ http://cbk0.googleapis.com/ http://cbk1.googleapis.com/ http://www.google-analytics.com/ http://gg.google.com/

Advertencias

Deberá estar completamente basado en HTML5 y reconocer el impacto que esto tendrá en sus usuarios. Esta situación es útil cuando sus usuarios están actualizados sobre los estándares / dispositivos del navegador o usted tiene control sobre las opciones de los usuarios.

Espero que esto ayude.

Estoy escribiendo una aplicación móvil HTML5 que usa Google Maps V3 con una capa personalizada de mosaicos de OpenStreetMap.

Los mosaicos OSM (de tile.openstreetmap.org ) están configurados para almacenar en caché por un poco más de 24 horas, y estoy usando un manifiesto de caché para todo mi HTML / JS / CSS.

Así que, en teoría, la aplicación podría usarse fuera de línea, excepto que la interfaz de Google Maps no está contenta cuando está fuera de línea.

Siempre desea llamar al servidor de Google Maps en http://maps.google.com/maps/api/js?sensor=false&region=GB : cuando esto falla, Google Maps no se carga.

¿Hay alguna forma de usar Google Maps V3 API sin conexión?

¿Puedo guardar en caché el manifiesto http://maps.google.com/maps/api/js?sensor=false&region=GB , o sería una mala decisión?

(Perdón por esta pregunta para principiantes, ¡dime si puedo explicarte mejor!)

Tenía un proyecto de mapa de Google que necesitaba fuera de línea. Descubrí que Bing Maps ( https://www.bingmapsportal.com/ISDK/AjaxV7 ) está mucho mejor fuera de línea y cambié mi proyecto a eso y estoy feliz. Corrí la versión de Google y Bing lado a lado en modo fuera de línea y Bing fue genial. Mientras que Google fallaría inmediatamente en las cargas de mosaicos, los mapas de Bing almacenaron más mosaicos y parecía que incluso cambiar el tamaño de los mosaicos ampliados para al menos darle algo en el modo sin conexión.

Sé que la pregunta aquí es sobre los mapas de Google; pero si no te importa Bing o Google y realmente solo necesitas soporte sin conexión, te recomiendo que pruebes los mapas de Bing. Me lo resolvió.

Tengo http://maps.google.com/maps/api/js?sensor=false en la sección CACHE de cache.manifest , junto con los archivos de mi aplicación y no hay ningún problema.

Aunque, creo que también tiene que almacenar en caché otros archivos que solicita la API de Google Maps. Puedes echar un vistazo a los archivos descargados por tu aplicación e incluirlos.

¡Imposible!

Las URL de CDN de Google Maps tienen una naturaleza dinámica,

No se permiten caracteres comodín en la sección CACHE de los archivos de manifiesto de caché HTML5

No podemos tener algo así,

CACHE MANIFEST /css/style.css /js/libs/modernizr-2.0.6.min.js /js/libs/jquery-2.1.4.js http://mts0.googleapis.com/* http://mts1.googleapis.com/* http://fonts.googleapis.com/* NETWORK: *