响应式 Google Maps v3 - 无法获得 100% 的高度 [英] Responsive Google Maps v3 - Cannot get 100% height
本文介绍了响应式 Google Maps v3 - 无法获得 100% 的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
已经有一段时间了，我需要将地图高度设为其容器的 100%.并且在调整大小时保持居中.
我已经尝试了这里几乎所有的例子，但都无济于事..
下面的代码示例显示了我正在使用的内容，其中有标记和信息窗口以及自定义标记符号.我在控制台中没有收到任何错误.
<div style="width:100%; height:100%;"><div id="dvMap" style="width:100%; height:100%;"></div><script async defer src="https://maps.googleapis.com/maps/api/js?key=MY-API&callback=initMap"></script>
解决方案
您需要为所有元素指定大小，直到 元素:
html, body, #dvMap {高度:100%；宽度:100%；边距:0px；填充:0px}Mike Williams 的 Google Maps Javascript API v2 页面关于这个主题:使用地图的百分比高度div
代码片段:
var 标记 = [{"title": 'xxxxx 学校',"lat": '53.004758',"lng": '-2.241232',"description": '<br/><a href="http://www.google.com">查看更多信息</a>',类型":英国独立学校"}, {"title": 'xxxxx 准备',"lat": '51.470123',"lng": '-0.209838',"description": '<br/><a href="http://www.google.com">查看更多信息</a>',类型":英国独立学校"}, {"title": 'xxxxxx',纬度":'46.709741'，"lng": '9.159625',"description": '<br/><a href="http://www.google.com">查看更多信息</a>',"type": '瑞士寄宿学校'}, {"title": 'xxxxxx 独立学院',纬度":'51.512103'，"lng": '-0.308055',描述":'83 新百老汇，<br/>伦敦 W5 5AL，<br/>英国 <br/><a href="http://www.google.com">;查看更多信息</a>',类型":英国独立学校"}, {"title": 'xxxxxx 山',"lat": '51.007720',"lng": '0.217913',描述":'五灰，<br/>梅菲尔德，<br/>东萨塞克斯 <br/>TN20 6HR，<br/>英国 <br/><ahref="http://www.google.com">查看更多信息</a>',类型":英国独立学校"}];无功地图；函数 initMap() {var mapOptions = {中心:新的 google.maps.LatLng(51.507351, -0.127758)，变焦:8，mapTypeId: google.maps.MapTypeId.ROADMAP,样式:[{"featureType": "风景",造型师":[{饱和度":-100}, {亮度":65}, {可见性":开"}]}, {"featureType": "poi",造型师":[{饱和度":-100}, {亮度":51}, {可见性":简化"}]}, {"featureType": "road.highway",造型师":[{饱和度":-100}, {可见性":简化"}]}, {"featureType": "road.arterial",造型师":[{饱和度":-100}, {亮度":30}, {可见性":开"}]}, {"featureType": "road.local",造型师":[{饱和度":-100}, {亮度":40}, {可见性":开"}]}, {"featureType": "运输",造型师":[{饱和度":-100}, {可见性":简化"}]}, {"featureType": "administrative.province",造型师":[{可见性":关闭"}]}, {"featureType": "水","elementType": "标签",造型师":[{可见性":开"}, {亮度":-25}, {饱和度":-100}]}, {"featureType": "水","elementType": "几何",造型师":[{色调":#ffff00"}, {亮度":-25}, {饱和度":-97}]}]};var infoWindow = new google.maps.InfoWindow();var latlngbounds = new google.maps.LatLngBounds();var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);变量 i = 0;var 间隔 = setInterval(function() {var 数据 = 标记[i]var myLatlng = new google.maps.LatLng(data.lat, data.lng);var icon = "";开关(数据类型){案例英国独立学校":icon = "橙色";休息;案例瑞士寄宿学校":图标 = "绿色";休息;}icon = "http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";var 标记 = 新的 google.maps.Marker({位置:myLatlng，地图:地图，标题:data.title，动画:google.maps.Animation.DROP，图标:图标});(功能(标记，数据){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(地图，标记)；});})(标记，数据);latlngbounds.extend(marker.position);我++;如果(我 == 标记.长度){清除间隔(间隔)；var bounds = new google.maps.LatLngBounds();map.setCenter(latlngbounds.getCenter());map.fitBounds(latlngbounds);}}, 80);}google.maps.event.addDomListener(window, 'load', initMap);html,身体，#dvMap {高度:100%；宽度:100%；边距:0px；填充:0px}<script src="https://maps.googleapis.com/maps/api/js"></script><div style="width:100%; height:100%;"><div id="dvMap"></div>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..
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>
解决方案
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
}
code snippet:
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 Maps v3 - 无法获得 100% 的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
