代码:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
html代码:
<div id="menu2" class="tab-pane fade">
<div class="col-md-12">
<p>Hello...</p>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<div class="col-md-12">
<input type="text" placeholder="Source" name="start" id="start" value="noida">
<input type="text" placeholder="Source" name="end" id="end" value="delhi">
<input id="Button1" type="button" value="button" onclick="calcRoute()" />
<div id="map-canvas"></div>
</div>
</div>
在此代码中,我想在标签内显示谷歌地图,其中没有显示id =“menu2”地图。当我点击id(menu1)它显示你好,但当我点击id(menu2)文本字段正在渲染但点击按钮它不显示地图。我该如何解决这个问题?
谢谢
答案 0 :(得分:0)
我正在使用此代码在Bootstrap标签上显示谷歌地图
HTML
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no_padding">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#overview">Overview</a></li>
<li><a data-toggle="tab" href="#host">The Host</a></li>
<li><a data-toggle="tab" href="#location">Location</a></li>
<li><a data-toggle="tab" href="#reviews">Reviews</a></li>
</ul>
<div class="tab-content">
<div id="overview" class="tab-pane fade in active">
</div>
<div id="host" class="tab-pane fade">
</div>
<div id="location" class="tab-pane fade">
<div id="map" style="width:100%;height:500px"></div>
</div>
<div id="reviews" class="tab-pane fade">
</div>
</div>
</div>
Jquery的
jQuery(document).ready(function () {
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(11.0238913, 76.9934423);
var mapOptions = {
center: myCenter,
zoom: 14,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControl: false,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
}
};
var map = new google.maps.Map(mapCanvas, mapOptions);
map.setCenter(myCenter);
var marker = new google.maps.Marker({
map: map,
position: myCenter,
draggable: true
});
marker.setMap(map);
google.maps.event.addListener(marker, 'dragend', function () {
map.setCenter(this.getPosition()); // Set map center to marker position
});
jQuery('.nav-tabs a[href="#location"]').on('shown.bs.tab', function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(myCenter);
});
}
google.maps.event.addDomListener(window, 'load', myMap);
});