Googleマップのマイマップでつくった京都ラーメン食ったマップ [1]を、Google Maps APIを使ってこのサイトに埋め込んでみました。
→京都ラーメン食ったマップ [2]
（サイドメニューのPagesにも出てます）
Googleマップ側からKML形式で出力されるデータを取り込んでるので、Googleマップのマイマップで情報を更新すると、こちらにも自動的に反映されるのがいい感じです。

JavaScriptの解説
覚えるのがイヤ〜ン、ドキュメント読むのがダル〜いGoogle Maps APIですが、これは６行のJavaScriptで動いてます。
これが６行なら、ちょっとやってみようって気になるでしょ？ならない？
興味のある人はview sourceしながら下の解説を見てください。
まずはマップの生成
var map = new GMap2(document.getElementById('kyoto_ramen_map'));
実質idを指定するだけです
（事前にdiv要素にIDを振って、style定義で幅と高さを与えておきましょう）
スクロールや拡大縮小のための小さなコントロールを追加します
map.addControl(new GSmallMapControl());
次に、扱いたいマイマップをGoogleマップで表示し、「このページへのリンク」をクリックして、URLを得ます
「京都ラーメン食ったマップ」の場合は
https://maps.google.com/maps/ms?ie=UTF8&hl=ja&msa=0&msid=1126566331219514...
となります
このURLの中にll=35.026623,135.749989というのがあり、これが表示されているマップの中心です
マップの中心と拡大率を指定します
map.setCenter(new GLatLng(35.026623,135.749989), 12);
さっきのURLに”&output=kml“という引数をつけると、マイマップデータをKML形式で得ることができます
var url = 'https://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 [3]というプラグインを使うと、記事やページごとにフォーマット形式を指定することができるようになり、本文をそのまま出力する「No Formatting」を指定することによりこの問題を回避することができます。

[1] https://maps.google.com/maps/ms?ie=UTF8&hl=ja&msa=0&msid=1126566331219514...
[2] https://www.ryo.com/ryo/kyoto_ramen/
[3] https://dev.wp-plugins.org/wiki/TextControl

投稿者： ほそいりょすけのほめぱげ 投稿日時： 2007年7月21日(土) 21:11