L'API Google Maps v3, jQuery UI Tabs, carte pas de redimensionnement

Je suis à l'aide de l'API Google Maps v3, affichée sur un jQuery UI Onglet. J'ai été aux prises avec le déclenchement de mon google map pour redimensionner correctement lorsque l'onglet affichage de la carte est sélectionnée. Le jQuery documentation ici http://docs.jquery.com/UI/Tabs prévoit que:

Pour Google maps, vous pouvez également redimensionner
la carte une fois l'onglet s'affiche comme
ce:
$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

Peu importe ce que j'essaie, le code ci-dessus ne fonctionne pas pour moi.

Le code suivant fonctionne dans la mesure où il affiche une alerte quand je sélectionne l'onglet 9. Pour cette raison, je sais qu'au moins, je suis bien d'isoler le droit à l'événement déclencheur. Voici le code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            alert("Alert is working");
        }                                         
    });
});

Quand j'ai modifier ce code pour inclure le recommandé resizeMap(); commande, il ne fonctionne pas. Au lieu de cela, ce qu'il fait est d'ajouter les caractères "#tabs-9" à la fin de l'url, et puis il n'a même pas de sélectionner le bon onglet 9. Je ne peux même pas voir l'onglet 9 lorsque j'utilise ce code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            resizeMap();
        }                                         
    });
});

Enfin, lorsque j'ai modifier le code pour inclure une autre commande resize "de google.cartes.de l'événement.déclencheur(carte, 'redimensionner');", elle ne fonctionne toujours pas. Au lieu de cela, il ne permet pas de moi pour sélectionner l'onglet 9, et il n'ajoute pas les personnages à la fin de l'URL comme dans le cas ci-dessus, mais il ne sera pas redimensionner la carte. La carte afficher toujours que partiellement complète et qu'elle a des bandes grises sur la droite. Voici le code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
           google.maps.event.trigger(map, 'resize');
        }                                         
    });
});

Les idées de ce que je peux essayer? Je suis perplexe. Merci.

resizeMap() est pour V2. Il n'est jamais d'aller travailler pour vous.

InformationsquelleAutor DanielAttard | 2011-06-23

12

Ajouter ce qui suit à vos onglets constructeur:
```
$(function() {
    $("#myTabs").tabs({
        show: function(e, ui) {
            if (ui.index == 0) {
                google.maps.event.trigger(myMap, "resize");
            }
        }
    });
});
```
Vous devez tester ui.index pour l'index basée sur 0 du panneau qui contient votre carte de Google, et bien sûr mettre à jour les références à myMap et #myTabs.

Voir la section Événements de la La carte de l'objet de la documentation pour plus d'informations sur l'envoi d'un redimensionnement de l'événement déclencheur.
- Merci pour l'aide. Je suis en train de mettre en œuvre votre suggestion, mais il est malheureusement encore maintenant de travail.
- C'est de travail et génère une alerte: $(function() { $("#onglets").les onglets({ afficher: function(e, ui) { si (ui.index == 8) { alert("xxxx"); } } }); }); mais cela ne permet pas de redimensionner ma carte: $(function() { $("#onglets").les onglets({ afficher: function(e, ui) { si (ui.index == 8) { google.cartes.de l'événement.trigger("carte-toile", "redimensionner"); } } }); });
- Vous êtes de passage "carte-toile" comme une chaîne de caractères. La carte de l'objet est nécessaire. Notez comment myMap n'est pas une chaîne. Vous devez être le maintien d'une référence à l'objet dans une variable qui contient le résultat retourné d'appeler le constructeur de la carte.
- désolé pour la mauvaise mise en forme dans le commentaire précédent. si la référence à myMap être une référence à l'id de mappage comme dans: <div id="carte-toile" style="width: 200px; height: 200px"></div> ou est-ce une référence à: var carte = new google.cartes.Carte(mapDiv, { center: new google.cartes.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.cartes.MapTypeId.Feuille de route
- merci encore, maintenant, je comprends que la référence à myMap n'est pas une chaîne, mais une référence à l'objet dans une variable. Voici ma fonction d'initialisation: function initialize() { var mapDiv = document.getElementById ("map-canvas'); var carte = new google.cartes.Carte(mapDiv, { center: new google.cartes.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.cartes.MapTypeId.Feuille de route }); }
- Sur cette base, je suppose que le nom de la variable que je devrais être en utilisant simplement la carte " (sans les guillemets), mais il ne fonctionne toujours pas pour moi. Au lieu de ce qui se passe, c'est qu'il replace la carte dans le coin supérieur gauche de la page, ajoute '#tabs-9 " à l'URL, mais il ne permet pas de redimensionner et de fixer la carte. Il apparaît toujours avec le gris des pièces.
- Renommer vous variable n'affecte en quoi que ce soit malheureusement. Un nom, c'est comme tout les autres de JavaScript. Je ne peux pas vraiment vous en dire plus que ce que je sais à propos de ce qu'il faut pour déclencher les Cartes Google maps v3 événement de redimensionnement correctement. Le jQuery UI show événement est déclenché qu'après que le comité de l'élément contenant le contenu de l'onglet devient visible, de sorte à ce point, Google devrait être en mesure d'accéder navigateur attributs pour les dimensions de son conteneur. Il peut y avoir d'autres problèmes de votre balisage origine du visuel de l'incohérence, ou (plus probablement) la variable contenant votre carte ne peut plus être portée.
- Si vous souhaitez fournir un code supplémentaire pour démontrer le problème, je suggère de l'édition d'origine de votre réponse.
- une dernière question rapide - comment puis-je déterminer si la variable contenant ma carte est toujours dans la portée?
- alert(!!variableName) renvoie true si c'est dans la portée, false sinon. Vous devriez être en utilisant un navigateur outil de débogage comme celles qui sont disponibles à partir de Chrome en appuyant sur CTRL+MAJ+J et en cliquant sur le bouton Scripts ou Firebug pour Firefox, ou tout au moins la console d'erreur de Firefox, qui est également accessible par CTRL+MAJ+J. Ils vous diront de toute les problèmes survenus lors de l'exécution de votre script.
InformationsquelleAutor lsuarez

