All geek questions in one place

Google maps do not display correctly until updated

I am using jQuery mobile with the Google Map API. The map does not display properly if I do not refresh the page, and I do not understand why.

here is my 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 my 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 I go from another page to the previous page, I get the following result: broken google maps

And then, when I update, I get the expected result: refreshed google maps working fine

This is obviously not a problem with the canvas, as it is displayed (in red). In addition, if I move around the map, I see a marker displayed in the correct position. These screenshots were taken using Google Chrome, I tried with Firefox, and the canvas here is completely red, with no map at all.

PS: this is a simple version of my source code, but the behavior is the same.

EDIT:

See Gajotres answer for more details, but basically, in the link to access the map.html page, adding target="_blank" solved the problem. Note that target="_self" seems to work just as weird as it should be the default. Read more about target here .

+4
source share
3 answers

Here is a trick with which google maps v3 can be easily implemented using jQuery Mobile.

Let's talk about the problems here. your div content has a problem with height and width, mainly because only the dimensions of the temporary page can be correctly calculated during the pageshow event. But even then, the content of the div will not cover the full page.

Your problem can be solved with a little CSS:

 #content { padding: 0 !important; position : absolute !important; top : 40px !important; right : 0 !important; left : 0 !important; height: 200px !important; }

Basically you make your content cover the available space.

Working example: http://jsfiddle.net/RFNPt/2/

Final decision:

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 you look at this ARTICLE , you will find much more information on this topic plus examples.

+7
source

Try adding the following code ...

 $('#canvas-map').on('pageshow', function(){ google.maps.event.trigger(canvas-map, "resize"); });

this will fire a resize event and reload the map on your page.

+4
source

Just for completeness: the map drawing action should be performed after the page loads , that is, when the page has actual values ​​for width and height, and you can initialize it as follows:

 var map; //declared as global so you can access the map object and add markers dynamically $("#canvas-map").on( "pageshow", function() { var mapProp = { center:new google.maps.LatLng(53.6721226, -10.547924), zoom:13, mapTypeId:google.maps.MapTypeId.ROADMAP }; map=new google.maps.Map(document.getElementById("map-canvas"),mapProp); });

No update required

0
source

Source: https://habr.com/ru/post/1492047/

More articles:


All Articles