サイトに埋め込んだGoogleマップをレスポンシブ・ウェブデザインに対応させます。

デモページ

HTML

<div id="container">
	<div class="googlemaps">
		<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3296692.8677216982!2d138.252924!3d36.204824!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34674e0fd77f192f%3A0xf54275d47c665244!2z5pel5pys!5e0!3m2!1sja!2sjp!4v1416214584505" width="600" height="450" frameborder="0" style="border:0"></iframe>
	</div>
</div>

CSS

#container {
	max-width: 768px;
	margin: 0 auto;
	padding: 0 20px;
}
.googlemaps {
	overflow: hidden;
	position: relative;
	height: 0;
	padding-bottom: 75%;
}
.googlemaps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

デモページ