Bootstrap 3.0 et Google maps javascript API V3 style

Je suis en train de mettre en œuvre une carte google maps javascript API v3 dans un Bootstrap 3.0 site web qui consiste à tirer parti du bootstrap 3.0 "carrousel" thème de base.

Le problème est le <div id="map-canvas"></div> ne s'affichent pas sur ma page, si j'essaie de l'inclure à l'intérieur de tout autre div ou bootstrap 3 style, comme à l'intérieur <div class="col-xs-6"></div>. Cependant, il rendra aussi longtemps qu'il n'est pas inclus dans un autre div.

J'ai trouvé une remarque qui recommande ce correctif qui donne des instructions pour ajouter un google-map-classe de toile à la carte-toile div en utilisant le code suivant:

.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }

J'ai ajouté ce code de bootstrap.min.css et ensuite changé la div à <div class="google-map-canvas" id="map-canvas"></div> mais la toile ne sera toujours pas rendu si je l'inclus à l'intérieur de tout autre div nécessaire pour bootstrap 3 style.

J'ai besoin de cette carte pour être positionné sur la moitié droite de ma page de contact, avec le formulaire de contact sur la gauche de la page. Toutes les suggestions sur la façon de résoudre ce problème est apprécié.

Ci-dessous mon code de test:

JAVASCRIPT (sur "base.html"):

{% if on_contactpage %}
   <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
   </style>
     <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false">
     </script>
     <script type="text/javascript">
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
          }
          google.maps.event.addDomListener(window, 'load', initialize);
     </script>
{% endif %}

HTML:

<div class="row">

    <div class="col-xs-6">

        <h2> contact form goes here</h2>

    </div>

      <div class="col-xs-6">

            <div class="google-map-canvas" id="map-canvas">
            </div>

        <div class="col-xs-6">
            <h2>Hong Kong</h2>
            <address>
                <strong>HK Business Address</strong><br>
                100 Business Address<br>
                Kowloon<br>
                Hong Kong<br>
                Hong Kong<br>
                Zip Code N/A<br>
                <abbr title="Phone">P:</abbr> 01234 567 890
            </address>
        </div>

        <div class="col-xs-6">


          <h2>Shenzhen, P.R.C.</h2>
            <address>
                <strong>SZ Business Address</strong><br>
                100 Business Address<br>
                Futian District<br>
                <br>
                Shenzhen, Guangdong<br>
                518000<br>
                <abbr title="Phone">P:</abbr> 01234 567 890
            </address>
        </div>
      </div>

</div>
La syntaxe CSS ne semble pas valide, essayez .google-map-canvas,.google-map-canvas * { box-sizing:content-box; }
Oui, le code écrit par bootstrap devs était aussi de faire de mon pycharm IDE se plaindre, j'ai donc modifié comme ci-dessus. Le changement n'a pas de résoudre le problème de rendu, mais il ne s'arrête pycharm de se plaindre.

OriginalL'auteur Bob Jordan | 2013-08-28

  1. 29

    Depuis le map-canvas est contenue dans plusieurs autres conteneurs (html,body,row,col-xs-6), vous devez la définir, c'est la hauteur, en pixels.. 

    #map-canvas {
    width:100%;
    height:500px;
}

    .. ou régler tous les map-canvas conteneurs à height:100%..

    html, body, .row, .col-xs-6 { height: 100% }

    Vous pouvez spécifier un id dans le .ligne qui contient le map-canvas, puis de les utiliser pour CSS spécificité...

    html, body, #myrowid, #myrowid .col-xs-6 { height: 100% }

    Voici un exemple de travail sur Bootply: http://bootply.com/77513

    La modification de la hauteur de spécifier px a été en fin de compte le correctif qui fonctionne le mieux pour moi. Merci!!!!
    de même, #map-canvas { height: 200px } a fait le tour!
    La hauteur, en pixels, m'a ainsi - n'aurait jamais pensé ça!

    OriginalL'auteur Zim