京都ラーメン食ったマップを使って簡単Google Maps API

Googleマップのマイマップでつくった京都ラーメン食ったマップを、Google Maps APIを使ってこのサイトに埋め込んでみました。

京都ラーメン食ったマップ
(サイドメニューのPagesにも出てます)

Googleマップ側からKML形式で出力されるデータを取り込んでるので、Googleマップのマイマップで情報を更新すると、こちらにも自動的に反映されるのがいい感じです。

JavaScriptの解説

覚えるのがイヤ〜ン、ドキュメント読むのがダル〜いGoogle Maps APIですが、これは6行のJavaScriptで動いてます。
これが6行なら、ちょっとやってみようって気になるでしょ?ならない?
興味のある人はview sourceしながら下の解説を見てください。

まずはマップの生成
var map = new GMap2(document.getElementById('kyoto_ramen_map'));
実質idを指定するだけです
(事前にdiv要素にIDを振って、style定義で幅と高さを与えておきましょう)

スクロールや拡大縮小のための小さなコントロールを追加します
map.addControl(new GSmallMapControl());

次に、扱いたいマイマップをGoogleマップで表示し、「このページへのリンク」をクリックして、URLを得ます
「京都ラーメン食ったマップ」の場合は
http://maps.google.com/maps/ms?ie=UTF8&hl=ja&msa=0&msid=112656633121951481930.0004349c12830d709f20a&ll=35.026974,135.781145&spn=0.049973,0.060768&z=14&om=1
となります
このURLの中にll=35.026623,135.749989というのがあり、これが表示されているマップの中心です

マップの中心と拡大率を指定します
map.setCenter(new GLatLng(35.026623,135.749989), 12);

さっきのURLに”&output=kml“という引数をつけると、マイマップデータをKML形式で得ることができます
var url = 'http://maps.google.com/maps/ms?msa=0&msid=112656633121951481930.0004349c12830d709f20a&ll=35.026623,135.749989&spn=0.099665,0.121708&z=13&om=1&output=kml';
(本来カットして良い引数があるはずですが、めんどくさいのでそのまま使ってます)

マイマップのKMLをロードして、マップに表示します
var geoxml = new GGeoXml(url);
map.addOverlay(geoxml);

WordPressでGoogle Maps APIを使うときの注意点

「投稿」じゃなくて「ページ」で作成
Google Maps APIのキーはURLに対して発行なので、通常の記事に使うと表示される場所によって動かなくなります(トップページからめくったり、月別やカテゴリ別アーカイブでURLのパスが変わる)。
今回は静的な「ページ」を作成し、ページスラッグを付けて、URLを固定しました。

TextControlプラグインでエスケープ回避
WordPressでは「投稿」にせよ「ページ」にせよ、改行をbrにされたり、クォートをエスケープされたりで、JavaScriptを本文中に書くことが難しいです。
TextControlというプラグインを使うと、記事やページごとにフォーマット形式を指定することができるようになり、本文をそのまま出力する「No Formatting」を指定することによりこの問題を回避することができます。

関連記事

コメントを書く

メールアドレスが公開されたり他で使われたりすることはありません* 印の項目は必須項目です。

*
(表示されません) *