我一直在寻找的嵌入谷歌地图（通过他们的嵌入代码）为响应网站和应用的响应到地图，以及一个快速简便的方法。

一般的iframe会拒绝与你的媒体查询或与div来调整其内包含的总是我感到沮丧，我讨厌用的插件是否真的不需要如响应谷歌地图插件。见下面我的解决方案。

Answer 1:

如果你只是使用谷歌地图（或任何其它嵌入如YouTube，的SoundCloud等）IFRAME嵌入你可以把它响应通过简单地添加给你的CSS。

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

如果你的容器/主题为响应这将工作的伟大。本质上，这将与任何iframe的工作，而不是仅仅局限于谷歌地图。但请记住，如果你有网站上的其他I帧，他们将和响应，也。

Answer 2:

介绍

这个答案也可以找到我的博客的部分文章。看看，如果你有时间，因为它涵盖了更多的信息，然后独自这个答案。

还有一个很好的解决方案不要求iframe和它的建成将尽可能多的响应，因为它可以。这就是所谓的谷歌地图API第3版。

正式文件： https://developers.google.com/maps/documentation/javascript/examples/

首先，让我们来谈谈如何GMAP版API可以将经典的web应用程序中使用，它会给我们一个很好的视角做什么。在地图热潮iframe的开始是一个标准的交付解决方案，但作为一个时间的推移它成为一种过时的技术，更像是一个障碍，他们成功交付技术。

历史

新的JavaScript地图API第3版从地上爬起来谷歌开发提供同时支持桌面Web浏览器和移动设备清洁，快速，功能强大的地图应用程序开发平台。第3版API允许开发人员在自己的网页中嵌入谷歌地图，并特别设计，以更快，更适用于移动设备，以及传统的桌面浏览器应用程序，根据谷歌。

不同于V2的API，在IE6 +，火狐2.0及以上版本的工作，旧版本的Chrome版API将在每一个支持HTML5的浏览器，从IE8 +，火狐3.0 +最多的iOS，Android和黑莓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>