Je sais que ce sujet est ancien, mais pense que cela peut être utile à quelqu'un.

Pour éviter les problème de rendu avec jQuery UI Tabs et les Cartes de Google sur certains de ces onglets, vous pouvez effectuer les opérations suivantes:

//global variables
var gMapsCentralLocation;   //some initial map center location
var mapCenter;              //we will use this to overide your initialy map center so we can "remember" initial viewport when we go back and forth trought tabs
var mapCenterFlag = false;  //indicate if we need to use new google maps viewpoint center, or use initial.
var map;                    //google map

$(document).ready(function () {
    $('#YourTabs').tabs({
        show: function (event, ui) {
            switch (ui.tab.hash) {
                case "#GoogleMapsTab":
                    {
                        preRenderGoogleMaps();
                    }
                    break;
                default:
                    {
                        //to save previous map center when user select some other tab
                        if (map) {
                            mapCenter = map.getCenter();
                        }
                    }
                    break;
            }
        }
    });
    drawRegionOnMap();
});

function preRenderGoogleMaps(){
    //fix rendering issues
    google.maps.event.trigger(map, 'resize');

    if (!mapCenterFlag) {
        map.setCenter(gMapsCentralLocation);
        mapCenterFlag = true;
    } else {
        map.setCenter(mapCenter);
    }
}

function drawRegionOnMap() {
    map = null;    

    var gMapsOptions = {
        zoom: 8,
        center: gMapsCentralLocation,
        //POSSIBLE MAP TYPES (ROADMAP, SATELLITE, HYBRID, TERRAIN)
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), gMapsOptions);
}

InformationsquelleAutor ShP

J'ai réussi à le résoudre en initialisation de la carte lorsque la carte onglet est affiché, et l'édition d'un peu de css (le css est plus que probablement un rapport avec le thème de l'émission).

/* Initialise jQuery UI Tabs */
jQuery(function() {
    jQuery( "#tabs" ).tabs({
      fx: {
        opacity: 'toggle',
        duration: 300
      }
    });
});

/* Redraw the Google Map everytime tab-4 is shown/clicked */
jQuery(function() {
            jQuery( "#tabs" ).bind( "tabsshow", function(event, ui) { 
                if (ui.panel.id == "tabs-4") {
                    var mapOptions = {
                      center: myLatlng,
                      zoom: 13,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                }                                         
            });
});

Puis ajouter un peu de CSS pour corriger la carte de contrôle si elles sont hors de place etc.

#map img { max-width:none; }

si max-width de toutes les images est réglée à 100%, vous obtiendrez des problèmes.

Espérons que cette aide!

InformationsquelleAutor mossman

D'abord, allez dans le dossier où vous avez mis le modèle d'onglet, recherche pour l' <li> balise de charger votre carte d'onglet et de mettre ceci à l'intérieur:

<li onclick="reloadmap()">

Et dans le script de carte à droite après le

google.maps.event.addDomListener(window, 'load', initialize);

mettre ceci:

function reloadmap(){
  //when you resize the map, you lose your zoom and your center
  //so you need to get them again here
    z = map.getZoom();
    c = map.getCenter();
    google.maps.event.trigger(map, 'resize');
  //and set them again here
    map.setZoom(z);
    map.setCenter(c);
}

InformationsquelleAutor Número Perdido

0

j'ai résolu simplement en css

la carte-onglet {width: 100%; height: 300px;float: left;display: block !important;margin: 0px; padding: 0px;}

Puis masquer le caché onglet :

div[aria-hidden="true"]{position: absolute !important; à gauche:
-9999999px;}}

InformationsquelleAutor Salah Eddine Lalami

Vous devez vous connecter pour publier un commentaire.

la carte-onglet {width: 100%; height: 300px;float: left;display: block !important;margin: 0px; padding: 0px;}