2月 02

Google Maps
地図イメージ

何じゃコレは?!

下部のように、サイト内に埋め込まれた地図を見たことがあると思う。このような地図は、Googleが提供している“Google Maps API”を利用してGoogle マップをWeb ページに埋め込むことができる。“Google Maps API Key”を取得すれば誰でも無料で利用することができる。
自分が初めてGoogleMapを埋め込んだとき、悪戦苦闘の連続。デベロッパーガイドを読んでも、さらに頭が混乱するだけ。やっとベーシックな地図ができたときには充実感と疲労感でいっぱいだった記憶が残っている。

今回は“WordPress”にGoogleMapを埋め込むにはどうすればいいか…。困ったときはPlugin。探してみると丁度いいのが見つかったので、インストール方法・使い方を書き留めておく。

<インストール方法>

  1. Google Maps API Keyを取得する。
  2. WordPressのPluginから“Google Maps for WordPress”をインストールする。
  3. プラグインを有効化する。
  4. “Plugin”のサブメニューに“wpGoogleMapConfiguration”が表示される。クリックしてGoogle Maps API Keyをインプットする。
  5. 『Your Google API Key appears to be valid!』のメッセージが表示されたことを確認する。

<使い方>
投稿ページ下部に“Google Maps for WordPress”のオプションが表示されている。オプション内の設定は次のとおり。

  • Location Name : 地点名(吹き出しに記載)
  • Address : 住所
  • Location Description : 地点の説明(吹き出しに記載)
  • Map Width : 地図の幅(% or px , Default : 100%)
  • Map Height : 地図の高さ(% or px, Default : 400px)
  • Options :
    • Enable Mouse Wheel Zoom : マウスホイールによるズームを有効にする
    • Enable Zoom/Pan Controls : ズーム/パンの調整を有効にする
    • Enable Map Type Controls (Map, Satellite, or Hybrid) : 地図タイプの設定を有効にする(地図・衛星写真・両方)
    • Display option to get directions to this location. : この位置への経路を取得するオプションを表示する
    • Display option from get directions from this location. : この位置からの経路を取得するオプションを表示する

Map powered by MapPress

 
―流石はCMS。仮にGoogle Maps APIを理解していなかったとしても、ややこしいことは全てPluginがやってくれている。『今までの苦労は何だったんだ!』って思わず叫んでしまうほど。

Bookmark and Share
Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Tagged with:
Get Adobe Flash playerPlugin by wpburn.com wordpress themes
preload preload preload