Search jQuery

jQuery Forum

Screen name:
marco.beni

marco.beni's Profile

1 Posts

2 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Problem with map and different pages.

[4 Replies]

26-Jan-2013 07:42 PM
Forum: jQuery Mobile

Hi. i'm your worst nightmare, a newbie :D
This is my problem:

I'm using gmap3 to load maps on two different pages.

On the first page (index.html) the map works correctly, but when i go to second page the map doesn't appear.

this is a link to see my issue -> click here

and click to the button "Mappa"

And this is the code:

Index.html

<!DOCTYPE html>
<html>
<head>
<title>page1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jqm/mango.css" />
<link rel="stylesheet" href="jqm/jquery.mobile.structure-1.2.0.css" />
<style>
#map_canvas {
width: 100%;
height: 200px;
}
.nav-custom .ui-btn .ui-btn-inner { padding-top: 35px !important; }
.nav-custom .ui-btn .ui-icon { width: 40px!important; height: 28px!important; margin-left: -20px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#percorsonav .ui-icon { background: url(img/icon/percorsoicon.png) 50% 50% no-repeat; background-size: 27px 27px; }
#mappanav .ui-icon { background: url(img/icon/mapicon.png) 50% 50% no-repeat; background-size: 30px 33px; }
#artenav .ui-icon { background: url(img/icon/arteicon.png) 50% 50% no-repeat; background-size: 24px 26px; }
#utilitynav .ui-icon { background: url(img/icon/utilityicon.png) 50% 50% no-repeat; background-size: 30px 24px; }
#newsnav .ui-icon { background: url(img/icon/newsicon.png) 50% 50% no-repeat; background-size: 31px 27px; }
}
</style>
</head>
<body style="margin-left:0px;">
<div id="one" data-role="page">
<div data-role="header">
<h1><img src="img/logo.png" width="121" height="32" alt="be.Cycle"></h1>
</div>
<div data-role="content">
<div id="map_canvas"></div>
<div data-role="footer" data-id="foo1" data-position="fixed" data-theme="b" class="nav-custom">
<div data-role="navbar" class="nav-custom">
<ul>
<li><a href="mappa.html" data-transition="slide" id="mappanav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Mappa</a></li>
<li><a href="percorsi.html"id="percorsonav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Percorsi</a></li>
<li><a href="arte.html" id="artenav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Arte</a></li>
<li><a href="utility.html" id="utilitynav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Utility</a></li>
<li><a href="news.html" id="newsnav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">News</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="jqm/jquery-1.8.3.min.js"></script>
<script src="jqm/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jqm/gmap3.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script type="text/javascript">
$('#map_canvas').gmap3({
getgeoloc:{
callback : function(latLng){
if (latLng){
$(this).gmap3({
marker:{
latLng:latLng
, options:{icon: "img/me.png;"}
},
map:{
options:{
zoom: 12,
mapTypeControl:false,
navigationControl: false,
scrollwheel: false,
streetViewControl: false,
}
},
});
}
}
}
});
</script>
</body>
</html>

second page:

<!DOCTYPE html>
	<html>
	<head>
	<title>be.Cycle</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="jqm/mango.css" />
	<link rel="stylesheet" href="jqm/jquery.mobile.structure-1.2.0.css" />

	<style>

	#map_canvas2 {
	width: 100%;
	height: 200px;
	}
	.nav-custom .ui-btn .ui-btn-inner { padding-top: 35px !important; }
	.nav-custom .ui-btn .ui-icon { width: 40px!important; height: 28px!important; margin-left: -20px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }

	#percorsonav .ui-icon { background: url(img/icon/percorsoicon.png) 50% 50% no-repeat; background-size: 27px 27px; }

	#mappanav .ui-icon { background: url(img/icon/mapicon.png) 50% 50% no-repeat; background-size: 30px 33px; }

	#artenav .ui-icon { background: url(img/icon/arteicon.png) 50% 50% no-repeat; background-size: 24px 26px; }
	#utilitynav .ui-icon { background: url(img/icon/utilityicon.png) 50% 50% no-repeat; background-size: 30px 24px; }
	#newsnav .ui-icon { background: url(img/icon/newsicon.png) 50% 50% no-repeat; background-size: 31px 27px; }

	}

	</style>
	<script src="jqm/cordova-2.3.0.js"></script>

	<script type="text/javascript">

	// Wait for Cordova to load
	//
	document.addEventListener("deviceready", onDeviceReady, false);

	// Cordova is loaded and it is now safe to make calls Cordova methods
	//
	function onDeviceReady() {
	}

	</script>



	</head>
	<body style="margin-left:0px;">

	<div id="one" data-role="page">

	<div data-role="header">
	<h1><img src="img/logo.png" width="121" height="32" alt="be.Cycle"></h1>
	</div><!-- /header -->

	<div data-role="content">

	<div id="map_canvas2"></div>

	<div data-role="footer" data-id="foo1" data-position="fixed" data-theme="b" class="nav-custom">
	<div data-role="navbar" class="nav-custom">
	<ul>
	<li><a href="mappa.html" data-transition="slide" id="mappanav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Mappa</a></li>
	<li><a href="percorsi.html"id="percorsonav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Percorsi</a></li>
	<li><a href="arte.html" id="artenav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Arte</a></li>
	<li><a href="utility.html" id="utilitynav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Utility</a></li>
	<li><a href="news.html" id="newsnav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">News</a></li>
	</ul>
	</div>
	</div>
	</div><!-- /content -->

	</div><!-- /page -->

	</div>


	<!-- /Script -->

	<script src="jqm/jquery-1.8.3.min.js"></script>
	<script src="jqm/jquery.mobile-1.2.0.min.js"></script>
	<script type="text/javascript" src="jqm/gmap3.min.js"></script>
	<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

	<script type="text/javascript">

	$('#map_canvas2').gmap3({
	getgeoloc:{
	callback : function(latLng){
	if (latLng){
	$(this).gmap3({
	marker:{
	latLng:latLng
	, options:{icon: "img/me.png;"}
	},
	map:{
	options:{
	zoom: 2,
	}
	},
	});
	}
	}
	}
	});

	</script>



	<!-- /Script -->

	</body>
	</html>

How can i solve this problem?

Thx a lot

Marco

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend