API Google Maps v3 et onglets jQuery-UI

J'utilise la nouvelle version 3 de l'API Google Maps. Fondamentalement, le problème que j'ai, c'est que j'ai une carte Google dans les onglets de l'interface utilisateur jQuery. La carte ne figure pas dans le premier onglet, vous devez donc cliquer sur l'onglet pour afficher la carte, mais cela ne s'affiche pas toujours correctement. C'est à dire. parfois, les images de la carte ne sont pas correctement placées.API Google Maps v3 et onglets jQuery-UI

J'ai eu ce problème quand j'utilisais v2 de l'API, mais je réussi à résoudre le problème en initialisant ma carte comme ceci:

map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});

Malheureusement cela ne fonctionne pas v3. J'ai examiné les suggestions sur ce sujet: Problems with Google Maps API v3 + jQuery UI Tabs

Rien vraiment travaillé pour moi, mais je l'une des solutions de contournement dans que j'initialiser la fonction carte de la charge de l'onglet:

$(function() 
{ 
    $("#tabs-container").tabs({show: function(event, ui) 
    { 
     if(ui.panel.id == "viewmap") 
     { 
      mapiInitialize(); 
     } 
    }}); 
});

C'est tout bon mais je préfère de loin que la carte soit "là" quand l'utilisateur clique sur l'onglet. Il faut parfois quelques secondes pour que la carte se charge et tout ce que voit l'utilisateur en ce moment est un fond gris uni - un indicateur de chargement peut avoir aidé.

Est-ce que quelqu'un a des suggestions? Mon balisage et CSS est la suivante:

<div id="tabs-container"> 
<ul> 
    <li><a href="#details"><span>Details</span></a></li> 

    <li><a href="#viewmap"><span>Location Map</span></a></li> 

    <li><a href="#reviews"><span>Reviews (<?php echo $numrows; ?>)</span></a></li> 
</ul> 

<div id="details"><?php echo $details; ?></div> 

<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;"> 
    <div id="map" style="height: 340px;"></div> 
</div> 

<div id="reviews"><?php echo $reviews; ?></div> 

</div><!-- end tab-container -->

Source

2010-10-10 GSTAR

Une fois que vous passez à l'onglet qui a la carte appel google.maps.events.trigger(map, 'resize'); qui devrait alors faire afficher correctement.

Source

2010-10-12 00:06:12 skarE

Où ce code devrait aller? Dans ma fonction jQuery UI Tabs ou dans le fichier JS Google Maps? J'ai essayé de mettre dans la fonction jQuery UI Tabs mais il me dit que google.maps.events est null. J'ai inclus les fichiers JS Google Maps avant la fonction onglets de l'interface utilisateur jQuery. – GSTAR

Il devrait aller quelque part dans le code de votre onglet lorsque l'onglet est affiché et la carte est maintenant visible. – skarE

Cela ne fonctionne toujours pas. Quelqu'un en mesure de conseiller? – GSTAR

Essayez quand vous initialisez vos onglets jQuery UI:

$("#tabs-container").tabs({      
    show: function(event, ui) { 
     google.maps.event.trigger(map, 'resize'); 
    }      
});

Note: Vous devrez initialiser la carte avant d'initialiser les onglets .

Source

2011-02-16 19:36:57 Hassaan

il suffit d'utiliser

map.setZoom(map.getZoom());

Source

2012-03-28 06:19:13

API Google Maps v3 et onglets jQuery-UI

Répondre

Questions connexes