google maps not displayed correctly unless refreshing

Question

I am using JQuery mobile with the Google Map API. The map is not displayed properly unless I refresh the page and I don't 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 navigate from another page to the above page, I get the following result: broken google maps

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

It is obviously not a problem with the canvas, since it is displayed (in red). Plus,if I navigate trhough the map, I can see the marker displayed at the right position. These screenshots were made using Google Chrome, I tried with Firefox and the canvas is here completely red, no map at all.

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

EDIT:

See Gajotres' answer for details, but basically, within the link to access map.html page, adding target="_blank" solved the issue. Note that target="_self" seems to work as well, strange since it is supposed to be the default value. Details on target here.

Gajotres · Accepted Answer · 2013-07-23T10:05:07.567

There's a trick how google maps v3 framework can be easily implemented with jQuery Mobile.

Lets talk about the problems here. your content div has a height and width problem, mainly because only time page dimensions can be calculated correctly is during the pageshow event. But even then content div will not cover full page.

Your problem can be solved with a little bit of CSS :

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

Basically you are forcing your content to 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 you take a look at this ARTICLE you will find much more information regarding this topic plus examples.

Using your working example, I managed to reproduce the error. You can have a look here : http://jsfiddle.net/leochab/MfhSX/ — leochab, Jul 18 '13 at 11:19
Easily fixable, map must be initialized on correct page, in your case, because map is part of a index2 page it must be initialized during the index2 pageinit event. http://jsfiddle.net/UbhdS/1/ This is the only difference between your and my code. — Gajotres, Jul 18 '13 at 11:36
Or there's one more solution, I will also add it to my answer. — Gajotres, Jul 18 '13 at 11:43
Note that on my local machine I have 2 seperates files: the `index.html` file with a link to the `map.html` file where I load the map. I moved all the code (`initMap()`) from the `map.js` to `map.html`, but the behavior is still the same. — leochab, Jul 18 '13 at 12:07
If possible can you mail me those 2 files and I will fix it in few minutes. You can find my mail in my profile. If not tell me and I will try to simulate it also in 2 separate files. — Gajotres, Jul 18 '13 at 12:10
Fixed files mailed back to you. I have forgot to mention I have tested them on FF and Chrome alike. — Gajotres, Jul 18 '13 at 13:04

score 4 · Answer 2 · answered Jul 18 '13 at 09:51

4

Try to add following code...

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

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

answered Jul 18 '13 at 09:51

Dipen Dedania

1,452
1
21
37

score 0 · Answer 3 · answered Mar 25 '14 at 17:30

Just for completeness: The action of drawing the map 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 refresh needed

google maps not displayed correctly unless refreshing

EDIT:

3 Answers3

Final solution :

index.html

map.html

Linked