Response title
This is preview!
Google Maps v3 API & jQuery Mobile
in jQuery Mobile
•
12 years ago
I am trying to get the new v3 Google Maps api to work with jquery mobile. Strangest thing, whatever I try, it only gives me back a static IMG of the map, not the usual scrollable, zoomable map with the type switching buttons (Hybrid, Satellite, Map etc.)
This is what i get after my call to var map = google.maps.Map( map_canvas, options ):
<div id="map_canvas" style="height: 400px; width: 800px; display: block; position: relative; ">
<div style="overflow-x: hidden; overflow-y: hidden; width: 800px; height: 400px; ">
<img style="width: 800px; height: 400px; " src="http://
maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2& ;
1i59792&2i39244&2e2&3u8&4m2&1u800&2u400&
5m3&1e3&2b1&5sen-US&token=44537">
</div>
</div>
<div style="overflow-x: hidden; overflow-y: hidden; width: 800px; height: 400px; ">
<img style="width: 800px; height: 400px; " src="http://
maps.googleapis.com/maps/api/
1i59792&2i39244&2e2&
5m3&1e3&2b1&5sen-
</div>
</div>
The outer DIV is the container for the map I provide. The inner DIV is created by the google maps api. And the IMG tag inside of that (in red) is the static map
Contrast this to all the other demos of the v3 api where after the google.maps.Map() call, the DOM looks something like this:
<div id="map_canvas" style="position: relative;">
<div style="position: absolute; left: 0px; top: 0px; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; z-index: 0; ">
<div..>...</div>
<div..>...</div>
<div..>...</div>
<div..>...</div>
<div..>...</div>
<div..>...</div>
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; z-index: 0; ">
<div..>...</div>
<div..>...</div>
<div..>...</div>
<div..>...</div>
<div..>...</div>
<div..>...</div>
</div>
</div>
Note instead of a single IMG tag nested inside the gmap DIV, there are a bunch of other DIVs and those are in fact the various UI elements of a dynamic google map.
It is possible (cough - likely) I am doing something braindead. Just asking in case someone else has seen this static image returned from the google v3 api. Perhaps it is some interaction with JQM ?
The attached picture shows my map page before I create the google map (I just wanted to make sure it is visible, all enhancement by jqm is done, and i show the div that I will hand to google maps in red - to see that its size is >0)
Then I click on the ReMap button top right which actually calls the new google.maps.Map() which creates the map. You can see it does so in the provided space, correctly.
But - alas - as a static image.
For reference I also include the DOM hierarchy of that page. I don't think the map DIV itself HAS to be the data-role=content DIV (it is not in my case)
Thanks in advance !
Libs used:
jQuery v1.5rc1
jQuery Mobile v1.0a3pre
(bleeding edge)
2
