mat*_*att 14 javascript iframe html5 google-maps css3
我正在寻找一种快速简便的方法,将谷歌地图(通过其嵌入代码)嵌入到响应式网站中,并将响应性应用于地图.
一般情况下,iframe会拒绝调整您的媒体查询或其中包含的div,这总是使我感到沮丧,我讨厌使用插件,如果真的不需要,如响应式谷歌地图插件.请参阅下面的解决方案
mat*_*att 25
如果你只是使用谷歌地图(或任何其他嵌入,如youtube,soundcloud等)IFRAME嵌入你可以通过简单地添加到你的CSS使其响应.
iframe, object, embed{max-width: 100%;}
如果您的容器/主题响应,这将很有效.基本上这将适用于任何iframe,而不仅限于谷歌地图.但请记住,如果您的网站上有其他iframe,他们也会变得敏感.
Gaj*_*res 22
这个答案也可以作为我的博客文章的一部分找到.看看你是否有时间,因为它涵盖了更多信息,然后单独回答这个问题.
还有另一个很棒的解决方案,它不需要iframe,它的构建尽可能地响应.它被称为Google maps v3 API.
官方文档:https://developers.google.com/maps/documentation/javascript/examples/
首先让我们谈谈如何在经典的Web应用程序中使用Gmap v3 API,它将为我们提供一个很好的视角.在地图开始时,热门iframe是一种标准的交付解决方案,但随着时间的推移,它成为一种过时的技术,更像是成功交付技术的障碍.
全新的JavaScript Maps API Version 3由Google全力打造,旨在为桌面Web浏览器和移动设备提供简洁,快速且功能强大的地图应用程序开发平台.据谷歌称,v3 API允许开发人员在自己的网页中嵌入谷歌地图,并且特别设计为更快,更适用于移动设备以及传统的桌面浏览器应用程序.
与在IE6 +,Firefox 2.0+上运行的v2 API不同,旧版Chrome v3 API可用于支持各种HTML5的浏览器,从IE8 +,Firefox 3.0 +到iOS,Android和BlackBerry 6+浏览器.这使它成为jQuery Mobile应用程序的绝佳解决方案.但是,让我向您展示它在经典网页中的工作原理.
这是一个有效的例子:http://jsfiddle.net/Gajotres/T4H5X/
你可以把它放在任何地方,它会响应调整大小.它快速,可靠,灵活.
这是一个例子:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>