我正在寻找一种快速简便的方法来将谷歌地图（通过他们的嵌入代码）嵌入到响应式站点中，并将响应性也应用于地图。
通常，iframe 会拒绝使用您的媒体查询或其中包含的 div 调整大小，这总是让我感到沮丧，如果真的不需要，我讨厌使用插件，例如响应式谷歌地图插件。请参阅下面的解决方案。
【问题讨论】：
标签： javascript html css google-maps iframe
如果您只是使用谷歌地图（或任何其他嵌入，如 youtube、soundcloud 等）IFRAME 嵌入，您只需将其添加到您的 CSS 即可使其具有响应性。
iframe, object, embed{max-width: 100%;}
如果您的容器/主题具有响应性，这将非常有效。本质上，这将适用于任何 iframe，而不仅限于谷歌地图。但请记住，如果您的网站上有其他 iframe，它们也会变得响应。
【讨论】：
这个答案也可以在我的博客 ARTICLE 中找到。如果您有时间，请看一下，因为它涵盖的信息比仅此答案要多。
还有另一个不需要 iframe 的出色解决方案，它的构建旨在尽可能地响应。它被称为 Google maps v3 API。
官方文档：https://developers.google.com/maps/documentation/javascript/examples/
首先让我们谈谈如何在经典 Web 应用程序中使用 Gmap v3 API，它将为我们提供一个很好的视角来做什么。在地图热潮开始时，iframe 是一种标准的交付解决方案，但随着时间的推移，它成为一种过时的技术，更像是他们成功交付技术的障碍。
新的 JavaScript 地图 API 版本 3 由 Google 从头开始构建，旨在为桌面 Web 浏览器和移动设备提供干净、快速且功能强大的地图应用程序开发平台。据 Google 称，v3 API 让开发人员可以将 Google 地图嵌入到他们自己的网页中，并且专为更快、更适用于移动设备以及传统桌面浏览器应用程序而设计。
与在 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>
【讨论】：