google maps affiche pas correctement, sauf si rafraîchissant

Je suis à l'aide de JQuery mobile avec l'API Google Map.
La carte n'est pas affichée correctement, sauf si j'actualise la page et je ne comprends pas pourquoi.

voici mon map.html fichier:

<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>

et mon map.js fichier:

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),
    });
}

Si je naviguer d'une page à la page mentionnée ci-dessus, j'obtiens le résultat suivant:
google maps affiche pas correctement, sauf si rafraîchissant

Et puis quand j'actualise, j'obtiens le résultat escompté:
google maps affiche pas correctement, sauf si rafraîchissant

Il n'est évidemment pas un problème avec la toile, puisqu'il est affiché (en rouge). De Plus,si je navigue trhough la carte, je peux voir le marqueur affiché à la droite de position.
Ces captures d'écran ont été faites à l'aide de Google Chrome, j'ai essayé avec Firefox et la toile est ici complètement rouge, pas de carte du tout.

PS: c'est une simple version de mon code d'origine, mais le comportement est le même.

EDIT:

Voir Gajotres réponse pour plus de détails, mais pour l'essentiel, dans le lien d'accès map.html page, en y ajoutant target="_blank" résolu le problème. Notez que target="_self" semble fonctionner aussi bien, étrange puisqu'il est censé être la valeur par défaut. Détails sur cible ici.

OriginalL'auteur leochab | 2013-07-18

  1. 7

    Il y a un truc comment google maps v3 cadre peut être facilement mis en œuvre avec jQuery Mobile.

    Permet de parler de problèmes ici. votre contenu div a une hauteur et une largeur problème, surtout parce que seul le temps dimensions de page peut être calculé correctement est au cours de la pageshow événement. Mais même alors, le contenu de la div ne couvrira pas toute la page.

    Votre problème peut être résolu avec un peu de CSS :

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

    Fondamentalement, vous forcez votre contenu afin de couvrir l'espace disponible.

    De travail exemple: http://jsfiddle.net/RFNPt/2/

    Solution finale :

    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>

    Si vous jetez un oeil à cette L'ARTICLE vous trouverez beaucoup plus d'informations à ce sujet ainsi que des exemples.

    À l'aide de votre exemple de travail, j'ai réussi à reproduire l'erreur. Vous pouvez jetez un oeil ici : jsfiddle.net/leochab/MfhSX
    Facilement réparable, la carte doit être initialisé sur la bonne page, dans votre cas, parce que la carte fait partie d'un index2 page, il doit être initialisé lors de l'index2 pageinit événement. jsfiddle.net/UbhdS/1 C'est la seule différence entre vous et mon code.
    Ou il y a encore une solution, je vais aussi ajouter à ma réponse.
    Notez que sur ma machine locale, j'ai 2 se sépare de fichiers: le index.html fichier avec un lien vers le map.html fichier où je charge la carte. J'ai déménagé tout le code (initMap()) à partir de la map.js à map.html, mais le comportement est toujours le même.
    Si possible pouvez-vous m'envoyer les 2 fichiers et je vais le corriger en quelques minutes. Vous pouvez trouver mon mail dans mon profil. Si pas de me dire et je vais essayer de le simuler aussi dans les 2 fichiers distincts.

    OriginalL'auteur Gajotres

  2. 4

    Essayez d'ajouter le code suivant...

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

    cela déclenche l'événement de redimensionnement et de rechargement de la carte sur votre page.

    OriginalL'auteur Dipen Dedania

  3. 0

    Juste pour être complet: L'action de le dessin de la carte doit être effectuée après le chargement de la page, c'est quand la page a les valeurs pour la largeur et la hauteur, et vous pouvez l'initialiser comme suit:

    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);
});

    Pas de rafraichissement nécessaire

    OriginalL'auteur beRoberto