Bei der Verwendung der Google Maps-API zum Rendern einer Karte auf einer Registerkarte der jQuery-Benutzeroberfläche gibt es eine Reihe von Problemen, die ziemlich bekannt zu sein scheinen. Ich habe SO-Fragen zu ähnlichen Problemen gesehen ( hier und hier zum Beispiel), aber die Lösungen dort scheinen nur für Version 2 der Maps-API zu funktionieren. Andere Referenzen, die ich ausgecheckt habe, sind hier und hier , zusammen mit so ziemlich allem, was ich durch Googeln ausgraben konnte.
Ich habe versucht, eine Karte ( mit Version 3 der API ) in eine jQuery-Registerkarte mit gemischten Ergebnissen zu stopfen . Ich verwende die neuesten Versionen von allem (derzeit jQuery 1.3.2, jQuery UI 1.7.2, weiß nichts über Maps).
Dies ist das Markup & 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>
und
$(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);
}
Und hier ist, was ich gefunden habe, das funktioniert / nicht funktioniert ( für Maps API v3 ):
- Die Verwendung der Off-Left-Technik, wie in der Dokumentation zu den jQuery-UI-Registerkarten (und in den Antworten auf die beiden von mir verknüpften Fragen) beschrieben, funktioniert überhaupt nicht. Tatsächlich verwendet der am besten funktionierende Code
.ui-tabs .ui-tabs-hide { display: none; }stattdessen das CSS . - Die einzige Möglichkeit, eine Karte überhaupt auf einer Registerkarte anzuzeigen, besteht darin, die CSS-Breite und -Höhe
#map_canvasauf absolute Werte festzulegen. Durch Ändern der Breite und Höhe inautooder100%wird die Karte überhaupt nicht angezeigt, selbst wenn sie bereits erfolgreich gerendert wurde (unter Verwendung der absoluten Breite und Höhe). - Ich konnte es nirgendwo außerhalb der Maps-API dokumentiert finden,
map.checkResize()funktioniert aber nicht mehr. Stattdessen müssen Sie ein Größenänderungsereignis durch Aufrufen auslösengoogle.maps.event.trigger(map, 'resize'). - Wenn die Karte nicht innerhalb einer an ein
tabsshowEreignis gebundenen Funktion initialisiert wird , wird die Karte selbst korrekt gerendert, die Steuerelemente jedoch nicht - die meisten fehlen einfach.
Also, hier sind meine Fragen:
- Hat jemand anderes Erfahrung damit, dasselbe Kunststück zu vollbringen? Wenn ja, wie haben Sie herausgefunden, was tatsächlich funktionieren würde, da die dokumentierten Tricks für Maps API v3 nicht funktionieren?
- Was ist mit dem Laden von Registerkarteninhalten mit Ajax gemäß den jQuery UI-Dokumenten ? Ich hatte keine Chance, damit herumzuspielen, aber ich vermute, dass es Maps noch mehr kaputt machen wird. Wie hoch sind die Chancen, dass es funktioniert (oder lohnt es sich nicht, es zu versuchen)?
- Wie kann ich dafür sorgen, dass die Karte den größtmöglichen Bereich ausfüllt? Ich möchte, dass es den Tab ausfüllt und sich an die Seitengröße anpasst, ähnlich wie es bei maps.google.com gemacht wird. Aber wie gesagt, ich scheine nicht in der Lage zu sein, nur absolutes CSS für Breite und Höhe auf das Map Div anzuwenden.
Es tut uns leid, wenn dies langwierig war, aber dies ist möglicherweise die einzige Dokumentation für die Registerkarten "Maps API v3 + jQuery". Prost!