November 8, 2010

Chris Kawa Chris Kawa
Dinosaur Breeder
1276 posts

QWebView and Google Maps JS API v3

Page  
1

I’m trying to use google maps in my app using js api v3. When using Qt WebKit the map displays only some degraded controls and all the mouse dragging/zooming is gone. On the other hand http://maps.google.com [maps.google.com] works just fine. I’ve tried to set different useragents in subclassed QWebPage, but this doesn’t change anything. Also I tried to modify my map code to force using mouse and enable scroll zoom, but again this seems to be ignored.

This behaviour can be observed for example using FancyBrowser from examples/demos and navigating to this tutorial page
http://code.google.com/intl/pl/apis/maps/documentation/javascript/examples/map-simple.html [code.google.com]

I’d like to know if this is a Qt Webkit limitation (can I workaround it in any way?) or google apis are somehow blocking full funcionality in this case. The v2 apis are working ok, but they’ve been deprecated, and I’d hate to have to fall back to them.

29 replies

November 9, 2010

fcrochik fcrochik
Lab Rat
517 posts

I would assume the right combination of user agent and MapOptions should do the trick. I have created a “google maps front-end” application for the n900 but can’t remember if panning worked using the “mouse”. On my case I didn’t want to use the “standard” pan (or zoom) so I filtered the mouse events to implement a kinetic scrolling and used the “volume buttons” for zoom.

It is just a guess but I would assume that if you use the “iphone” or “android” user agents google maps will try to listen to “gestures” events instead of mouse events and it will not work. Probably using a desktop browser useragent (like “firefox”) will help the testing.

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

November 9, 2010

Chris Kawa Chris Kawa
Dinosaur Breeder
1276 posts

Thanks fcrochik but unfortunetly i tried only desktop useragents (chrome, firefox and IE). It seems to be ignored entirely.
This is true that maps pick up the android “theme” by default (it’s strange that it ignores useragent. I wonder how maps choose the layout then..), but with the right set of map options I managed to make it look more desktopish.

The only thing is that it for some reason ignores the “draggable” option which is suppose to be responsible for what I want. I don’t want to re-invent the wheel and custom code the movement. I know this is just a few lines of code but I’m simply curious why the default mechanism doesn’t work.
Also it’s not possible to easily create the ‘smooth scrollwheel zoom’ by hand, and it also is default on desktop browsers, but the setting is ignored on qt webkit.

November 9, 2010

fcrochik fcrochik
Lab Rat
517 posts

crossblades:
I just tested with another application I created and, at least, the dragging (pan) works just fine for http://code.google.com/intl/pl/apis/maps/documentation/javascript/examples/map-simple.html. I tried using the “iphone” user agent.

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

November 9, 2010

fcrochik fcrochik
Lab Rat
517 posts

crossblades:
Quick update: Even using the “default” user agent it worked on my n900 (the pan).
Just to make sure: Do you have the mouseTracking enabled for the webview? (Most of the time the answer to complex question is the most simple)

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

November 9, 2010

Chris Kawa Chris Kawa
Dinosaur Breeder
1276 posts

fcrochik:
Yes, mouse tracking is enabled, but this doesn’t matter because when dragging the mouse button is pressed anyway (mouse tracking enables mouse events without buttons pressed right?).
“iphone” user agent doesn’t change anything also.
I don’t have n900, but on desktop(win XP/7×64) this is what the example looks like:
shot1 [img258.imageshack.us]
And this is what happens if I try to drag:
shot2 [img600.imageshack.us]
I then tried to change map options like so:

  1. naviOptions = {
  2.   position: google.maps.ControlPosition.TOP_LEFT,
  3.   style: google.maps.NavigationControlStyle.ZOOM_PAN
  4. }
  5. myOptions = {
  6.   zoom: 8,
  7.   center: myLatlng,
  8.   draggable: true,
  9.   mapTypeId: google.maps.MapTypeId.ROADMAP,
  10.   keyboardShortcuts: true,
  11.   mapTypeControl: true,
  12.   navigationControl: true,
  13.   scrollwheel: true,
  14.   disableDoubleClickZoom: false,
  15.   streetViewControl: false,
  16.   navigationControlOptions: naviOptions
  17. }

This is what it looks like with changed map options:
shot3 [img585.imageshack.us]
All controls work except for mouse drag and wheel zoom.

November 9, 2010

fcrochik fcrochik
Lab Rat
517 posts

Good point about the mousetracking :)

Very odd… I couldn’t resist and compiled my application for the desktop to find out that you are right. The tracking does not work on the desktop (but it does on the n900) for http://code.google.com/intl/pl/apis/maps/documentation/javascript/examples/map-simple.html. Tracking and mousewheel work for google.com/maps.

I tried a few things but couldn’t figure out why it does not work. I would have to guess the google javascript API is checking something different than the user agent.

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

