google mapを表示する

1.プラグインを使って表示
1)simple mapプラグインをインストール
2)地図を配置したい場所に[map addr=”住所” width=”XXpx” height=”XXpx” zoom=”XX”]で指定 widthのデフォルトは100%、heghtは200px、zoomは16倍

使用例
[map addr=”東京都千代田区永田町1丁目7−1”]

東京都千代田区永田町1丁目7−1

注意)但しhttpsサイトで使用すると地図位置を移動しても再描画されず、地図が欠けてしまったり、拡大縮小表示の+-記号が文字化けしてしまったりして正しく動かなくなります。

2.プラグインを使わないで、Google Mapを自分のページに埋め込んで表示
1)google mapで目的地を表示し、[共有]でポップアップウインドウを表示
2)[地図を埋め込む]をクリックし、iframeコードをコピーする
google map sample
3)コピーしたiframeコードを地図を表示したい位置に貼りつける。
4)貼りつけたコードの一部(width=など)を修正する

使用例
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.045018827348!2d139.7426772152588!3d35.67589348019551!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b89b2e1c8b1%3A0x59a123e3d5ac5ab6!2z44CSMTAwLTAwMTQg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65rC455Sw55S677yR5LiB55uu77yX4oiS77yR!5e0!3m2!1sja!2sjp!4v1449465758903″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

width=”600″をwidth=”640″に、height=”450″をheight=”400″、”border:0″を”2px solid #000000″に変更したのが下図


注意)こちらを使えばhttpsサイトでも正常に動作しますし、Google Mapの全ての機能が使えます。

カテゴリー: WP 機能 パーマリンク