Il existe un certain nombre de problèmes, qui semblent être assez bien connus, lorsque l'on utilise l'API Google Maps pour rendre une carte dans un onglet jQuery UI. J'ai vu des questions de SO postées sur des problèmes similaires ( aquí y aquí par exemple), mais les solutions proposées ne semblent fonctionner que pour la version 2 de l'API Maps. Voici d'autres références que j'ai consultées aquí y aquí ainsi que tout ce que j'ai pu trouver en cherchant sur Google.
J'ai essayé de remplir une carte ( en utilisant la v3 de l'API ) dans un onglet jQuery avec des résultats mitigés. J'utilise les dernières versions de tout (actuellement jQuery 1.3.2, jQuery UI 1.7.2, je ne sais pas pour Maps).
C'est le balisage et le javascript :
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>y
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == 'map_tab' && !map)
{
map = initializeMap();
google.maps.event.trigger(map, 'resize');
}
});
});
function initializeMap() {
// Just some canned map for now
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map($('#map_canvas')[0], myOptions);
}Et voici ce que j'ai trouvé qui fonctionne/ne fonctionne pas ( pour Maps API v3 ) :
- L'utilisation de la technique de décalage vers la gauche décrite dans la documentation de jQuery UI Tabs (et dans les réponses aux deux questions que j'ai liées) ne fonctionne pas du tout. En fait, le code qui fonctionne le mieux utilise le code CSS
.ui-tabs .ui-tabs-hide { display: none; }à la place. - La seule façon de faire en sorte qu'une carte s'affiche dans un onglet est de définir la largeur et la hauteur CSS de la carte.
#map_canvaspour être des valeurs absolues. En changeant la largeur et la hauteur enautoo100%fait en sorte que la carte ne s'affiche pas du tout, même si elle a déjà été rendue avec succès (en utilisant la largeur et la hauteur absolues). - Je n'ai pas trouvé de documentation à ce sujet en dehors de l'API de Maps, mais
map.checkResize()ne fonctionne plus. Au lieu de cela, vous devez déclencher un événement de redimensionnement en appelantgoogle.maps.event.trigger(map, 'resize'). - Si la carte n'est pas initialisée à l'intérieur d'une fonction liée à un fichier de type
tabsshowla carte elle-même est rendue correctement, mais les contrôles ne le sont pas - la plupart sont tout simplement absents.
Alors, voici mes questions :
- Quelqu'un d'autre a-t-il l'expérience d'accomplir ce même exploit ? Si c'est le cas, comment avez-vous trouvé ce qui fonctionne réellement, puisque les astuces documentées ne fonctionnent pas pour Maps API v3 ?
- Qu'en est-il du chargement du contenu de l'onglet à l'aide d'Ajax, conformément à l'instruction de l'UE ? Documentation sur jQuery UI ? Je n'ai pas eu l'occasion de jouer avec, mais je pense que cela va casser encore plus les cartes. Quelles sont les chances de le faire fonctionner (ou est-ce que cela ne vaut pas la peine d'essayer) ?
- Comment faire pour que la carte remplisse la plus grande surface possible ? J'aimerais qu'elle remplisse l'onglet et s'adapte à la taille des pages, comme c'est le cas sur maps.google.com. Mais, comme je l'ai dit, il semble que je doive me contenter d'appliquer des feuilles de style CSS de largeur et de hauteur absolues à la division de la carte.
Désolé si c'est long, mais il s'agit peut-être de la seule documentation sur les onglets Maps API v3 + jQuery. Merci !
