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>
