Google map + jQuery: bug de rendu

Question

Lorsque vous placez une carte Google dans un onglet jquery-ui, la carte ne s'affiche pas correctement dans certaines circonstances. Pour reproduire:

1. Go here
2. Cliquez sur le lien 'liste'
3. Redimensionner la fenêtre du navigateur
4. Cliquez sur le lien 'carte'

Observez que certains des superpositions de noms de lieux dessiner correctement, mais d'autres ne le font pas. J'ai effectivement enlevé toutes les choses de jquery-ui pour limiter la portée du problème, et il semble être juste l'application de display: hide/display: block qui cause le problème.

MISE À JOUR

Le bogue se produit aussi, de temps en temps, juste au moment où basculer entre display: none/bloc - par exemple aucun redimensionnement n'a lieu. Cela semble être le plus commun dans IE (8).

Answer 1

essayez ceci:

if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()}); 
    } else { 
    window.addEventListener("resize", function() {this.map.onResize()} , false); 
    } 

après

map_initialize(); 

parce que vous devez dire la carte que la page est redimensionnée, peut-être c'est le problème que vous rencontrez pas jquery un

EDIT

Ok retirer le

if (window.attachEvent) { 
      window.attachEvent("onresize", function() {map.onResize()}); 
     } else { 
      window.addEventListener("resize", function() {map.onResize()} , false); 
     } 

et remplacer votre

$('#map').show(); 

avec:

$("#map").show(1, function() { 
      resizeMap(); 
     }); 

resizeMap() appellera checkResize() de Google Maps sur la carte particulière.

source: http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

Answer 2

Essayez d'appeler map.onResize() après que vous montrer la carte à chaque fois.

Cela peut ne pas fonctionner correctement si elle est appelée lorsque la carte est cachée en utilisant display: none car elle aurait une hauteur et une largeur nulles.

Answer 3

De l'online docs:

Utilisez la technique hors gauche pour cacher panneaux à onglets inactifs. Par exemple. dans votre feuille de style remplacez la règle du sélecteur de classe ".ui-tabs.. ui-onglets cacher » avec

.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
} 

Answer 4

Utilisation du jQuery Google Maps plugin est était d'avoir le même problème avec les onglets jQuery UI

La carte est créée comme ceci:

$("#google-map").googlemap({ 
    controls: false, 
    labels: true, 
    zoom: 9, 
    latitude: 51.5, 
    longitude: 0, 
    debug: false 
}); 

Il a été résolu très facilement (mais pas rapidement) en appelant

$("#google-map").googlemap().getMap().checkResize(); 

Après la carte div est affiché. Je l'ai testé sur FF et Safari, en plus

resizeTo(screen.width, screen.height); 

Works dans FF mais pas IE ou Safari.