読者です 読者をやめる 読者になる 読者になる

Google Mapをレスポンシブ対応

https://maps.google.comで住所を入力して共有をクリック

f:id:imabari_ehime:20161204132132p:plain

地図を埋め込むを選びコピペ

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3305.2039123020745!2d132.991596815661!3d34.0642866806027!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35503a596c798ac9%3A0x45214b6b3b8d4fd4!2z5LuK5rK76aeF!5e0!3m2!1sja!2sjp!4v1480824900439" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

width="600"のところをwidth="100%"に変更

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3305.2039123020745!2d132.991596815661!3d34.0642866806027!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35503a596c798ac9%3A0x45214b6b3b8d4fd4!2z5LuK5rK76aeF!5e0!3m2!1sja!2sjp!4v1480824900439" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

上のコードを HTML に貼り付ける。

表示サイズに合わせてサイズ調整してくれます。