PhoneGap + JQuery Mobile + Google Maps v3: la carte montre en Haut à Gauche du carrelage?

J'ai une application PhoneGap qui utilise JQuery mobile pour naviguer entre les pages.

Quand j'ai naviguer à partir de la page principale d'une page contenant une carte de Google maps, la carte montre une seule tuile à la fois dans le coin supérieur gauche comme ceci:
PhoneGap + JQuery Mobile + Google Maps v3: la carte montre en Haut à Gauche du carrelage?

Quelle peut être la raison pour cela ?

Code Source:
Le script suivant est dans la tête de ma page

<script>
            $(document).on("pageinit", "#stores", function () {
                var centerLocation = new google.maps.LatLng('57.77828', '14.17200');

        var myOptions = {
            center: centerLocation,
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            callback: function () { alert('callback'); }
        };

        map_element = document.getElementById("map_canvas");




        map = new google.maps.Map(map_element, myOptions);

        var mapwidth = $(window).width();
        var mapheight = $(window).height();
        $("#map_canvas").height(mapheight);
        $("#map_canvas").width(mapwidth);
        google.maps.event.trigger(map, 'resize');

            });
        </script>

Ma Page, c'est comme cela

<!-- Home -->
        <div data-role="page" id="home">
.
.
.
</div>

<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>

Je naviguer à partir de la maison à la page des cartes comme ceci:

<a href="#stores">Stores</a>

Mise à jour
après l'application de Gajotres solution les carreaux de devenir comme ça

Montrez-nous votre javascript et le code HTML.
stackoverflow.com/questions/13823556/...
J'ai ajouté le code, veuillez consulter la question modifiée
Je connaît des problèmes similaires de moi. J'ai constaté que lorsque la page a été initialisé, la carte serait dimensionné en fonction de ce qu'il croyait, il est actuellement disponible taille, mais si plus tard vous avez rendu visible, il ne serait pas redimensionner automatiquement. google.maps.event.trigger(map, "resize"); doit faire quelque chose comme ça pour vous, mais vous aurez à appeler quand vous faites la carte visible.

OriginalL'auteur Mina Samy | 2013-04-16

9

intro

Les nouvelles versions de jQuery Mobile et Google Maps v3 sont un peu spécial.

Votre premier problème a été en utilisant pageinit événement pour le calcul. À ce point, vous ne pouvez pas obtenir une bonne page de hauteur et de largeur. Ainsi, au lieu d'utiliser pageshow, vous trouverez de travail dans mon exemple.

Avant de vous montrer la carte vous avez besoin de redimensionner son contenu DIV. C'est parce que le contenu de la div redimensionner en fonction de la disposition des éléments internes. Nous avons donc besoin de le corriger à la main, à l'aide de javascript ou CSS. J'ai déjà une réponse sur cette question: google map et non en plein écran après la mise à niveau de jquerymobile 1.2 mais je peux aussi vous montrer un exemple de travail:

Exemple de travail

De travail jsFiddle exemple: http://jsfiddle.net/Gajotres/GHZc8/ (solution Javascript, CSS solution peut être trouvée dans un lien en bas).

Code

HTML
```
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content" id="content">
            <div id="map_canvas" style="height:100%"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                First Page
            </h3>
        </div>
    </div>
</body>
</html>    
```
Javascript

Ici est une fonction utilisée pour calculer la bonne hauteur de la page:
```
   $('#map_canvas').css('height',getRealContentHeight());

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}
```
Une autre solution

Il y a aussi une autre solution à ce problème qui n'utilise CSS et il peut être trouvé ICI. Je préfère cette solution de cause, il n'est pas besoin de javascript pour fixer correctement la carte de la hauteur.

CSS:
```
#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}
```
Une dernière chose

Aussi, si la largeur de la page est toujours incorrecte, il suffit de le régler à 100%:
```
$('#map_canvas').css('width', '100%');
```
Essayé votre solution, le problème est toujours le même, mais la tuile est plus grande. pourrait-il en être autrement ?
Pourquoi n'essayez-vous pas ma solution à l'intérieur de votre exemple. Si ma solution est également pas de travail puis le problème est ailleurs.
ok, testé à nouveau, la carte s'affiche à la taille de la fenêtre, mais à chaque fois que je touche la carte, il affiche toujours une seule tuile comme dans l'image ci-jointe
Je crois que je comprends votre problème. Vous êtes d'ajouter à la mauvaise div. Ne pas ajouter à la data-role="content" div comme ceci: <div data-role="contenu" id="map_canvas"></div> au lieu de créer un autre div à l'intérieur de celui-ci, comme ceci: <div data-role="content"><div id="map_canvas"></div></div>. Fondamentalement, vous vous battez avec un jQuery Mobile sur un contenu de la div dimensions.
Merci beaucoup Cela a fonctionné après l'utilisation de votre code dans le redimensionnement de la carte toile en "pageshow" au lieu de "pageinit"

OriginalL'auteur Gajotres
0

J'ai eu ce problème pendant des mois à se taper la tête contre le mur en essayant de trouver une solution. Même en mettant les propriétés de style pour le contenu et la carte-caves divs ne résout pas tous les problèmes. google.cartes.de l'événement.déclencheur de la carte, "redimensionner") n'a pas le faire non plus. La carte était en plein écran à maintenant, mais toujours centré dans le haut à gauche. Et si vous avez appelé votre initialiser des fonctions sur chaque pageshow la carte serait remettre à sa position d'origine à chaque fois.

J'ai été en mesure de venir avec cette appelé le pageshow événement et résolu tous mes problèmes!
```
$('map-page').on("pageshow", function() {
    var latLng = map.getCenter();
    google.maps.event.trigger(map,'resize');
    map.setCenter(latLng);
});
```
CSS
```
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

  .ui-page { -webkit-backface-visibility: hidden; }

</style>
```
Voici mon contenu et de la carte-toile div.
```
<div data-role="content" id="mapContent" style="padding:0;position:absolute;
top:40px;right:0px;bottom:60px;left:0px; ">
    <div id="map-canvas" style="width:100%;" >
    </div>
</div>
```
Il devient le centre de la carte, redimensionne la carte de l'actuel div, puis définit le centre de la carte. De cette façon, si l'utilisateur quitte la page et revient, la carte ne perd pas de sa position.

Espère que cette aide.

Robert

OriginalL'auteur BGecko

Vous devez vous connecter pour publier un commentaire.

intro

Exemple de travail

Code

HTML

Javascript

Une autre solution

CSS:

Une dernière chose