この記事ではgooglemapをレスポンシブ対応させる方法をご紹介します。
横幅をレスポンシブ対応させる
下記の事例ではwidth=”800″ となっている箇所をwidth=”100%”に変更してください。
これで、閲覧した端末の横幅サイズに合わせてgooglemapも横幅最大に広がって表示されます。
埋め込みタグの事例
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.6968781573714!2d139.75151951468234!3d35.68446508019355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b19763daf%3A0xd8f25ad45d307110!2z44CSMTAwLTAwMDE!5e0!3m2!1sja!2sjp!4v1549152526014” width=”800″ height=”600″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
縦幅サイズ調整の方法
高さを高くしたり、低くしたい場合は「height=”600″」、この数字を大きくしたり、小さくして調整してください。
これで、端末ごとのサイズの違いをを気にせずgooglemapを使用することができるようになります。