Wie binde ich Google Map mit Bootstrap ein?

Question

Nov 10, 2014, 11:00 AM

javascript google-maps twitter-bootstrap twitter-bootstrap-3

Wie binde ich Google Map mit Bootstrap ein?

Ich möchte eine Karte in "Karte & Richtung" meiner Kontaktseite hinzufügen. Ich versuche Google Map Embed Verfahren Schritt für Schritt, aber es hat nicht funktioniert, ist, dass ich die Karte nicht sehen kann. Ich benutze Bootstrap.

Hier ist meine Markierung:

    <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>