Search jQuery

jQuery Forum

jQuery Mobile

marco.beni

Problem with map and different pages.

in jQuery Mobile • 4 months ago

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

Replies(4)

watusiware

Re: Problem with map and different pages.

4 months ago

It's ineffective to put different content inside the <head> of different pages.

JQM loads content from <head> of the first page loaded. After that, it uses AJAX to load pages, and it tosses-out everything in <head> except the <title>

The only reason that it's conventional to include common JS and CSS files in <head> of every page is so that users can enter your site at any page, keep bookmarks, etc. In fact, for a PhoneGap project, you can omit the <head> content on every page except for the main index file.

I'd suggest you read through the first few pages of the docs, especially this:

http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html

marco.beni

Re: Problem with map and different pages.

4 months ago

Hi watusiware thank you for reply.

I read some page of your link and i solve my problem. Very usefull, now i have understad how jquery mobile works.

I fix it whit this code between <head></head>.

Hopefully this helps someone else.

$( document ).delegate("#nameofmyjquerymobilepage", "pageinit", function() {

});

marco.beni

Re: Problem with map and different pages.

4 months ago

Hello again.

problem about that isn't finish :(

now in the second page map appear, but is not centered :/

What can i do to solve that problem?

new code:

<!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" />
<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">
$( document ).delegate("#diomerda", "pageinit", function() {
});
$( document ).bind( "pageshow", function( event, data ){
google.maps.event.trigger(my_map, 'resize');
});
</script>
<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="start" data-role="page">
<div data-role="header" data-id="foo1" data-position="fixed">
<h1><img src="img/logo.png" width="121" height="32" alt="be.Cycle"></h1>
</div>
<div data-role="content">
<div id="map_canvas">
<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>
</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="#diomerda" 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 id="diomerda" data-role="page">
<div data-role="header" data-id="foo1" data-position="fixed">
<h1><img src="img/logo.png" width="121" height="32" alt="be.Cycle"></h1>
</div>
<div data-role="content">
<div id="my_map" style="width:100%; height:600px;">
</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 language="javascript">
$("#my_map").gmap3({
map:{
address:"FIRENZE, PROVINCE OF FLORENCE, ITALY",
options:{
zoom:12,
mapTypeControl:false,
navigationControl: false,
scrollwheel: false,
streetViewControl: false,
}
}
});
</script>
</body>
</html>

watusiware

Re: Problem with map and different pages.

4 months ago

- jQuery Mobile 1.2 is not compatible with jQuery 1.8.3. Use 1.8.2.

- Is gmap3.js meant to work with jQuery Mobile? One should not assume that any jQuery plugin will work with jQuery Mobile, unless the author specifically states that it is.

- I see you are using a multi-page document now. I don't recommend that. There are many issues with that approach. It's fine if your site is never going to be more than a handful of pages, though. If it will grow beyond that, use single-page documents, and avoid future trouble. You can't jump back and forth between multi-page documents (or between single and multi) without some significant drawbacks.

FWIW, I'm using jquery.ui.map, which is meant to work either with just jQuery or jQuery Mobile.

Top Reply

Response title

Attachments

jQuery Forum

Problem with map and different pages.

Replies(4)

Re: Problem with map and different pages.

Re: Problem with map and different pages.

Re: Problem with map and different pages.

Re: Problem with map and different pages.

Statistics

Tags

Actions

Related Posts