web-dev-qa-db-ja.com

Googleマップをiframe埋め込みレスポンシブにするための迅速かつ簡単な方法

Googleマップを（埋め込みコードを介して）レスポンシブサイトに埋め込み、レスポンシブネスをマップにも適用するための迅速かつ簡単な方法を探していました。

一般的に、iframeはメディアクエリまたはその中に含まれるdivでサイズ変更を拒否しますが、これは常にイライラさせられます。以下のソリューションをご覧ください。

javascripthtml5css3google-mapsiframe
14
matt

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

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

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

25
matt

イントロ

この回答は、ブログの一部としても見つけることができます[〜＃〜] article [〜＃〜]。時間がある場合は、この回答だけでなく、はるかに多くの情報を網羅しているので、ご覧ください。

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

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

最初に、古典的なWebアプリケーション内でGmap v3 APIをどのように使用できるかについてお話ししましょう。これにより、何をすればよいかがわかります。地図ブームの始まりには、iframeは標準的な配信ソリューションでしたが、時間が経つにつれて時代遅れのテクノロジーになり、配信テクノロジーの障害のようになりました。

歴史

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

IE6 +、Firefox 2.0+で動作するv2 APIとは異なり、古いバージョンのChrome IE3 +、Firefox 3.0 + iOSまでのすべてのHTML5対応ブラウザで動作しますAndroidおよびBlackBerry 6+ブラウザ：これは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>
22
Gajotres