Google map v3 api wird im Bootstrap nicht korrekt gerendert (keine Registerkarte involviert)

Question

Ich versuche jetzt seit Tagen das Problem zu beheben, dass die Google Map nicht korrekt auf der Webseite gerendert wird. See Screenshot of correct and false rendering.

Ich hoffe, Sie haben einen Hinweis, woher das Problem kommt, da ich jetzt verzweifelt bin. Im schlimmsten Fall ist es eine schöne Sammlung von möglichen Lösungen für jemanden anderen :) Das Verhalten, das ich sehe, ist:

• Liste item Karte teilweise beladen linke obere Ecke
• Liste item Klicken Sie doppelt auf dem unverputzten Bereich schafft eine zweite Karte unterhalb der ersten kleineren Karte
• Liste item Wenn Seite mehrere Male schnell dann etwa 10-30% der Zeit die Karte angezeigt wird korrigiert

versucht

Lösungen aber bisher ohne Erfolg neu geladen wird: - die Größe der Karte google.maps.event.trigger(map, 'resize')

• die Karte Ändern der Größe nach Ruhezustand empfangen google.maps.event.addListenerOnce(map, 'idle', function() {google.maps.event.trigger(map, 'resize');});

• Ändern der Größe der Karte und Set-Center zur gleichen Zeit

• Manuelle Auslöser der Resize-Ereignis mit einem Knopf

• Initialisieren Sie die Karte nach dem Dokument bereit $(document).ready(function() {initialize();});

• die Karte nach dem Initialisieren auf 10 Sekunden setTimeout(initialize, 1000);

• Detect Mutter div Breite & Höhe und nur initialisieren, wenn groß genug SetTimeout bis

• zuordnen Mutter div Breite & Höhe zu kartieren-Leinwand

• Weisen Sie die übergeordnete div-Breite & Höhe zu.gm-Stil

• CSS: Vergeben Breite & Höhe mit px

• CSS auf der Leinwand: Breite & Höhe mit 100% zuweisen

• CSS auf der Leinwand: mit Kombination von Pixeln Breite & Höhe zuweisen & 100%

• CSS auf die Leinwand: Änderung max-width #map-canvas img {max-width: none !important;}

• CSS: Änderung max-width #map-canvas img {max-width: none !important;}

Gedanken & Beobachtungen:

Problem ist sporadisch, die mich glauben macht, es mit Ladezeiten Die Leinwand vor der Initialisierung hat sofort bereits zu tun hat, die richtige Abmessungen und ist vollständig sichtbar (dh. kein versteckter Tab etc.) Die zusätzlichen Buttons wie Google-Logo, Fehler melden, Kontakt usw. sind sichtbar und in der richtigen Größe. Ich glaube, das bedeutet, dass Google Map nicht auf die volle Leinwand aus irgendeinem Grund für die Karte machen kann sich, während sie noch die richtigen Dimensionen

Keywords verwendet erkennt, Lösungen zu finden: Google Map API v3 Problem, Google Map rendering-Problem, Google Map links oben, Google Map Bootsstrap Problem

ich habe versucht, den hTML-Code so viel wie möglich für den Fall zu vereinfachen, sollten Sie einen Blick nehmen https://apptest.voiceoffriends.com/user.html

Ihnen für jeden Hinweis Vielen Dank im Voraus oder Ansatz, wie der Fehler behoben werden kann.

Answer 1

Das Problem ist folgendes:

function NoGeoLocationFound() { 
         clearTimeout(location_timeout); 
         var pos = new google.maps.LatLng(); 
         map.setCenter(pos); 

        }; 

pos (die Argumente fehlen)