Google Maps caching tiles in hybrid mobile application - javascript

In a hybrid web application (PhoneGap) I have been working on I have implemented the Google Maps JavaScript API v3.
The map is a large part of the application and it is important that I do everything I can to make sure performance is the best quality I can get it to for the application.
One the most noticeable problems with the map is the following:
Open app and load map
Close application and reopen application
Load map again
When the map is loaded again it takes the same amount of time to load as it did the first time which can be a few seconds. This seems completely unnecessary to me and bad design on my part. If these tiles have been downloaded a matter of seconds ago surely the images should be cached for a faster load the second time round?
This may well be part of PhoneGap itself as I'm sure that Google does make an effort to return cached images.
How can I improve these map load times in my PhoneGap application?

Please consider this plugin.
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/
This plugin uses Google Maps Android API v2 and Google Maps iOS SDK.
Those makes cache internally, and loading map tiles is faster than Google Maps API v3.

Related

Open Google Map with markers within Google Maps App

I've used the Google Maps JavaScript API to put a bunch of markers on a map, within a web page. I'd like to allow users to choose to open the map, with markers, within the Google Maps app, should they have it on their device.
Currently the markers, when clicked, display the name of the location and some other details. I'd like to maintain this functionality within the app too.
Is there an easy way to achieve this? I'm a front-end web developer with a decent amount of JS experience, but I don't have any experience developing iOS or Android apps, and I was hoping there'd be an easy solution within the API, but haven't come across an answer. There's a good chance that this simply isn't possible due to the differences between the web and app platforms, but I just don't know.
This is a built-in feature of the Google Maps iOS (and thus I assume Android) API. In the iOS API, add the following entry in Info.plist file:
LSApplicationQueriesSchemes
Item 0... String... googlechromes
Item 1... String... comgooglemaps
And then whenever a marker is tapped in the app, if the user then taps the Google attribution logo (usually at the bottom of the screen), the Google Maps app will open that marker. These entries allow for that to happen.
The Android guys can speak to Android but I'm sure it's as simple, if not simpler. Here are some methods: How to open standard Google Map application from my application?

Geolocation fails if app sent to background

I'm developing a simple app with phonegap which every 30 seconds send user current coordinates to my database via ajax call.It works very well
$(document).ready(function() {
setInterval(function() {
SetLocationUpdates();
}, 30000);
});
but if the user navigates to another app(google maps app) or if I open google maps app with this code
<div><a href="geo:41.897096,27.036545">Open maps app</div>
it(sending coordinates to my database via ajax) fails because getCurrentPosition does not work maybe google maps lock it althoug my app is still work(my app and google map app work separately.Two apps work at same time.Maybe my app go background)
More specifically, it does nothing.
navigator.geolocation.getCurrentPosition(SetLocationUpdates, onError);
this line not execute.
The success or error callbacks are never called, and setting a timeout does not affect this. I am using Phonegap Build to compile the app from html and javascript.
What should I do?
You need a native background geolocation solution - JS execution on the main thread gets paused when your app goes into the background.
In my experience, the most resilient solution is cordova-background-geolocation-lt. I've tested on multiple OS versions, including Android 8 and iOS 11, and this has worked consistently on all.
Please be aware that Firefox currently continues to work when the phone is asleep or the App is backgrounded. (I believe this is a bug)
IMHO the most appropriate and battery friendly solution relies on ServiceWorkers receiving and actioning TravelEvents from the TravelManager.
See this Web App for proof of how well Background geolocation fits with ServiceWorker infrastructure. All source can be found here including a aaa_readme.txt.
Please ask W3C/IETF to standardize this and your UA vendors to implement it!

Why doesn't the Google Map in Cordova/Ionic always load in certain devices

I am trying to figure out why sometimes the Google Map in my Ionic app does not always load in certain Android/iOS devices. It's a hit and miss issue and at first I thought it could be network or GPS issues affecting it, but the issue also happens when these are clearly up and running.
Could it be that the Google Map Javascript API faces outages lasting for a few seconds?

Google App Engine: API is not being called in deployed version

I am building a web app with Google AppEngine. I am using the Google Maps, Google Places, and Geocoding API's.
In the local version, everything works as it should. When the page is loaded, the user's current location is indicated and all the nearby stores are marked with markers on the map that appears on the webpage.
In the deployed version, only the map loads. I checked the console developer's log on Google and I noticed that a request to the Google Maps API is made, but not to the Google Places or Geocoding API's. I'm really confused/not sure what's going on. I tried browsing through some old questions, but I can't figure out how to fix this. If anyone could offer a solution, I would greatly appreciate it.
** I have made sure that the deployed version is the most recent version. It 100% works on localhost, but doesn't on the deployed webpage.
Edit: the API's aren't being called because they don't work on "insecure origins". I've configured the app.yaml under handlers to be
- url: /.*
script: IGNORED
secure: always
but it doesn't seem to make a difference.
You don't have to separately call Google Places and Geocoding APIs. All those are included in the Google Map API. If you want to choose on what you should include in your map click here to refer the API on customizing your map.
By default, Google App Engine doesn't support secure connections, which both the Geolocation & Google Places API's need, in order to be called. However, Google App Engine can support secure connections. The local host does support secure connections, which is why the local version of my app was working.
To properly support secure connections after deploying the app, just add in the parameter "secure: always" in the app.yaml file under Handlers!

Offline Custom Tiled Google Map with Phonegap?

I have a custom made tile for google map. Works perfectly fine online, but when I turn off data on my phone, it just shows the loading icon, as it can't communicate with google.
As I have my own tiles, is it possible to use google maps offline with phonegap?
I don't believe it is possible to use Google's API offline. However, If you have your own tiles, and have them embedded within your application archive, you could use Leaflet to render the local tiles. http://leafletjs.com/ If your custom tiles are remote (hosted on a server), then you're still not going to be able to consume them in an offline scenario.

Categories

Resources