Googleマップの埋め込み

カスタマイズもいろいろできるらしいですが、まずは基本のやつだけ。

手順

1. 埋め込みたい場所をGoogle map上で右クリックする
2. 「この場所について」を選択
3. 画面下の方に住所等が出るのでクリック
4. 共有、をクリック
5. アドレスを埋め込む

index.html

<div class="map__img">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6561.444493809385!2d135.52110612671345!3d34.68695892175206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e0cd516e58f9%3A0xc9488d12f48fd2d7!2z44CSNTQwLTAwMDIg5aSn6Ziq5bqc5aSn6Ziq5biC5Lit5aSu5Yy65aSn6Ziq5Z-O77yS!5e0!3m2!1sja!2sjp!4v1470710796077" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

補足

• width height でサイズ調整可能（%もOK）
• 3.の住所等の情報のところにある座標はプラグインとかで利用できるらしい

埋め込んだ地図の下に隙間ができる

vertical-align: bottomで解決。

「GoogleMapで開く」とき

「手順」の「4. 共有」で「リンクを共有」選択。