如何使用bootstrap嵌入谷歌地图？ [英] How to embed google map using bootstrap?
本文介绍了如何使用bootstrap嵌入谷歌地图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将地图添加到我的联系人页面的地图和方向中。我试图谷歌地图嵌入程序一步一步，但它没有工作是我无法查看地图。
这里是我的标记：
< HEAD>
< script type ='text / javascript'src =http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed>< /脚本>
< script>
$（document）.ready（function（）{
var myCenter = new google.maps.LatLng（45.992261，-123.925014）;
var marker = new google.maps .Marker（{
position：myCenter
}）;
函数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）;
}）; $ b （'shown.bs.tab'，函数（e）{
initialize（））返回一个数组$ b $;
$ b $（'a [data-toggle =tab ;
}）;
}）;
< / script>
< style type =text / css>
＃map-canvas {
height：500px;
}
< / style>
< head>
< div class =tab-content>
< div class =tab-pane fadeid =map>
< div class =col-md-5>
< h4 class =h4>在Google地图找到我们< / h4>
< / div>
< div id =map-canvasclass =col-md-7>
< / div>
< / div>
< / div>
解决方案
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 >< /脚本> < div id =map-canvas>< / div> <！ - Google Maps API - >< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&sensor=true >< / script>
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&sensor=true"></script>
这篇关于如何使用bootstrap嵌入谷歌地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
