Google maps + Jqtouch

48 views

Skip to first unread message

Benoit

unread,

Feb 4, 2010, 4:35:27 AM2/4/10

to jQTouch

Hi,

i try to launch a google map in a div without jqtouch because of the
panning issue when we use a draggable map with jqtouch. I try to add a
display:none parameter to the #jqt div to do this but i can't come
back to my #home div (i use Jqtouch r133 last revision)...

in my index.html i have this code

<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
<h1>My home</h1>
<a class="button fade" id="infoButton" href="#params">Paramètres</
a>
</div>
<ul class="rounded">
<li class="arrow"><a class="fade" href="#mapwrapper"
id="mapproches">My map in full screen</a></li>
</ul>
<div class="info"></div>
</div>
</div>

You notice that my map is out of the jqt div

in my js

$('#mapproches').click(function(){
$('#jqt').addClass("jqt_display");
$('#mapwrapper').css("display", "block");
$('body').bind('turn', function(event, info){
if (info.orientation == "landscape") {
$('#map_canvas').addClass('map_canvas_landscape');

}
else {
$('#map_canvas').removeClass('map_canvas_landscape');
}
});

navigator.geolocation.clearWatch(position_courante);
setLoadingPopup('mapwrapper');
localiser_proxi_carte();
});

$('#map_back').click(function(){
$('#jqt').removeClass("jqt_display");
$('#mapwrapper').css("display", "none");
jQT.goTo('#home', 'fade');
});

in my css

.map_back {
position:relative;
float:left;
top:20px;
left:10px;
background: url(../icones/house.png) no-repeat;
width:22px;
height:22px;
z-index:10;
}

.jqt_display {
display:none;
}

this code seems to be ok in firefox and my app i usable but on the
iphone i have errors when i go back to #home and the webapp does not
work any more.