Map in Akkordeon oder Reiter

Hi,

ich habe versucht eine Map per Modul in eine Akkordeon bzw. in einen Reiter [tabcontrol] zu packen => beide Ergebnisse sehen "suboptimal" aus :-(

hat sich schonmal jemand an dem Thema versucht?

was sieht wie aus:

tabcontrol:
hier wird die "Grundfläche" der Map (bei mit 600x370) in Grau angezeigt - jedoch nur mit einem kleinen Kartenausschnitt links - oben... manchmal, wie durch Zauberhand, erschien dann auch der rest der Karte; im Grau der Karte ist auch keine Hand für Pan

Akkordeon:
hier wird die Map schonmal dargestellt - an der Spruchblase sind aber unten irgendwelche weißen Streifen und im Schatten tummeln sich auch komische schwarze Blöcke??

Getestet im FF 3.6.x und aktueller Chrome

hmm... schade

zonky

Hallo zusammen,

da ich mich mit dem gleichen Problem beschäftige: hat jemand hierfür eine Lösung gefunden?

Hallo zusammen,

ich grabe diesen Thread mal wieder aus, da ich gerade vor dem selben Problem stehe. Ich würde gerne eine Google Map in ein Akkordeon platzieren, habe aber auch den Darstellungsfehler bei der Sprechblase (siehe Anhang). Außerhalb des Akkordeons funktioniert die selbe Google Map einwandfrei.

Hat vielleicht schon jemand einen workaround gefunden?

Danke,
LG
Felix

ist die Map im ersten Reiter oder in einem Ausgeblendetem?

guck mal hier: http://stackoverflow.com/questions/1...jquery-ui-tabs

Hallo,

mit gleichem Problem habe ich momentan auch zu tun.

Ihr könnt das hier mal nachvollziehen. http://www.contao-test.dyndns-web.co...abelement.html

Dieser Link http://stackoverflow.com/questions/1...jquery-ui-tabs brachte keine Änderung.

Ich bin nun seit einer Woche daran, dieses Problem zu lösen, leider erfolglos. Zu sagen ist, dass ich kein Programmierer bin.

Das habe ich noch gefunden:

http://flintmaker.com/code/simple-jq...3-google-maps/

http://techxplorer.com/2010/12/07/jq...d-google-maps/

http://jqueryui.com/demos/tabs/#event-show


Ein Ansatzpunkt wäre dieser.

Code:

---

// resize the map when the window is resized
$(window).resize(function() {
  resizeMap();
});

---

Hättest Ihr einen Lösungsansatz?

Danke für die Hilfe.

kannst du das "Auto-Tab" mal abschalten - da wird man ja irre...

Sorry..., jetzt ist er aus...

hast Du denn man die Sache probiert bei dem Tab das display:none gegen display:block auszutauschen und wie in stack beschrieben

Code:

---

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

---

einzufügen? auch andere Inhalte wie Gallery o.ä. haben Probleme beim Laden in ein "hidden-Div"

Gruss

... ich habe glaube schon alles getestet.

Das brachte keinen Erfolg. Es kann natürlich auch sein, dass ich nicht die richtige Kombination gewählt habe.

MFG

Steffen

kannst Du das nochmal aktivieren - ich sehe mir das dann gern mal an

zonky

mit dem
position: absolute;
left: -10000px;

scheint die Sache schonmal zu funktionieren - wenn das Tab aktiv ist, kannst Du die beiden CSS-Sachen per Firebug ausschalten...

Die Aufgabe wäre den Tab-Content-DIVs je nach Status eine eigene Klasse zuzuweisen statt per Inline-CSS das display:none/block

erst dann geht die CSS-Zuweisung

Gruss zonky

upps....

wo hast du den den code

$('#tabelement').bind('tabsshow', function(event, ui) { if (ui.panel.id == "map-tab") { resizeMap(); } });

reingeworfen?!!? hier fehlen die Tags, dass das JS ist... guck mal in Quelltext

Den habe ich ins Template geschrieben.

Themes / Default layout /Eigener JavaScript-Code

Mit dieser Zeile jAccordion-Template wird die Mapgröße an veränderte DIVs angepasst:

Code:

---

google.maps.event.trigger(map,'resize');

---

Das funktioniert auch, allerdings habe ich diese Zeile (mangels jQuery-Erfahrung) an unterschiedlichen Stellen eingefügt, und dann ließ sich das Accordion nicht mehr schließen. Kann mir jemand sagen, wo genau ich die Zeile einbauen muss? Hier das Template:

Code:

---

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
    });
  })(jQuery);
</script>

---

Viele Grüße,
Anke

Hallo Anke,

probier es doch mal mit einer fe_page Templatedatei und das dort in den Head einzufügen.
Oder auch mit der Erweiterung für zusätzliche Headtags oder als HTML Element oder mittels file:: Inserttag.

Grüße