Javascript 使谷歌地图 iframe 嵌入响应的快速简便方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14370115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
quick and easy way to make google maps iframe embed responsive
提问by matt
I was looking for a quick and easy method for embedding a google map (via their embed code) into a responsive site and apply the responsiveness to the map as well.
我一直在寻找一种快速简便的方法来将谷歌地图（通过他们的嵌入代码）嵌入到响应式站点中，并将响应性应用于地图。
Generally the iframe will refuse to resize with your media queries or with the div its contained within which always frustrated me, and I hate to use plugins if there really not needed such as responsive google map plugins. See my solution below.
通常，iframe 会拒绝使用您的媒体查询或其中包含的 div 调整大小，这总是让我感到沮丧，如果真的不需要，我讨厌使用插件，例如响应式谷歌地图插件。请参阅下面的我的解决方案。
回答by matt
If your just using the google maps (or any other embed such as youtube, soundcloud etc.) IFRAME embed you can make it responsive by simply adding this to your CSS.
如果您只是使用谷歌地图（或任何其他嵌入，如 youtube、soundcloud 等）IFRAME 嵌入，您只需将其添加到您的 CSS 中即可使其具有响应性。
iframe, object, embed{max-width: 100%;}
If your container/theme is responsive this will work great. Essentially this will work with ANY iframe and not just limited to google maps. But keep in mind if you have other iframes on your site they will as well become responsive.
如果您的容器/主题是响应式的，这将非常有效。本质上，这将适用于任何 iframe，而不仅限于谷歌地图。但请记住，如果您的网站上有其他 iframe，它们也会响应。
回答by Gajotres
Intro
介绍
This answer can also be found as a part of my blog ARTICLE. Take a look if you have time because it cover much more information then this answer alone.
这个答案也可以在我的博客文章中找到。如果您有时间，请看一看，因为它涵盖的信息比单独的答案要多得多。
There's another great solution that don't requires iframe and its is built to be as much responsive as it can be. It is called Google maps v3 API.
还有另一个很棒的解决方案，它不需要 iframe，它的构建是为了尽可能多地响应。它被称为谷歌地图 v3 API。
Official documentation: https://developers.google.com/maps/documentation/javascript/examples/
官方文档：https: //developers.google.com/maps/documentation/javascript/examples/
First let us talk about how Gmap v3 API can be used inside a classic web application, it will give us a good perspective what to do. In the beginning of a map craze iframe was a standard delivery solution but as a time went by it become a outdated technology, more like an obstacle them a successful delivery technology.
首先让我们谈谈如何在经典的 Web 应用程序中使用 Gmap v3 API，它将为我们提供一个很好的视角。在地图热潮之初，iframe 是一种标准的交付解决方案，但随着时间的流逝，它变成了一种过时的技术，更像是成为成功交付技术的障碍。
History
历史
The new JavaScript Maps API Version 3 was built from the ground up by Google to offer a clean, fast and powerful maps application development platform for both desktop Web browsers and mobile devices. The v3 API lets developers embed Google Maps in their own Web pages and is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications, according to Google.
新的 JavaScript Maps API 第 3 版由 Google 从头开始构建，旨在为桌面 Web 浏览器和移动设备提供干净、快速且功能强大的地图应用程序开发平台。据谷歌称，v3 API 允许开发人员将谷歌地图嵌入到他们自己的网页中，并且专门设计为更快、更适用于移动设备以及传统的桌面浏览器应用程序。
Unlike v2 API which worked on IE6+, Firefox 2.0+, older versions of Chrome v3 API will work on every HTML5 supported browser ranging from IE8+, Firefox 3.0 + up to iOS, Android and BlackBerry 6+ browsers. Which makes it also an excellent solution for jQuery Mobile applications. But let me show you how it works in a classic web page.
与适用于 IE6+、Firefox 2.0+ 的 v2 API 不同，旧版本的 Chrome v3 API 将适用于所有支持 HTML5 的浏览器，从 IE8+、Firefox 3.0+ 到 iOS、Android 和 BlackBerry 6+ 浏览器。这也使它成为 jQuery Mobile 应用程序的出色解决方案。但是让我向您展示它在经典网页中的工作原理。
Solution
解决方案
And here's a working example: http://jsfiddle.net/Gajotres/T4H5X/
这是一个工作示例：http: //jsfiddle.net/Gajotres/T4H5X/
You can put it anywhere, it will respond to resizing. It is fast, reliable and flexible.
你可以把它放在任何地方，它会响应调整大小。它快速、可靠且灵活。
Here's an example:
下面是一个例子：
<!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>
