Search jQuery

jQuery Forum

jquerymobile 1.2 google map full screen problem

in jQuery Mobile • 6 months ago

Hello,

i use google maps in jquerymobile. after upgrade to jqm 1.2 , maps not shown in full screen.(in mobile & desktop browsers). But when i resize browser window, it turns into full screen(that i want at first screen opened).

i search problem in internet and try most of them but none of them helpful for me.

What is you suggestions?

<h1 id="mapHeader">Konum</h1>

</div>

<!--<div data-role="content" id="map_content" style="padding: 0px; width: 100%; height: 100%;overflow: hidden;">

</div>

Replies(3)

gogofi

Re: jquerymobile 1.2 google map full screen problem

6 months ago

Any Suggestion??

iandmac

Re: jquerymobile 1.2 google map full screen problem

6 months ago

I had this same issue, where the google mapping image was off center but an orientation change on the phone then loaded the page to full width and height. My discovery was that as my page was an internal page, google maps did not know or understand what the dimensions of the screen was, so the off center result..

My solution (which may not be pretty) was to add in all of the java script into just before the closing /head as follows:

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="jquery.ui.map.services.js"></script>
<script type="text/javascript">
$('#MappingPage').live('pageshow',function(event, ui){
$mapheight = $(window).height();
$('#mapping_area').css({'height' : $mapheight, 'width' : '100%'});
var AddressDetail = '';
AddressDetail = AddressDetail + '<b>Company Name</b><br /><a href="http://maps.google.com/maps?q=Lat and Long Co0ords">Get directions</a><hr />';
AddressDetail = AddressDetail + '<div>';
AddressDetail = AddressDetail + 'Visual Address details';
AddressDetail = AddressDetail + '</div>';
$('#mapping_area').gmap({'center': '<actinic:variable name="Web App Mapping" />', zoom:15,streetViewControl: false }).bind('init', function(evt, map) {
$('#mapping_area').gmap('addMarker', {'position': map.getCenter()}).click(function() {
$('#mapping_area').gmap('openInfoWindow', { 'content': AddressDetail}, this);
});
});
});
</script>

I then had my data-role = page in the body as normal as follows:

<div data-role="page" data-fullscreen="true" id="MappingPage" data-add-back-btn="true" data-cache="never">
<div data-role="header" data-position="inline" data-add-back-btn="true" >
<a href="HomePageURL" data-icon="home" data-iconpos="notext" ></a>
<h1>Find Us:</h1>
<a href="#" onclick="history.go(-1);return false" data-icon="back" >Back</a>
</div>
<div data-role="content" class="content">
<div id="mapping_area"></div>
</div>
My Footer
</div>

The page change function in the head java script then takes care of reading the viewport dimensions, assigning them to the mapping_area id within the content area and then loads the google map code etc etc.

As I say, might not be pretty compared to how others can good cleaner than me, but worked for me, so might help.

gogofi

Re: jquerymobile 1.2 google map full screen problem

5 months ago

i solved when i used jquery.ui.maps. And it is important not to use width:100% in canvas style. instead of resize canvas on pagebeforeshow event

$('#map').live('pagebeforeshow',function(e,data){ $('#map_canvas').height($(window).height() - (10 + $('[data-role=header]').height() - $('[data-role=footer]').height())); });

</div>

Top Reply

Response title

Attachments

jQuery Forum

jquerymobile 1.2 google map full screen problem

Replies(3)

Re: jquerymobile 1.2 google map full screen problem

Re: jquerymobile 1.2 google map full screen problem

Re: jquerymobile 1.2 google map full screen problem

Statistics

Tags

Actions

Related Posts