14

Google マップを (埋め込みコードを介して) 応答性の高いサイトに埋め込み、その応答性をマップにも適用するための迅速で簡単な方法を探していました。

一般的に、iframe は、メディア クエリやそれに含まれる div のサイズ変更を拒否し、常に私をイライラさせます。レスポンシブ Google マップ プラグインなど、本当に必要ない場合は、プラグインを使用するのは嫌いです。以下の私の解決策を参照してください。

4

2 に答える 2

25

Google マップ (または youtube、soundcloud などの他の埋め込み) IFRAME 埋め込みを使用しているだけの場合は、これを CSS に追加するだけでレスポンシブにすることができます。

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

コンテナー/テーマがレスポンシブである場合、これはうまく機能します。基本的に、これは Google マップに限らず、あらゆる iframe で機能します。ただし、サイトに他の iframe がある場合は、それらもレスポンシブになることに注意してください。

于 2013-01-17T00:02:57.757 に答える
22

はじめに

この回答は、私のブログARTICLEの一部としても見つけることができます。この回答だけよりもはるかに多くの情報をカバーしているため、時間があれば見てください。

iframe を必要としない別の優れたソリューションがあり、可能な限り応答性が高くなるように構築されています。これは Google マップ v3 API と呼ばれます。

公式ドキュメント: https://developers.google.com/maps/documentation/javascript/examples/

まず、従来の Web アプリケーション内で Gmap v3 API を使用する方法について説明します。これにより、何をすべきかがよくわかります。マップ ブームの初期には、iframe は標準的な配信ソリューションでしたが、時が経つにつれて時代遅れのテクノロジになり、成功した配信テクノロジの障害のようになりました。

歴史

新しい JavaScript Maps API バージョン 3 は、デスクトップ Web ブラウザーとモバイル デバイスの両方にクリーンで高速かつ強力なマップ アプリケーション開発プラットフォームを提供するために、Google によってゼロから構築されました。v3 API を使用すると、開発者は Google マップを独自の Web ページに埋め込むことができ、Google によると、従来のデスクトップ ブラウザ アプリケーションだけでなく、モバイル デバイスにもより高速に適用できるように特別に設計されています。

IE6+、Firefox 2.0+ で動作した v2 API とは異なり、古いバージョンの Chrome v3 API は、IE8+、Firefox 3.0+ から iOS、Android、BlackBerry 6+ ブラウザーまで、HTML5 をサポートするすべてのブラウザーで動作します。これにより、jQuery Mobile アプリケーションの優れたソリューションにもなります。しかし、それが従来の Web ページでどのように機能するかをお見せしましょう。

解決

そして、ここに実際の例があります: 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 に答える