Javascript 如何使用引导程序嵌入谷歌地图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26841084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to embed google map using bootstrap?
提问by Xubayer pantho
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>
回答by Shiv Singh
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&sensor=true"></script>Please use correct API for google map, You get it from google map console.
请为谷歌地图使用正确的 API，您可以从谷歌地图控制台获取它。
回答by Jase
Kudos to @ymakux comment "It's better to use built-in classes " I have been trawling SO for ages looking to get a Google Map to neatly fit into a bootstrap div and your answer is perfect! So for a newbie like me using maps with Bopotstrap utilizing the sample code supplied by google at https://developers.google.com/maps/documentation/javascript/geolocation
感谢@ymakux 评论“最好使用内置类”我一直在拖网多年，希望能将 Google 地图整齐地放入引导 div 中，您的答案是完美的！因此，对于像我这样的新手，使用带有 Bopotstrap 的地图使用谷歌在https://developers.google.com/maps/documentation/javascript/geolocation提供的示例代码
Add divs as suggested by @ymakux just prior to map div similar to this:
按照@ymakux 的建议在类似于此的映射 div 之前添加 div：
<div class="embed-responsive embed-responsive-4by3">
<div id="map-container" class="embed-responsive-item">
<div id="map">
</div>
</div>
</div>`
回答by Joe Swindell
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
一点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.
我也不会将您的地图调用放在您的 HEAD 标签中。让页面加载，然后加载地图。
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.
一旦你的地图显示出来，慢慢地添加引导组件，因为它们可以用谷歌地图做一些奇怪的事情。尤其是网格布局。如果您保留网格布局并且看不到地图，请调整浏览器的大小（单击角落并拖动它），您应该能够点击最佳位置以显示地图。
