• 
• Tweet

• 
• Tweet

例えば「スカイツリーのソラマチ広場でイベント開催！」などという時に埋め込む地図（GoogleMaps）です。

このような場合、「ソラマチ広場ってスカイツリー（ソラマチ）のどこ？」ということにならないように地図を埋め込みたいものです。つまり正確な位置にアイコンをつけてGoogleMapsを表示する、というのがこの記事のゴールです。

次のような順番でゴールを目指しましょう：

• サイトにGooleMapsを埋め込むには
• 必要なのは座標とズームだけ
• 正確な位置にアイコンを付ける
• 緑の矢印アイコンでは目立たない（不要な他のアイコンを表示させない）
• WordPressでカスタムフィールドを使った応用編

サイトにGooleMapsを埋め込むには

GoogleMapsのページで「スカイツリー」を検索して縮尺を調整すると次のように表示されます。

その地図の左上のリンクアイコンをクリックします。

「ウェブサイトへの地図埋め込み用 HTML コード」に表示されたiframeコードをコピーして表示したいページに貼り付けるだけです。（表示サイズは適当に）
このページに埋め込むには表示サイズを590×400に調整してページをブラウザで表示してみると次のように表示されるはずです。

大きな地図で見る
そのurlに注目するとちょっとパラメータが多すぎるので少し整理してみます。

必要なのは座標とズームだけ

貼り付けたiframeコードからurlをみるとパラメータが多すぎてよく分かりません。でも最低限必要なのは、座標とズームだけで次のようにとても短いものです。

https://maps.google.co.jp/maps?q=35.710071,139.810724&z=18

実際の表示デモ（別ウィンドウ）

これがGoogleMapsの基本的な仕様

ブラウザで表示してみて分かるとおり、緑の矢印アイコンで座標の位置が特定され、その座標の周辺でインデックスされている場所が赤いAアイコンで紹介されるというのがこのGoogleMapsの仕様です。

正確な位置にアイコンを付ける

この記事のゴール、正確な位置にアイコンを埋め込むには、アイコンを付けたい位置の座標を取得すればよさそうです。

座標を正確に取得するには

その方法は
座標を取得したい正確な場所の上で右クリックしてコンテキストメニューを表示させます。

そのメニューから「この場所について」をクリックすると、緑の矢印アイコンがそのポイントに移動して、検索フィールドにはそのポイントの座標が入力されています。

先ほどの座標部分をこの座標に置き換えると：

https://maps.google.co.jp/maps?q=35.709919,139.811571&z=18

表示デモ（別ウィンドウ）

ソラマチ広場のモニュメントの正確な位置に緑の矢印アイコンを置くことができました。

プチ情報（おまけ）：このモニュメントは三つの石の柱からなっていますが、この真ん中で空を見上げるとスカイツリーのてっぺんがいい感じです。（画像集）

緑の矢印アイコンでは目立たない（不要な他のアイコンを表示させない）

この例だと、位置を正確に示したいポイントは緑の矢印アイコン、そして別の箇所（川越し）に赤いAアイコンが表示されています。
どうも緑の矢印アイコンよりも赤のAアイコンのほうが目だっています。

不要なアイコンを消して、示したいポイントだけにアイコンを付けるのは簡単です。

https://maps.google.co.jp/maps?q=35.709919,139.811571(ソラマチ広場)&z=18

表示デモ（別ウィンドウ）

座標の後ろ、半角括弧付でテキストを挿入するだけです。
ついでに情報ウィンドウも表示してみましょう。&iwloc=A というパラメータをurlに挿入するだけです。

https://maps.google.co.jp/maps?q=35.709919,139.811571(ソラマチ広場)&z=18&iwloc=A

表示デモ（別ウィンドウ）

これをiframeにすると

<iframe width="590" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?q=35.709919,139.811571(ソラマチ広場)&amp;z=18&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.jp/maps?q=35.709919,139.811571(ソラマチ広場)&amp;z=18&iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

補足：
iframe内のurlにはそれが埋め込みであることを示すパラメータ &output=embed を追記します。

実際のこの記事のページに表示すると

大きな地図で見る

WordPressでカスタムフィールドを使った応用編

おまけですが、ここまでを理解すると、WordPressで例えば物件情報と共にその正確な位置をGoogleMapsで表示したい場合などに応用できます。

必要なのは座標とテキストだけですから、それらをカスタムフィールドで入力するようにすればOKです。

カスタムフィールドのキーを次のように決めたとします。

gmap_location：住所もしくは座標（住所で正確な位置がポイントできるならそれでOKで、ダメなら座標を入力）
gmap_catch：キャッチコピー

記事を表示するテンプレートのコード

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?q=<?php echo get_post_meta($post_id, 'gmap_location', true); ?>(<?php echo get_post_meta($post_id, 'gmap_catch', true); ?>)&amp;z=18&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.jp/maps?q=<?php echo get_post_meta($post_id, 'gmap_location', true); ?>(<?php echo get_post_meta($post_id, 'gmap_catch', true); ?>)&amp;z=18&iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

以下はページ表示イメージです

大きな地図で見る