javascript - google maps not displayed correctly unless refreshing -
i using jquery mobile google map api. map not displayed unless refresh page , don't understand why.
here map.html file:
<div data-role="page" id="map-page"> <div data-role="content" id="canvas-map" style="background-color:red"></div> <script src="js/map.js"></script> <script type="text/javascript"> var $canvasmap = $('#canvas-map'); $('#canvas-map').on('pagebeforeshow', initmap()); </script> </div> and map.js file:
function initmap() { "use strict"; google.maps.visualrefresh = true; var marker, map, mylocation = {lat:50, lon:-80}, mapoptions = { zoom: 5, center: new google.maps.latlng(mylocation.lat, mylocation.lon), maptypeid: google.maps.maptypeid.plan, disabledefaultui: true }; $('#canvas-map').css("height", "200px").css("padding", "0px"); map = new google.maps.map(document.getelementbyid('canvas-map'), mapoptions); /** myposition **/ marker = new google.maps.marker({ map: map, draggable: false, animation: google.maps.animation.drop, position: new google.maps.latlng(mylocation.lat, mylocation.lon), }); } if navigate page above page, following result: 
and when refresh, expected result: 
it not problem canvas, since displayed (in red). plus,if navigate trhough map, can see marker displayed @ right position. these screenshots made using google chrome, tried firefox , canvas here red, no map @ all.
ps: simple version of original code, behavior same.
edit:
see gajotres' answer details, basically, within link access map.html page, adding target="_blank" solved issue. note target="_self" seems work well, strange since supposed default value. details on target here.
there's trick how google maps v3 framework can implemented jquery mobile.
lets talk problems here. content div has height , width problem, because time page dimensions can calculated correctly during pageshow event. content div not cover full page.
your problem can solved little bit of css :
#content { padding: 0 !important; position : absolute !important; top : 40px !important; right : 0 !important; left : 0 !important; height: 200px !important; } basically forcing content cover available space.
working example: http://jsfiddle.net/rfnpt/2/
final solution :
index.html
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <title>mytitle</title> </head> <body> <div data-role="page" class="page"> <div data-role="content" id="index-content"> <div id="menu"> <a href="map.html" data-role="button" target="_blank">map</a> </div> </div> </div> </body> </html> map.html
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <title>mytitle</title> </head> <body> <div data-role="page" id="map-page"> <div data-role="content" id="content"> <div id="canvas-map" style="height:100%"/> </div> <style> #content { padding: 0 !important; position : absolute !important; top : 0 !important; right : 0 !important; bottom : 40px !important; left : 0 !important; } </style> <script type="text/javascript"> $(document).on('pageshow', '#map-page', function(e, data) { var marker, map, mylocation = { lat: 50, lon: -80 }, mapoptions = { zoom: 5, maptypeid: google.maps.maptypeid.plan, center: new google.maps.latlng(mylocation.lat, mylocation.lon) }; $('#canvas-map').css("height", "200px").css("padding", "0px"); map = new google.maps.map(document.getelementbyid('canvas-map'), mapoptions); marker = new google.maps.marker({ map: map, position: new google.maps.latlng(mylocation.lat, mylocation.lon), }); }); </script> </div> </body> </html> if take @ article find more information regarding topic plus examples.
Comments
Post a Comment