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 :)
Related
I don't know if this is the place to ask for this kind of stuff but i'll try.
I want to integrate a map of google maps embedded in my website that shows my geotagged instagram pictures on it.
There are some online services but none is exactly doing what i need which is so basic at the same time.
I found a widget called snapwidget where you can manage to show your pictures in the map, but then you have no option to set the zoom of the map and the controls wont' appear.
Is there any way to show and set the zoom controls in a embedded google map which is not directly from google maps api?
Well according to the Embed API documentation you can set optional parameters for the zoom level and other settings. I don't see anything to disable the controls, and I don't know about integrating with Instagram photos.
e.g.
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
SnapWidget is one option, but then there's also Widgetic and The Data Pack.
http://thedatapack.com/embed-instagram-map/
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).
I know its possible to put multiple markers on a google map embedded into a web page. I also know its possible to make a link which when clicked in a mobile device will open the google maps app and set a marker.
However is it possible to crete a link which when clicked in a mobile device will open the goole maps app and set multiple markers? Thanks
You could put all your markers in a KML with google earth and put it somewhere on the cloud, and add a link to it (this link only works on iOS):
<a href="maps:q=http://example.com/mapdata.kml">
You should explore the idea of embed a google map into the web site and put your markers your self programmatically.
I am developing JavaME LWUIT application which needs to display some data on map.
And I'd like to use Google Maps for this.
I thought about the requirements to the maps and their user interface. They are
listed below:
Pannable map. It should be possible to scroll the map using the touch interface or navigation arrow buttions which are displayed on the map.
Zoomable map. At the best, there should be appropriate +/- buttons displayed on the map.
Search location by address and move to it (menu command).
Remember the last visited location.
Marker for the current location.
Markers with customable icon and text which is displayed when select the marker (click on it or select somehow).
I spent some time searching for appropriate Map Library for JavaME/LWUIT.
I expected to find a free library and map service (ha-ha).
See my results below:
MIDMaps library. URL: http://www.jappit.com/blog/midmaps-google-maps-java-me-library/
That library uses the Google Static Map Service. Not bad... but it needs a lot further improvements...
I found the follwoing issues with that library:
Markers: impossible to customize marker's icon and text. Displaying the marker's text on click/selection is not supported.
Map Panning: no UI controls for this (arrow buttons). Doing panning with menu commands is not a user-friendly.
Map Zooming: no UI controls for this (+/- buttons). Not so important...
License: not permitted to use in a mobile app if not a Google Premier User. Not a problem...
Nokia Maps API for JavaME. URL: http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Java_ME/
Did not try. But looks like that lib fulfills all my requirements.
I am not sure about the following things:
Quality of the maps.
How much does it cost? I mean the cost of using the map service.
Nutiteq lib which uses OpenStreetMap service. URL: http://www.nutiteq.com/map-api
Not free the lib, but the map service.
Guidebee Map API. URL: http://www.guidebee.biz/
It's not free.
Now it's a time for me to ask questions. What should I do? Are there any advices?
Maybe I missed some possibilities or lib/services?
Thank you for your help!
See the Makeover demo in SVN (I updated it to use Google maps instead of Yahoo maps API which was killed off). The GoogleService API should be available in the SVN history it was (deleted because of licensing nonsense) within the IO services directory and it includes local search etc.
Terrence has a a demo that includes allot of interesting features including a browseable map.
You can also look at Waze although I haven't checked it myself, I saw people using open street map and AFAIK there is an open source mapping application based on that (although the license might not be appropriate for you but it might still be useful as a learning aid).
After some additional investigations I decided to use Nokia Maps. And now I have a working application which displays interactive map with my data markers on it and also my current location.
I chose Nokia Maps API because it provided real dynamic maps (panning, zooming, tiling) and fulfilled all my requirements, except "Remember the last visited location" (can be implemented on my own).
I met the following problems:
Using the maps from LWUIT, not from an ordinary MIDP application. I used the approach shown here Nutiteq SDK with LWUIT and also implemented my own MapWidget class for LWUIT.
Displaying additional info on marker click. There is no support for this in the lib. I had to implement it on my own. Details are here JavaME Nokia Maps API: how to display additional info on marker click
Additional info related to the choosing proper map library can be found here Discussion on Nokia Forum
So I would like to use a URL to retrieve and display ONLY the users CURRENT LOCATION.
For example: A user with a smartphone (iPhone, Android, etc) opens a link [http://maps.google.com/CURRENTLOCATION] on their phone, and it shows their current location on the user's device in either Google Maps app or browser, as reported by their GPS/wireless location. The actual link itself should should remain static, and display the location wherever they are.
Is this possible?
Thanks in advance!
If you have the lat/long coordinates (which I suppose you get through the gps/wireless device), you can use something like this:
http://maps.google.de/maps?q=loc:48.0000,9.000
which opens the Google Maps website with the coordinates N48.0 E9.0 (as decimal coords) centered.
Or, if you need a static map (and not a full fledged JavaScript map), use this link and adjust the values inside the URL:
http://maps.google.com/maps/api/staticmap?center=48.00,9.00&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|48.0,9.0&sensor=true
Valid values for the arguments are:
for maptype: roadmap, terrain, satellite
for zoom: 1 to 20
This is discussed front and center in the Google Maps geolocation API: Detecting the User's Location
According to the documentation, the user will need using an HTML5 equipped browser for this to work. You will need to write the Javascript which looks pretty vanilla.
Edit: This only works if you are using your own domain and have implemented the Maps API (which is really simple), not Google's own maps.google.com