How to make website with google map available offline - html

I have created a webpage http://babysoftblog.co.cc/shahma/kmz/map_sexten.html in html5 with offline cache.its showing google map using a kmz file.the page is working fine online..but its not showing google map when page is o[en offline.
Am i doing any mistake?

Google Maps can't be used offline like that. Google Maps is much more than just the initial Lib, for example images, location data etc. If your website doesn't require all the navigation feature, I recommend check out Static Map API.
Initially you include the static map, which is just image file that can be cached offline, then check for connectivity status and load the dynamic map later (aka Progressive Enhancement).

Related

Can you tell exactly what a request is?

What are the actions that can be described as requests when the map in my website is used by a visitor? For example: if the user is zooming in or out, is this a request on the map?
Thank you
As the documentation states:
A single map load is charged when any of the following occur:
A web page or application displays a map using the Google Maps JavaScript API.
After a web page or application loads a map, a static map image, or a Street View panorama, any user interactions with it, such as panning, zooming, or switching map layers, do not generate additional map loads or affect usage limits.

Convert Google map with huge amount of data to a static using Google Static Maps

I need to convert a map built with Google Maps to a static map.
The problem is that map has an amount of data (mainly circles), and its representation has to be doing a path description of its circunference, and I need some kind of accurate, a pure circle has to be displayed in the static mode, so each circle description is about 500 chars (encoded).
The Google Static Maps url limit is 8192 and its not enough for rendering those shapes.
There is another way for doing it? I also tried to use html2canvas, but it is forbidden by Google.
Google actually recently extended the URL limit to 8192, but if you need more than that you probably need to resort to taking a screenshot of a Google Maps JavaScript API map, as suggested by xomena.
A tool like PhantomJS [1] can help you write a script to automatically take a screenshot of a webpage (which you've drawn using the Google Maps JavaScript API).
[1] https://github.com/ariya/phantomjs/wiki/Screen-Capture
I have a small example that uses PhantomJS to take a screenshot of the page.
Here's the JavaScript Map with some information: http://jsbin.com/pevizusana/2/edit
Here's the PhantomJS code that will take a screenshot on this site: http://pastebin.com/gEXhG1dP
And here's the result: http://i.imgur.com/Mj951aP.jpg
I hope you find this information helpful.
I'm the author of osm-static-maps, It's an open source project that you can use as a cli or js library or self-hosted http server. It mimics google static maps and you can pass any amount of data to the map as a geojson.
See the project here for more instructions https://github.com/jperelli/osm-static-maps

Save Image of Google map to be loaded offline

I am using Google maps in an Ionic application (which connects to NodeJS/Express) for ipad.
In the app, I am displaying markers for the addresses provided by the user. My use case is such that users need to view the google map with markers when they are offline. These are primarily field users who do not have access to internet when on the field.
The approach I was thinking was to have users launch the google maps with markers set, in the ionic app (when they are connected to the internet) and provide a save button. Once they click on the save button, we somehow save an image/screenshot of the maps view on the device.
When the user opens the map while offline we load this image instead.
What would be the best way to save the image of the map shown in a Ionic app? Is there another approach which I should be looking at?
Thanks.
option 1: I think here you can use Google Static Maps api which returns image files you can call this api when user clicks on save button (obviously when you have internet connection), and cache the image locally. Just go through the Google Static Maps api
option 2: I don't prefer this but worst case if nothing works for you just take a screen shot of the user's screen and save that image. Here is the cordova plugin to take screenshots cordova-screenshot
Happy coding :)

Insert google map in a website with the left locations sidebar

I created a public map into my gmail account. I added to the map different locations. I want to insert the map into my website and I want to show the locations of the places in the left sidebar like in the google maps site, but I can't find how.
This is the map as shown in my site:
This is what I want to have: (as viewed in the google maps page)
I embedded the map into my page using the google embed tool
When entering into "Customize and preview embedded map" there is no option to include the sidebar:
This is the address of the map:
https://maps.google.com/maps/ms?hl=en&ie=UTF8&oe=UTF8&msa=0&msid=216330649072490208011.0004daf6e6bfde8dd857d
¿Any suggestion? Thanks for helping
The only way I know how to do that is like this:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/xmlProxy060215.asp?https%3A%2F%2Fmaps.google.com%2Fmaps%2Fms%3Fhl%3Den%26ie%3DUTF8%26oe%3DUTF8%26authuser%3D0%26msa%3D0%26output%3Dkml%26msid%3D216330649072490208011.0004daf6e6bfde8dd857d
(uses a third party parser geoxml3 to parse the KML and render it as native Google Maps Javascript API v3 objects, which are accessible via the sidebar entires)

Download image of currently rendered map

I am working on an application that is using the google maps javascript API and it seems like it would be good to be able to download screenshots of the currently rendered map in our application.
I can't seem to find any options in the api that describe how to do this.
Is there anyway to download an image of the currently rendered map? Currently we are using a HYBRID map type
This isn't an option in the Javascript API. However you might be able to achieve the same map using the Static maps API, which just generates a PNG image: https://developers.google.com/maps/documentation/staticmaps/