Google Maps を表示する

Google Mapsの機能を使うと画面内に地図を埋め込むことができます。

このサンプルで使用するオプション

Google Mapsを画面内に表示する

Google Mapsを使用することで画面内に地図を埋め込み表示することができます。
Google MapsのタグはMFセクション内に記述するだけで使用することができます。

プレビュー

スマートフォン上での表示 (変換前)

このプレビューは、横幅480pxの画面を50%に縮小して表示しています。

PREVIEW
パソコン上での表示 (変換後)

このプレビューは、横幅1372pxの画面を50%に縮小して表示しています。

PREVIEW

新しいウィンドウで開く

ソースコード

HTML
<section>
    <div class="gmap">
        <iframe style="border: 0;" width="100%" height="auto"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.3781003640916!2d139.6837609510472!3d35.66769098010024!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f349556d3069%3A0xab47e08678ed8716!2z44K344Oz44Oh44OI44Oq44OD44Kv!5e0!3m2!1sja!2sjp!4v1511245180546"
                frameborder="0" allowfullscreen=""></iframe>
    </div>
</section>
CSS
.gmap iframe {
    height: 500px;
}