なにかと使うgoogle Mapですが、レスポンシブサイトに埋め込むと、どうも上手くいきません。
でもレスポンシブに対応させるのは、とっても簡単なんですよ。
こんな感じ!
INDEX
地図を用意する
Google Mapにアクセスします。欲しい地図を表示させます。
コードを入手したいので、[共有]をクリックします。
コードを入手する
[共有]のページが開いたら、[地図を埋め込む]をクリック。そして、をクリックしiframeで始まるコードをコピーします。
コードの編集
例は、帝国ホテルの地図です。横幅部分を編集して、width=”100%”にするだけです。これで、レスポンシブサイトにも対応します。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.1898692355167!2d139.7560591152587!3d35.6723265801963!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bee5d15bc4f%3A0xc637562b5aac0ea6!2z5bid5Zu944Ob44OG44Or5p2x5Lqs!5e0!3m2!1sja!2sjp!4v1556012500771!5m2!1sja!2sjp" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
コメント ※ハンドルネームでお願いします