Response title
This is preview!
Move this topic
Working with JQuery Mobile and Google Maps API V3
in jQuery Mobile
•
9 years ago
Is it just me or is JQuery incompatible with Google Maps API?
I am running JQM v1.4.2 and I cannot get a google map to load up for the life of me - it just won't work.
However, when debugging my code, I peeled back all the layers of JQM and found that Google Maps display when there is no JQM present.
Is anyone experiencing similar issues? I get the feeling that Google has changed something and JQM does not like it. If anyone has any working examples I would be super keen to hear from you.
Ryan
1
Replies(15)
If you aren't using this:
you're going to waste a lot of time.
Dunno about 1.4.2. I've used it with 1.2 and 1.3. If you have specific questions, I might be able to help.
If you're writing a PhoneGap app, you'll have an additional challenge in order to load the code only on a specific page. (Because App Store won't accept an app that has to be online to work. So, you can't just load Google Maps code at startup, and Google requires you not cache their code.)
You need to set a width and height for the map canvas.
The Google loader is ill-behaved, as it writes willy-nilly at the end of the document. You have to deal with this and control when it loads or it can cause chaos.
Leave a comment on watusiware's reply
I did waste alot of time with trying to get GMAPS to work in JQM.
I am making a PG app and I was going to load the Google map in a separate HTML page (using geolocation). It is just way too complicated to do it in the one DOM. Will the app store have issues with this as well? (I haven't submitted an app before).
Leave a comment on info Coolwebs's reply
No, no - you do not need to use jQuery UI to use jquery.ui.map. It's true that it's a plugin meant for use with jQuery UI. But it was also designed to work with jQuery Mobile, as well. There's some help in the documentation on using it with jQuery Mobile.I did check out Jquery-ui
Not sure what you mean by "It is just way too complicated to do it in the one DOM"I am making a PG app and I was going to load the Google map in a separate HTML page (using geolocation). It is just way too complicated to do it in the one DOM
I just meant that if you are making a PhoneGap app, do not put the map on the opening page, and do not load the Google Maps Javascript code on the opening page. This would get your app rejected (at least by Apple) because you must not require that the device be online in order to open the app. If offline, your app would not be able to proceed if you load the map code on the opening page. (It's OK if you have to be online to use a map page. It's understandable that you'd need to be online to download maps.) But you'll need to inform the user that they need to be online to view maps. (Don't just let the application hang. Tell the user they are off-line and so maps aren't available.)
It's be great if Google let you make a copy of the Maps Javascript code (or to cache it). But they don't. They want you to load it from their site each time it is used.
And, so, it's a bit of a pain managing the downloading of the API and then any other scripts (e.g. jquery.ui.map that are dependent on it and thus have to be loaded afterward.
Anyway, I'd suggest you get the map working first before you worry about these secondary issues.
Leave a comment on watusiware's reply
Thanks @watusiware,
I did managed to the UI and google maps API to work properly. I have made it into another page (i.e. locator.html) so that it does not try to load API on initialization.
My main issue was with onDeviceReady command. I was trying to use it on the locator.html page. I came to the conclusion that you really can't use that command twice as the device is ready only once (am I right on this?) - so I made my own initialization function/command for the maps page/view. I've got an alert telling user to have device connected to internet for maps and I will be designing a timeout function so the page will stop 'hanging' after a defined period of time (maybe 10 secs?), internet connection over in Australia is super slow and I have to put that into consideration. I have a demo avail here:
Sometimes the geolocation doesn't fire off (rarely), obviously much debugging I still need to do. Just getting my head around distribution of the app through Apple Developer portal and Xcode has been doing my head in. I think Test Flight is definitely a good asset to use there.
Many thanks for your help
Leave a comment on info Coolwebs's reply
onDeviceReady is specific to PhoneGap. It happens once when your app starts up, and is meant for you to use to make sure you don't call PhoneGap functions before PhoneGap is ready. You shouldn't use it for anything related to jQuery Mobile.
If the user tries to navigate to the map page, first I check to see if the device is online. If not, the user gets an error message telling them they have to be online to use maps. If they are online, then I load the Google Maps API and any dependent scripts, before navigating to the map page.
First, I load the Google Maps API using $.getScript(). While $.getScript() has a callback that will be called upon completion of load, that is not sufficient for Google Maps API, because they use the Google JS loader, and when the initial script is loaded, it is not done - that just means you've loaded the loader!
So, you need to add a callback parameter to your Google Maps URL, e.g.:
When you get that callback, you know that the Google Maps API is loaded.
Now you can load any additional scripts that depend on Google Maps API. I have 6 to load, jquery.ui.map, various jquery.ui-map extensions, and my own JS code that depends on this. I load these one-by-one using $.getScript(). Here you can use the $.getScript() callback, since you are loading local files that don't use any strange loader of their own.
(Really, you should combine and minify all the dependent scripts.)
Once they are all loaded, you can navigate to the map page, and use a pageinit callback to initialize the map.
Leave a comment on watusiware's reply
Since we have a pretty average internet connection speed here in Australia, is there a way I can show a preloader graphic whilst getscript? I can see when I visit the page it hangs for a few seconds whilst it loads the external script.
Leave a comment on info Coolwebs's reply
I have tried using getScript but it's not liking it as document.write is not allowed on an asynchronously-loaded external script unless it is explicitly opened. Well that is what the error message says anyway.
The script I am trying to load is here:
- function onLoad() {
- var url = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDy1bBAiDhmFfuKz6SerLvKyOIUqlFsX7c&sensor=true";
- $.getScript(url,function( data, textStatus, jqxhr ){
- console.log( data ); // Data returned
- console.log( textStatus ); // Success
- console.log( jqxhr.status ); // 200
- console.log( "Load was performed." );
- });/*
Leave a comment on info Coolwebs's reply
You can't rely on the callback supplied by $.getScript() to tell you when the Google Maps API has loaded.
Line 7 above is a lie! (Lines 5 and 6 are not a lie. It successfully loaded the loader...)
Loading https://maps.googleapis.com/maps/api/js does *not* load Google Maps API! It only loads the Google dynamic Javascript loader and tells it which API to load. Several asynchronous events later, the Maps API will have been loaded.
The Google API loader provides it's own callback mechanism to tell you when loading has completed. Use the callback parameter in the URL. Supply the name of a callback function in your JS code:
To subsequently load your own scripts which depend on Google Maps API, you can use the $.getScript() callbacks to tell you when they have loaded. (Unless they do some funny business like Google's dynamic loader...)
Leave a comment on watusiware's reply
Thanks for that.
I managed to get somewhere with the following script:
- function onLoad() {
- var script = document.createElement('script');
- script.type = 'text/javascript';
- script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDy1bBAiDhmFfuKz6SerLvKyOIUqlFsX7c&sensor=true&' +
- 'callback=mapLoaded';
- document.body.appendChild(script);
- }
Leave a comment on info Coolwebs's reply
function onLoad() {
I hope you aren't really using an onload callback on document!
Leave a comment on watusiware's reply
No I am using it on the body tag:
Working for me. Had any experience with PhoneJS, I'm thinking of leaving JQM behind for a slimmer framework for hybrid apps...<body onload="onLoad()">
Leave a comment on info Coolwebs's reply
You should not be using a body onload in a jQuery Mobile project. It's functionally equivalent to $(document).ready().
It will only work as you expect if your entire project consists of exactly one page.
It's easy to be fooled by this, because you create a one-page demo and everything works fine, then you try to use the same code in a multi-page project and everything falls apart...
If you're creating a PhoneGap project, you certainly don't want to load Google Maps API on body onload. It will load the API at startup, and this will garner an (Apple) App Store rejection for requiring the user to be online.
It's OK to have a "map page" that requires the user to be online to use that page.
It's not OK to require the user to be online in order to use the application. You need to provide some off-line experience.
Leave a comment on watusiware's reply
Appreciate your concern. The app is now available within the Apple App store as "Freshwater Macro invertebrates", just pushed a small update to it last night after some iTunes connect validation headaches.
I ended up calling the geolocation page without ajax (data-ajax="false") so it does call the onLoad. Everything else I tried to do with ajax was not getting me the results I was expecting. The app does provide users with a decent offline experience. When going to geolocation page, the page does make mention of needing an internet connection before a user request their location on a map and GPS coordinates.
Been a great learning curve for me and I've really enjoyed it, looking forward to doing more and I only hope JQM can make the code library more robust in future versions. The download builder just did not work for me. Also using the full version of JQuery as well probably did not help me, would it be better to use XUI in the future?
Leave a comment on info Coolwebs's reply
Congrats!
Doesn't seem to be in the App Store yet. (Or not in the U.S. store?)
It is possible to do maps in JQM without having to resort to data-ajax="false". See below: I worked on this and did the map implementation. Coincidently, it's an Australian app and has some overlap in subject material.
(But what is "menacing" about Yabbies? I thought that *we* were menacing *them*!)
Not familiar with XUI. I did do a brief search. Is this currently supported?
Leave a comment on watusiware's reply
I have the link to the app here:
Not really sure why it is hard to find. I did not intentionally localise it. I briefly checked out the Macquarie River Trails app in the App Store. Looks really sleek! I will install it later and check it out, advise my colleagues to do the same.
I think XUI is like Zepto. Everything is so embryonic right now, think we are spoilt for choice on frameworks. Which one will go the distance is yet to be seen.
I will be doing some R&D with these other frameworks in later updates to these apps and see if I can achieve better results. I do believe I can do gmaps without forsaking ajax as you said, I just had a deadline to meet. I will look at fixing that up in a future update.
Leave a comment on Ryan11's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to info Coolwebs's question
{"z7664639":[14737000005146569,14737000005150062,14737000005162313,14737000005254409,14737000005254857,14737000005277027,14737000005277777],"z33992022":[14737000005295862],"z30086836":[14737000005144510,14737000005145625,14737000005161303,14737000005249799,14737000005255203,14737000005255265,14737000005273512,14737000005278925]}
Statistics
- 15 Replies
- 11383 Views
- 0 Followers