Javascript 快速简便的方法，使谷歌地图iframe嵌入响应_Javascript_Html_Css_Google Maps_Iframe

Javascript 快速简便的方法，使谷歌地图iframe嵌入响应

javascript html css google-maps iframe

Javascript 快速简便的方法，使谷歌地图iframe嵌入响应,javascript,html,css,google-maps,iframe,Javascript,Html,Css,Google Maps,Iframe,我正在寻找一种快速简便的方法，将谷歌地图（通过其嵌入代码）嵌入到响应性站点，并将响应性应用于地图通常情况下，iframe会拒绝使用您的媒体查询或其包含的div来调整大小，这总是让我感到沮丧，如果真的不需要，我讨厌使用插件，比如响应性谷歌地图插件。请参阅下面的我的解决方案。如果您仅使用谷歌地图（或任何其他嵌入，如youtube、soundcloud等）IFRAME嵌入，只需将其添加到CSS中即可使其响应 iframe, object, embed{max-width: 100%;} 如果你的容

我正在寻找一种快速简便的方法，将谷歌地图（通过其嵌入代码）嵌入到响应性站点，并将响应性应用于地图

通常情况下，iframe会拒绝使用您的媒体查询或其包含的div来调整大小，这总是让我感到沮丧，如果真的不需要，我讨厌使用插件，比如响应性谷歌地图插件。请参阅下面的我的解决方案。

如果您仅使用谷歌地图（或任何其他嵌入，如youtube、soundcloud等）IFRAME嵌入，只需将其添加到CSS中即可使其响应

iframe, object, embed{max-width: 100%;}

如果你的容器/主题是响应性的，这将非常有效。基本上，这将适用于任何iframe，而不仅仅限于google地图。但请记住，如果您的网站上有其他iFrame，它们也会响应。

Intro 这个答案也可以在我的博客中找到。如果您有时间，请看一看，因为它涵盖了比这个答案更多的信息

还有另一个伟大的解决方案，它不需要iframe，而且它的构建是为了尽可能提高响应速度。它被称为GoogleMapsV3API

正式文件：

首先让我们谈谈如何在一个经典的web应用程序中使用GMAPV3API，它将为我们提供一个很好的视角。在地图热的初期，iframe是一种标准的交付解决方案，但随着时间的推移，它已成为一种过时的技术，更像是一种障碍，阻碍了他们成功交付技术

历史新的JavaScriptMapsAPI版本3由Google从头构建，为桌面Web浏览器和移动设备提供了一个干净、快速、功能强大的地图应用程序开发平台。谷歌表示，V3API允许开发者将谷歌地图嵌入到自己的网页中，并专门设计为更快、更适用于移动设备以及传统桌面浏览器应用程序

与适用于IE6+、Firefox 2.0+的v2 API不同，Chrome v3 API的旧版本将适用于所有支持HTML5的浏览器，从IE8+、Firefox 3.0+到iOS、Android和BlackBerry 6+浏览器。这也使得它成为jQuery移动应用程序的优秀解决方案。但让我向您展示它在经典网页中是如何工作的

解决方案下面是一个有效的例子：

你可以把它放在任何地方，它会响应大小调整。它快速、可靠、灵活

下面是一个例子：

<!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>


谷歌地图JavaScript API v3示例：简单地图
html，正文，#地图#画布{
保证金：0；
填充：0；
身高：100%；
}
var映射；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

你的答案/建议也与HTML5和CSS3没有任何关系，它是CSS2，15年前就被引入了，为什么要关闭它。。关门的人一定是跟着来的。问题是显而易见的；如何使谷歌地图iframe具有响应性？考虑到这个问题有10多颗星，人们在谷歌上搜索了25000次以上，关闭它是愚蠢的。我个人认为，重新打开它没有意义，因为添加更多答案没有意义。感谢你的建议，我不久前确实遇到过这个问题，我只是在寻找那些在联系人页面上有一个小地图的网站的快速修复方法。这是伟大的更先进的用途。谢谢你，Gajotres！感谢你的帖子和Matt最初的“问题”，很高兴能这么快解决这个问题；）那太好了。非常感谢。