デザインコンポーネント - Google Maps を表示する

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

使用するオプション

Google Mapsを画面内に表示する

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

スマートフォン上の表示
パソコン上の表示
実際の大きさで確認する

ソースコード

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;
}