私のサイト(okayamania.com)ではGoogleマップの埋め込みを多用しています。
この時に以前からパーセントでの指定が出来ればいいのにと思っていました。
通常の埋め込みコード取得の画面では、
小中大、そして自分で数字を指定するカスタムサイズのいずれかからサイズを選ばなければなりません。
私はこの横幅をパーセントで指定したかったのですが…、実はこれは可能です。
まずはHTMLのコードを取得します。
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d820.4293764818843!2d133.9344659854843!3d34.661836559652016!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3554062e28a88b9f%3A0xebc5c5fb774fc417!2z5bKh5bGx55yM5bqB!5e0!3m2!1sja!2sjp!4v1570939277786!5m2!1sja!2sjp” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe>
これが岡山県庁を貼り付ける際のコードです。
貼り付ける地図の横のサイズを指定するのがwidth=〇〇(数字)と書いてある部分です。
これを下記の通りに書き換えます。
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d820.4293764818843!2d133.9344659854843!3d34.661836559652016!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3554062e28a88b9f%3A0xebc5c5fb774fc417!2z5bKh5bGx55yM5bqB!5e0!3m2!1sja!2sjp!4v1570939277786!5m2!1sja!2sjp” width=”90%” height=”300″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe>
widthとheightの数字を書き換えました。
widthの方はパーセントで指定して、これを実際に貼り付けます。
このようにパーセント指定もきちんと対応します。
ひと手間掛かりますが、難しい作業はありません。ぜひ試してみて下さい。