Comment intégrer google map à l'aide de bootstrap?

Je veux ajouter une carte dans "map & direction" de ma page de contact. je suis en train de google map intégrer procédure étape par étape, mais il ne fonctionnait pas c'est que je ne peux pas afficher la carte. je suis en utilisant bootstrap.

Ici est ma marque:

    <head>
      <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>
      <script>
    $(document).ready(function() {

        var myCenter=new google.maps.LatLng(45.992261, -123.925014);
        var marker=new google.maps.Marker({
            position:myCenter
        });

        function initialize() {
          var mapProp = {
              center:myCenter,
              zoom: 14,
              draggable: false,
              scrollwheel: false,
              mapTypeId:google.maps.MapTypeId.ROADMAP
          };

          var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
          marker.setMap(map);

          google.maps.event.addListener(marker, 'click', function() {

            infowindow.setContent(contentString);
            infowindow.open(map, marker);

          }); 
        };

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            initialize();
        });

    });
    </script>
   <style type="text/css">
        #map-canvas {
            height:500px;
         }
    </style>
  <head>
    <div class="tab-content">
        <div class="tab-pane fade" id="map">
            <div class="col-md-5">
                <h4 class="h4">Find Us at Google Map</h4>               
            </div>
            <div id="map-canvas" class="col-md-7">
            </div>
        </div>
    </div>
Placez les deux scripts à l'intérieur de votre balise HEAD. Assurez-vous de définir une largeur & hauteur de votre carte-conteneur dans le CSS.
(Ré)initialiser la carte dans un gestionnaire pour l' shown.bs.tab événement.
Voir aussi stackoverflow.com/a/6879644/3342739
J'ai aussi suivi votre lien, essayez pour voir la carte, mais il ne fonctionne pas

OriginalL'auteur Xubayer pantho | 2014-11-10

  1. 4

    Bravo à @ymakux commentaire "Il est préférable d'utiliser les classes intégrées" j'ai été au chalut ALORS pour les âges à la recherche pour obtenir une Carte Google map dans entrent dans un bootstrap div, et votre réponse est parfaite!
    Donc pour un débutant comme moi à l'aide de cartes avec Bopotstrap en utilisant l'exemple de code fourni par google à https://developers.google.com/maps/documentation/javascript/geolocation

    Ajouter des divs comme suggéré par @ymakux juste avant la carte div similaire à ceci:

    <div class="embed-responsive embed-responsive-4by3">
<div id="map-container" class="embed-responsive-item">
<div id="map">
</div>
</div> 
</div>`
    Il semble, par inadvertance, vous avez oublié de poster le code!
    Grâce fixe maintenant, mais @ymakux besoins de crédit - son commentaire a été mon sauveur encore cachés comme la proverbiale aiguille dans une botte de foin dans ce fil.

    OriginalL'auteur Jase

  2. -1

    Votre bootstrap éléments sont la prévention de la carte à partir de l'affichage.

    <div>        
  <div style="border: 1px solid red;">
      <h4 class="h4">Find Us at Google Map</h4>               
  </div>
  <div id="map-container">
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </div>     
</div>

    Un peu de CSS

    #map-container{
    height: 500px;
    width: 500px;
}

    Votre carte s'affiche avec qui.

    Je voudrais également pas passer votre carte d'appels dans votre balise HEAD. Laissez le chargement de la page, alors les cartes de charge.

    Une fois que vous obtenez votre carte montrant, ajouter lentement dans le bootstrap composants, car ils peuvent faire quelques choses bizarres avec Google maps. Surtout avec la grille de mise en page. Si vous laissez la grille de mise en page et vous ne pouvez pas voir le carte, redimensionner votre navigateur (en cliquant sur le coin et en le faisant glisser) et vous devriez être en mesure de frapper le sweet spot pour afficher la carte.

    Il est préférable d'utiliser les classes intégrées <div class="blogger-sensibles incorporez-responsive-4by3"> <div id="carte-container" class="blogger-responsive-item"></div> </div>

    OriginalL'auteur Joe Swindell