Быстрый и простой способ сделать карты Google iframe embed отзывчивыми

Я искал быстрый и простой способ встраивания карты google (через свой код для встраивания) в отзывчивый сайт и также применять отзывчивость к карте.

Как правило, iframe отказывается изменять размер с помощью ваших медиа-запросов или с содержащимся в нем div, в котором меня всегда разочаровывает, и я ненавижу использовать плагины, если действительно не нужны такие, как гибкие плагины Google Maps. См. Мое решение ниже.

Ответ 1

Если вы просто используете карты google (или любые другие вложения, такие как youtube, soundcloud и т.д.). Встраивание IFRAME позволяет вам реагировать, просто добавляя это в свой CSS.

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

Если ваш контейнер/тема реагирует, это будет отлично работать. По сути, это будет работать с ЛЮБОЙ iframe, а не только с картами google. Но имейте в виду, если у вас есть другие фреймы на вашем сайте, они также станут отзывчивыми.

Ответ 2

Введение

Этот ответ также можно найти как часть моего блога СТАТЬЯ. Взгляните, если у вас есть время, потому что оно охватывает гораздо больше информации, чем только этот ответ.

Там есть еще одно отличное решение, которое не требует, чтобы iframe и его построены так же быстро реагировать, насколько это возможно. Он называется Google maps v3 API.

Официальная документация: https://developers.google.com/maps/documentation/javascript/examples/

Сначала давайте поговорим о том, как API Gmap v3 можно использовать в классическом веб-приложении, это даст нам хорошую перспективу, что делать. В начале карты увлечение iframe было стандартным решением для доставки, но по прошествии времени он стал устаревшей технологией, скорее как препятствием для них успешной технологией доставки.

История

Новый API API Карт API 3 был создан с нуля компанией Google, чтобы предложить чистую, быструю и мощную платформу для разработки приложений для настольных веб-браузеров и мобильных устройств. Google v3 API позволяет разработчикам внедрять Google Maps на свои веб-страницы и, в соответствии с Google, специально разработан для более быстрой и более применимой к мобильным устройствам, а также к традиционным приложениям для настольных браузеров.

В отличие от v2 API, который работал на IE6 +, Firefox 2.0+, более старые версии API Chrome v3 будут работать на каждом поддерживаемом браузером HTML5, начиная от браузеров IE8 +, Firefox 3.0 + до iOS, Android и BlackBerry 6+. Это делает его отличным решением для мобильных приложений jQuery. Но позвольте мне показать вам, как это работает на классической веб-странице.

Решение

И вот рабочий пример: 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>