November 10, 2010

zmilton zmilton
Lab Rat
1 posts

Hello,

Has anyone found out any more information about this? My application seemed to work fine before the V3 upgrade and now I cannot get the scrolling/mousewheel zooming functionality to work at all. I’ve tried explicitly giving the map scrollwheel and draggable settings like the above poster, but that doesn’t seem to work.

When I try to drag I get the thumbnail’d version of the map under my cursor like I am trying to drag an image.

Also, is there something special about maps.google.com, because that does seem to work just fine using QWebView.

December 3, 2010

nelas nelas
Lab Rat
2 posts

I’m also experiencing this issue (which made my application useless). So, I found this message [lists.webkit.org] that might indicate the path to a solution. Pasting it here for practical reasons:

On 11/20/2010 08:42 AM, ext Gary.Wzl wrote:
> Browser based on Qt port of webkit (qt demo browser or arora )can’t be dragged google map when webpage is loaded properly.
> http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/examples/index.html
>
> Qt version is 4.7.0

Looks like it’s giving you a multi-touch version of the page. Some quick testing shows that QtWebKit has document.documentElement.ontouchstart and friends, whereas Chromium, Firefox, Opera etc do not (at least not on my desktop machine.) The right solution is to get Google Maps to stop sending you the touch UI, but you could of course compile QtWebKit with DEFINES+=ENABLE_TOUCH_EVENTS=0 (this is currently set to 1 in WebCore/features.pri)
Hope that helps!
-Kling

Does anyone know how to intercept the touch UI from GMaps API?

December 8, 2010

nemoxu nemoxu
Lab Rat
1 posts

I had the some issue . And I used the google v3.1 API , map can drap/zoom. Include the google map api :
http://maps.google.com/maps/api/js?v=3.1&sensor=true

December 8, 2010

nelas nelas
Lab Rat
2 posts

Thanks nemoxu! Adding the version (v=3.1) to the script solved the problem for me.

December 8, 2010

Chris Kawa Chris Kawa
Dinosaur Breeder
1276 posts

Yeah, it works, thanks!

It doesn’t work in later versions though (3.2, 3.3) so I hope it’s not like designing for IE6 – relying on a “known bug” to make it work..

December 8, 2010

fcrochik fcrochik
Lab Rat
517 posts

I haven’t had a chance to try but using qt webkit 2.1 (I think that is how the new branch is called) should give us all the “gestures” and the “location” api. I remember seeing a message about the beta source code being available for download…. Anybody has tried it?

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

March 3, 2011

pettel pettel
Lab Rat
1 posts

I have the same issue (Qt 4.7.2). Adding “js?v=3.1&sensor=true” didn’t do the trick for me.
There is still no panning (left mousebutton) and zooming (mousewheel).

I compiled Qt WebKit 2.1 from the repository (mingw, gcc 4.4.0), but the example browser crashes when i try to open a webpage.

April 30, 2011

ceptad ceptad
Lab Rat
1 posts

Hi,

Today I have tired to use google maps with Qt and I’m having the same problems. Maybe somebody has more suggestions?

May 9, 2011

lowsnr lowsnr
Lab Rat
2 posts

I’ve found a very hacky fix that can be used until Google and/or Nokia get with the program to either support WebKit or allow for the touch events to be disabled at runtime. Turns out, as part of the test that the Google code performs to determine whether the browser is touch enabled, it checks the User Agent for Chrome >= 5.0, so by changing the user agent to something like ‘Chrome/1.0’ the touch interface suppressed. I verified this with PySide 1.0.2 / Qt 4.7.2 / API 3.5.1 but it should in theory work with any Qt version.

Example (PySide):

  1. class ChromePage(QWebPage):
  2.     def userAgentForUrl(self, url):
  3.         return 'Chrome/1.0'
  4.  
  5. _map = QWebView()
  6. _map.setPage(ChromePage())
  7. _map.load(QUrl('a/map/page.html'))

In case anyone’s interested in the details, I de-minified Google’s JS code and found this line:

  1. ng = X[v] == 3 && X.b <= 5 ? !1 : lg(ontouchstart) && lg(ontouchmove) && lg(ontouchend)

which de-obsfucates roughly to:
  1. useTouchUI = navigator.userAgent.toLowerCase() == 'chrome' && navigatorVersion <= 5 ? false : checkForEvent(ontouchstart) && checkForEvent(ontouchmove) && checkForEvent(ontouchend)

Interesting but I suppose unsurprising that Chrome is the one browser that Google checks for explicitly. I hope Google offers this as a selectable option (since it’s the addition of a single line of code) but in the meantime, enjoy this fix.

Page  
1

  ‹‹ [Solved] SVG displays stippled areas instead of solid      Netscape NPAPI and iframe ››

You must log in to post a reply. Not a member yet? Register here!