✔ Google Maps im jQuery-Tab - Probleme mit der Zentrierung

S

shredder01

Mitglied
Hallo,

ich versuche gerade auf dieser Seite http://www.dr-ute-guertler.de/kontakt/ (im Tab Anfahrt) eine Google Map zu integrieren.
Die Tabs basieren auf dieser Anleitung/diesem Artikel http://blog.ginader.de/archives/200...s-Wie-man-Tabs-WIRKLICH-zugaenglich-macht.php.
Mit Hilfe dieses Artikels http://dynamicinternet.eu/blog/2010-02-08/google-maps-im-tab-druckbare-tabs/ hab ich die Map schon soweit bekommen, dass nicht mehr 75% grau statt Karte angezeigt werden und auch der Marker befindet sich jetzt im sichtbaren Bereich.
In Kurzfassung hab ich dazu eigentlich nur die jQuery-Funktionen hide() und show() durch addClass('hideme') und removeClass('hideme') ersetzt und damit eine CSS-Klasse eingeführt, die die Inhalte, die nicht sichtbar sein sollen, aus dem sichtbaren Bereich schiebt (
Code: 
    left: -32768px;
    position: absolute;
    top: -32768px;
) statt sie wie im Original mit
Code: 
display:none;
zu entfernen.
Damit sollte die Google-Map-API eigentlich wissen wie groß die Map werden soll und wo der Mittelpunkt ist.
Aber aus irgendwelchen Gründen, die mir im Moment noch nicht einleuchten, hat die Karte bei Aufruf rechts immer noch einen grauen Streifen und der Marker sitzt auch nicht richtig im Zentrum wie er es sollte.

Hat jemand einen Tipp für mich woran es liegen könnte?
 
Versuch mal das Maps-Script (mapscript.js) ans Ende zu setzen (zumindest nach dem du die Tabs initialisiert hast) und ersetze

Javascript: 
window.onload = initialize;

durch

Javascript: 
$(function() {
    initialize();
});

Edit:
Zur Erklärung: Wenn du die Google-Karte initialisierst hat dein div eine Breite von 648px. Nach dem die Tabs angelegt sind nur noch 610px. Deshalb sollte die Karte erst angelegt werden, nach dem die Tabs erzeugt sind.
 
Zuletzt bearbeitet:
Danke für die Antwort.
Leider bringt das auch nichts.
Jetzt wird mapscript.js erst nach den Tabs geladen und
Code: 
window.onload = initialize;
in der mapscript.js hab ich durch
Code: 
jQuery(function() {
    initialize();
});
ersetzt.
Leider mit demselben Ergebnis wie vorher.
 
Hm ... ok, ich hab das Problem jetzt zu "90%" lösen können.
Ich hab mir nach einen Post, den ich in der Google Group zur Google Maps API gefunden hab, folgende Funktion erstellt
Code: 
  function mapsize_fixed() {
    var mapwidth = jQuery(".tabbody").width();
	mapwidth = mapwidth * 0.8;
	var mapheight = jQuery("#map_canvas").height();
    jQuery("#map_canvas").width(mapwidth);
	jQuery("#map_canvas").height(mapheight);	
    google.maps.event.trigger(map, 'resize');	
  }
, die ich einmal nach dem initialisieren der Map und jeweils wenn das Browserfenster vergrößert oder verkleinert wird aufrufe.
Das funktioniert wie es im Moment aussieht sehr gut ... außer in Opera.
Im Opera ist die Map jetzt nur noch ein schmaler Streifen. Irgendetwas scheint da im Opera falsch berechnet zu werden.

Hat da jemand eine Idee, wie man auch im Opera 'ne korrekte Breite hinbekommt?

P.S. Hm, merkwürdig, jetzt spielt auch der Opera mit. Scheint so als ob da etwas besonders hartnäckig im Cache festgesessen hat.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück