14

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

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

4

2 回答 2

25

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

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

如果您的容器/主题是响应式的，这将非常有用。本质上，这将适用于任何 iframe，而不仅限于谷歌地图。但请记住，如果您的网站上有其他 iframe，它们也会变得响应。

于 2013-01-17T00:02:57.757 回答
22

介绍

这个答案也可以在我的博客文章中找到。如果您有时间，请看一下，因为它涵盖的信息比仅此答案要多得多。

还有另一个不需要 iframe 的出色解决方案，它的构建旨在尽可能地响应。它被称为谷歌地图 v3 API。

官方文档：https ://developers.google.com/maps/documentation/javascript/examples/

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

历史

新的 JavaScript Maps API 第 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>
于 2013-01-17T08:54:22.890 回答