I was looking for a quick and easy method for embedding a google map (via their embed code) into a responsive site and apply the responsiveness to the map as well.

Generally the iframe will refuse to resize with your media queries or with the div its contained within which always frustrated me, and I hate to use plugins if there really not needed such as responsive google map plugins. See my solution below.

回答1:

If your just using the google maps (or any other embed such as youtube, soundcloud etc.) IFRAME embed you can make it responsive by simply adding this to your CSS.

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

If your container/theme is responsive this will work great. Essentially this will work with ANY iframe and not just limited to google maps. But keep in mind if you have other iframes on your site they will as well become responsive.

回答2:

Intro

This answer can also be found as a part of my blog ARTICLE. Take a look if you have time because it cover much more information then this answer alone.

There's another great solution that don't requires iframe and its is built to be as much responsive as it can be. It is called Google maps v3 API.

Official documentation: https://developers.google.com/maps/documentation/javascript/examples/

First let us talk about how Gmap v3 API can be used inside a classic web application, it will give us a good perspective what to do. In the beginning of a map craze iframe was a standard delivery solution but as a time went by it become a outdated technology, more like an obstacle them a successful delivery technology.

History

The new JavaScript Maps API Version 3 was built from the ground up by Google to offer a clean, fast and powerful maps application development platform for both desktop Web browsers and mobile devices. The v3 API lets developers embed Google Maps in their own Web pages and is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications, according to Google.

Unlike v2 API which worked on IE6+, Firefox 2.0+, older versions of Chrome v3 API will work on every HTML5 supported browser ranging from IE8+, Firefox 3.0 + up to iOS, Android and BlackBerry 6+ browsers. Which makes it also an excellent solution for jQuery Mobile applications. But let me show you how it works in a classic web page.

Solution

And here's a working example: http://jsfiddle.net/Gajotres/T4H5X/

You can put it anywhere, it will respond to resizing. It is fast, reliable and flexible.

Here's an example:

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