响应式Google地图v3 - 无法获得100％的高度 [英] Responsive Google Maps v3 - Cannot get 100% height
本文介绍了响应式Google地图v3 - 无法获得100％的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这一段时间了，我需要使地图高度100％的容器。并且在调整大小时保持它居中。
Been on this for a while now, I need to make the map height 100% of its container. And also keep it centred when its resizing.
我已经尝试过几乎所有的例子，没有效果..
I have tried nearly all of the examples on here with no avail..
我使用，有标记和infowindows在那里，还有自定义标记符号。我在控制台中没有出现任何错误。
The code example below shows what I am using, there's markers and infowindows in there and also custom marker symbols too. I don't get any errors in the console.
<script type="text/javascript">
var markers = [
{
"title": 'xxxxx School',
"lat": '53.004758',
"lng": '-2.241232',
"description": '<br/><a href="http://www.google.com">View more info</a>',
"type": 'UK Independent School'
},
{
"title": 'xxxxx Prep',
"lat": '51.470123',
"lng": '-0.209838',
"description": '<br/><a href="http://www.google.com">View more info</a>',
"type": 'UK Independent School'
},
{
"title": 'xxxxxx',
"lat": '46.709741',
"lng": '9.159625',
"description": '<br/><a href="http://www.google.com">View more info</a>',
"type": 'Swiss Boarding School'
},
{
"title": 'xxxxxxx independent College',
"lat": '51.512103',
"lng": '-0.308055',
"description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
"type": 'UK Independent School'
},
{
"title": 'xxxxxxx Hill',
"lat": '51.007720',
"lng": '0.217913',
"description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
"type": 'UK Independent School'
}
];
var map;
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(51.507351, -0.127758),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "UK Independent School":
icon = "orange";
break;
case "Swiss Boarding School":
icon = "green";
break;
}
icon = "http://fokn.temp-dns.com/images/site/icon-" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
<div style="width:100%; height:100%;">
<div id="dvMap" style="width:100%; height:100%;"></div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY-API&callback=initMap"></script>
推荐答案
您需要为所有元素< html> 元素：
You need to give sizes to all the elements up to the <html> element:
html, body, #dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
Mike Williams的Google Maps Javascript API第2页：使用地图div的百分比高度
代码段：
var markers = [{
"title": 'xxxxx School',
"lat": '53.004758',
"lng": '-2.241232',
"description": '<br/><a href="http://www.google.com">View more info</a>',
"type": 'UK Independent School'
}, {
"title": 'xxxxx Prep',
"lat": '51.470123',
"lng": '-0.209838',
"description": '<br/><a href="http://www.google.com">View more info</a>',
"type": 'UK Independent School'
}, {
"title": 'xxxxxx',
"lat": '46.709741',
"lng": '9.159625',
"description": '<br/><a href="http://www.google.com">View more info</a>',
"type": 'Swiss Boarding School'
}, {
"title": 'xxxxxxx independent College',
"lat": '51.512103',
"lng": '-0.308055',
"description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
"type": 'UK Independent School'
}, {
"title": 'xxxxxxx Hill',
"lat": '51.007720',
"lng": '0.217913',
"description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
"type": 'UK Independent School'
}];
var map;
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(51.507351, -0.127758),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "landscape",
"stylers": [{
"saturation": -100
}, {
"lightness": 65
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"stylers": [{
"saturation": -100
}, {
"lightness": 51
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.highway",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"saturation": -100
}, {
"lightness": 30
}, {
"visibility": "on"
}]
}, {
"featureType": "road.local",
"stylers": [{
"saturation": -100
}, {
"lightness": 40
}, {
"visibility": "on"
}]
}, {
"featureType": "transit",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "administrative.province",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": -25
}, {
"saturation": -100
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"hue": "#ffff00"
}, {
"lightness": -25
}, {
"saturation": -97
}]
}]
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function() {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "UK Independent School":
icon = "orange";
break;
case "Swiss Boarding School":
icon = "green";
break;
}
icon = "http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: icon
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="width:100%; height:100%;">
<div id="dvMap"></div>
</div>
这篇关于响应式Google地图v3 - 无法获得100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
