我希望在我的联系页面的“地图和方向”中添加一个地图。我按照谷歌地图嵌入的步骤一步一步尝试,但是它没有工作,我无法查看地图。我正在使用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>
shown.bs.tab
事件的处理程序中重新初始化地图。 - cvrebert