web-dev-qa-db-fra.com

moyen rapide et facile de rendre google maps iframe embed responsive

Je cherchais une méthode rapide et facile pour intégrer une carte Google (via leur code d'intégration) dans un site réactif et appliquer également la réactivité à la carte.

En général, l'iframe refusera de redimensionner avec vos requêtes multimédias ou avec la div qui y est contenue, ce qui m'a toujours frustré, et je déteste utiliser des plugins s'il n'y en a vraiment pas besoin, comme des plugins google map réactifs. Voir ma solution ci-dessous.

javascripthtml5css3google-mapsiframe
14
matt

Si vous utilisez simplement Google Maps (ou toute autre intégration telle que YouTube, SoundCloud, etc.), intégrez IFRAME, vous pouvez le rendre réactif en l'ajoutant simplement à votre CSS.

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

Si votre conteneur/thème est réactif, cela fonctionnera très bien. Essentiellement, cela fonctionnera avec N'IMPORTE QUEL iframe et pas seulement limité à Google Maps. Mais gardez à l'esprit que si vous avez d'autres iframes sur votre site, ils deviendront également réactifs.

25
matt

Intro

Cette réponse peut également être trouvée dans le cadre de mon blog ARTICLE . Jetez un oeil si vous avez le temps car il couvre beaucoup plus d'informations que cette réponse seule.

Il existe une autre excellente solution qui ne nécessite pas iframe et qui est conçue pour être aussi réactive que possible. Il s'agit de l'API Google maps v3.

Documentation officielle: https://developers.google.com/maps/documentation/javascript/examples/

Parlons d'abord de la façon dont l'API Gmap v3 peut être utilisée dans une application Web classique, cela nous donnera une bonne perspective de ce qu'il faut faire. Au début d'un engouement pour les cartes, iframe était une solution de livraison standard, mais au fil du temps, il est devenu une technologie obsolète, plus comme un obstacle pour eux, une technologie de livraison réussie.

Histoire

La nouvelle API JavaScript Maps Version 3 a été conçue à partir de zéro par Google pour offrir une plate-forme de développement d'applications cartographiques propre, rapide et puissante pour les navigateurs Web de bureau et les appareils mobiles. L'API v3 permet aux développeurs d'intégrer Google Maps dans leurs propres pages Web et est spécialement conçue pour être plus rapide et plus applicable aux appareils mobiles, ainsi qu'aux applications de navigateur de bureau traditionnelles, selon Google.

Contrairement à l'API v2 qui fonctionnait sur IE6 +, Firefox 2.0+, les anciennes versions de Chrome v3 fonctionnera sur tous les navigateurs compatibles HTML5 allant d'IE8 +, Firefox 3.0 + à iOS, Android et BlackBerry 6+. Ce qui en fait également une excellente solution pour les applications jQuery Mobile. Mais permettez-moi de vous montrer comment cela fonctionne dans une page Web classique.

Solution

Et voici un exemple de travail: http://jsfiddle.net/Gajotres/T4H5X/

Vous pouvez le mettre n'importe où, il répondra au redimensionnement. Il est rapide, fiable et flexible.

Voici un exemple:

<!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