问题描述:

I want to add a map into "map & 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.

Here is my mark up:

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

网友答案:

Try this code its working fine for bootstrap

function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(28.1823294, -82.352912),
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                scrollwheel: false,
                draggable: false,
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true,
                rotateControl: true,
            };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        }
google.maps.event.addDomListener(window, 'load', initialize);
#contactform .btn:hover {
  background: rgba(9,8,77,0.7);
}

#map-canvas {
  width: 100%;
  height: 300px;
  margin-bottom: 15px;
  border: 2px solid #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
            
<div id="map-canvas"></div>
    
<!--Google Maps API-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&amp;sensor=true"></script>
网友答案:

Your bootstrap elements are preventing your map from displaying.

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

A little CSS

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

Your map will display with that.

I would also not place your map calls in your HEAD tag. Let the page load, then have the maps load.

Once you get your map showing, slowly add in bootstrap components, as they can do some weird things with Google maps. Especially with grid layout. If you leave the grid layout on and you can not see the map, resize your browser (clicking the corner and dragging it) and you should be able to hit the sweet spot to display the map.

相关阅读:
Top