如何使用bootstrap嵌入google地图？
如何使用bootstrap嵌入google地图？
提问于 2014-11-10 18:00:36
我想添加一个地图到我的联系页面的“地图和方向”。我正在一步一步地尝试谷歌地图嵌入程序，但它没有工作，因为我无法查看地图。我正在使用bootstrap。
这是我的加分：
<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>回答 3
Stack Overflow用户
发布于 2015-05-20 14:49:30
尝试此代码它可以很好地用于引导程序
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>
请使用正确的谷歌地图应用程序接口，您可以从谷歌地图控制台获取它。
Stack Overflow用户
发布于 2017-12-23 07:03:44
致敬@ymakux评论“最好使用内置类”，我已经搜索了很长时间，希望Google Map能够整齐地放入一个bootstrap div中，你的答案是完美的！因此，对于像我这样的新手来说，利用谷歌在https://developers.google.com/maps/documentation/javascript/geolocation上提供的示例代码在Bopotstrap中使用地图
按照@ymakux的建议在map div之前添加div，如下所示：
<div class="embed-responsive embed-responsive-4by3">
<div id="map-container" class="embed-responsive-item">
<div id="map">
</div>
</div>
</div>`Stack Overflow用户
发布于 2014-11-10 22:06:27
您的引导程序元素阻止显示您的地图。
<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>一点CSS
#map-container{
height: 500px;
width: 500px;
}您的地图将与该地图一起显示。
我也不会把你的map调用放在你的头标签里。让页面加载，然后加载地图。
显示地图后，慢慢添加引导程序组件，因为它们可以用Google地图做一些奇怪的事情。尤其是在网格布局方面。如果您保留网格布局，并且看不到地图，请调整浏览器大小(单击角并拖动它)，您应该能够找到显示地图的最佳位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26841084
复制相关文章
相似问题
腾讯云开发者
