/ / Problem beim Anzeigen der Google Map-API mit der Bootstrap-Website [geschlossen] - Javascript, JQuery, HTML, CSS, Google Maps-API-3

Problem beim Anzeigen der Google Map API mit Bootstrap-Website [geschlossen] - JavaScript, Jquery, HTML, CSS, Google-Maps-API-3

Ich möchte meine Google Map API in meiner Webanwendung anzeigen.

Ich habe es mit einer normalen HTML-Website versucht und die Karte wird angezeigt.

Mein Problem ist, dass die Google Map API nicht mit Bootstrap angezeigt wird. Weiß jemand, wie man das behebt?

Mein Code funktioniert ohne Bootstrap: http://jsfiddle.net/PrHDH/84/

Nach dem Anlegen des Bootstraps wird die Karte nicht angezeigt.

with bootstrap: http://jsfiddle.net/5kcsn/330/ <-------- Karte wird nicht angezeigt

Antworten:

1 für die Antwort № 1

Das Problem ist ein Konflikt zwischen der Art und Weise, wie Google und Bootstrap mit der Boxgröße umgehen. Die einfachste Lösung besteht darin, die CSS-Eigenschaften für die Boxgröße im Kartenbereichs-Element zu überschreiben.

#map-canvas {
height: 50%; width: 80%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

Sie finden die Dokumentation von bootstrap zu diesem Problem und alternative Lösungen über den folgenden Link. Es sieht so aus, als ob bootstrap sogar ein paar Mixins zur Hilfe hat.
http://getbootstrap.com/getting-started/#third-parties