我想显示两个map ion同一页面。问题是“map-canvas”正确显示但map-canvas-2根本没有显示。我现在该怎么办请帮助......
这是我的HTML代码......
<div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
<div id="map-canvas"></div>
</div>
<div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
<div id="map-canvas-2"></div>
</div>
这是我的JAVASCRIPT代码
function initialize() {
var myLatLng = new google.maps.LatLng(19.0285, 73.0586);
var myLatLng2 = new google.maps.LatLng(23.344101, 85.309563);
var mapOptions = {
zoom: 14,
center: myLatLng,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
};
var mapOptions2 = {
zoom: 14,
center: myLatLng2,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: 'Kharghar',
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map2,
icon: 'img/location-icon.png',
title: 'Ranchi',
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: 'Kharghar',
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map2,
icon: 'img/location-icon.png',
title: 'Ranchi',
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map2, marker2);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map2, marker2);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
});
提前致谢: - )