这有点难以解释，所以我上传了这个问题的屏幕截图：
如您所见，尽管地图上有 div 房地产（这是实际大小），但它只显示地图的 1/6！这个小部件可以调整大小，但即使它被切断。我确定我做错了什么，但无法弄清楚。这是包含地图的 div 的 CSS 代码：
#map {
border-right-color: black;
border-left-color: black;
border-right-width: 1px;
border-left-width: 1px;
position: absolute;
margin-top: 0px;
top: 38px;
left: 0px;
width: auto;
height: auto;
right: 0px;
bottom: 10px;
background-color: rgb(204, 204, 204);
border-bottom-style: solid;
border-top-style: solid;
border-bottom-width: 1px;
border-top-width: 1px;
border-bottom-color: rgb(204, 204, 204);
border-top-color: rgb(204, 204, 204);
overflow: hidden;
}
这是制作地图的javascript：
//google maps apis
var marker;
var setLocation = new google.maps.LatLng(59.32522, 18.07002);
var marker;
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
}
}
function searchGoogleMaps(event) {
var address =event.target.value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
placeMarker(results[0].geometry.location)
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
最后是被调用以使这一切发生的javascript文件：
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
在此先感谢，特别是花时间阅读这样的长问题！