title: How to embed google map using bootstrap?
body: <p>I want to add a map into "map &amp; direction" of my contact page. i am trying google map embed procedure step by step but it didn't work the is i can't view the map. i am using bootstrap.</p>
  
  <p>Here is my mark up:</p>
  
  <pre><code>    &lt;head&gt;
        &lt;script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js&amp;output=embed"&gt;&lt;/script&gt;
        &lt;script&gt;
      $(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();
          });
  
      });
      &lt;/script&gt;
     &lt;style type="text/css"&gt;
          #map-canvas {
              height:500px;
           }
      &lt;/style&gt;
    &lt;head&gt;
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane fade" id="map"&gt;
              &lt;div class="col-md-5"&gt;
                  &lt;h4 class="h4"&gt;Find Us at Google Map&lt;/h4&gt;               
              &lt;/div&gt;
              &lt;div id="map-canvas" class="col-md-7"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>