Menu
I'm using Jquery Mobile 1.0 and Google Maps v3 to load a user location map. The map loads fine when accessed via direct url but when accessed from a link, it chokes up and nothing is displayed. If I refresh the page, the map loads fine.
Here's a link to a test build that mimics the issue: http://stacefelder.com/stacefelder/Tests/index.html click 'My Map' to see ... nothing. Hit refresh to see the map load.
Here's the script in the map page header:
<script type="text/javascript">
$('#basic_map').live("pageshow", function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
And here's the html in the map page body:
<div data-role="page" id="basic_map">
<div data-role="header">
<h1>map test 901</h1>
</div>
<div id="map_canvas"></div>
</div>
I've also tried pagecreate instead of pageshow with no discernable difference. Any idea what I'm missing here?
Thanks for any and all suggestions!
317
If you navigate to this page from another page, jQM only pulls in the JS within your div[data-role="page"] tags, so if your JS is in your <head> tags that won't be pulled in, this is what is causing your issues.
Also yes you should use pageinit instead of pageshow, pageshow will re-fire if you navigate back to a page etc... if you have issues with a page being loaded more than once and multiple pages with the same id, there's a clever trick to use the last div[data-role="page"]
jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){
So for a trouble free answer try this:
<div data-role="page" id="basic_map">
<script type="text/javascript">
$("div:jqmData(role='page'):last").bind('pageinit', function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
<div data-role="header">
<h1>map test 901</h1>
</div>
<div id="map_canvas"></div>
</div>
I encountered the same issue and couldn't fixed it with JQM event's model.
Finally I fixed it by adding rel="external" to all the anchors that are linking to a page with a google map. This solution desactivates pages transitions and preloaders.
Quick and dirty but... it works now.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
