Preserving Google Maps between page loads in jQuery Mobile

I'm developing a jQuery Mobile app which really relie on Google Maps. Although I tried over and over, it seems I cant deal with page transitions and map persistence. I'm really commited to do that and the way I have it working is like some kind of dirty workaround that I don't like at all. I have this function that runs on pageShow for the map page: initMap : function (){ if (!Mapper.map || !$('#canvasMapa div').length){ // Or has been removed weirdessly var mapOptions = { zoom : 13, center: new google.maps.LatLng (37.38264, -5.996295), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true // Disabling buttons and stuff }; // We create a new one Mapper.map = new google.maps.Map(document.getElementById('canvasMapa'),mapOptions); if (Mapper.localStorage && !Mapper.favsLoaded) Mapper.loadFavorites(); if (Mapper.markers.length) Mapper.recolocateMarkers(); } else { console.log(Mapper.map); Mapper.map.fitBounds(Mapper.mapBounds); } $('#mapa').die('pageshow'); } And that's it. It works. The first if check if the map has been initialized and also if it has lost the inside divs, that happens from time to time but it reloads the map. When the map is loading it checks if there were any markers in the app so it can be reallocated in the new map. This works loading dialogs within the same page. As much as you want. Then it comes the navigation of the app. Whenever you go to another page, strange things start to happen. This is the error I see on the console when change to page and the come back to the map. However, the map is still working: Uncaught TypeError: Cannot call method 'getSouthWest' of undefined c I.fitBounds I.fitBounds%7Bmain,geometry%7D.js:38 S%7Bmain,geometry%7D.js:24 I.fitBounds%7Bmain,geometry%7D.js:38 BuSeViCi.initMapapp.js:78 f.event.dispatchjquery-1.7.1.min.js:3 f.event.add.h.handle.ijquery-1.7.1.min.js:3 f.event.triggerjquery-1.7.1.min.js:3 f.fn.extend.triggerjquery-1.7.1.min.js:3 e.extend.eachjquery-1.7.1.min.js:2 e.fn.e.eachjquery-1.7.1.min.js:2 f.fn.extend.triggerjquery-1.7.1.min.js:3 a.Widget._triggerjquery.mobile.min.js:17 (anonymous function)jquery.mobile.min.js:43 f.Callbacks.njquery-1.7.1.min.js:2 f.Callbacks.o.fireWithjquery-1.7.1.min.js:2 f.Callbacks.o.firejquery-1.7.1.min.js:2 wjquery.mobile.min.js:41 f.fn.extend.on.ejquery-1.7.1.min.js:3 f.event.dispatchjquery-1.7.1.min.js:3 f.event.add.h.handle.ijquery-1.7.1.min.js:3 The line pointing to the app.js is the one that says: `Mapper.map.fitBounds(Mapper.mapBounds);` The only workaround I made is to clear the `Mapper.map` variable whenever I navigate to another page. That sounds really dirty as I said and I would like to check the object which is undefined to recover the map because it's working and logging the object shows me a Google Maps object. I **strictly** want to avoid using `rel="external"` because this breaks apps. You can't install it in Home page nor make PhoneGaps apps with those attributes so... what do you think about it?

以上就是Preserving Google Maps between page loads in jQuery Mobile的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