GoogleマイマップとGoogle Maps API
■Googleマイマップで描いた地図をGoogle Maps APIで貼り付ける方法 （geekなぺーじ さん）
検索してたらたまたま見かけた記事ですが。
ついにKMLとGoogle Maps APIの融合がキターッ！ って感じです。これでGoogleマイマップの「KMLエディタ」としての役割がクローズアップされて来たと思います。
今現在の私の使い方で言うと、GoolgeマイマップとGoogle Maps APIを両方使っています。「Kanon」札幌探訪記の例で言うと、こんな↓感じです。
「Kanon」札幌探訪記 （Google Maps APIを使用）
京アニ「Kanon」マップ−札幌− （Googleマイマップを使用）
Googleマイマップを別に作っている理由は、Googleの地図検索で、「ユーザーによるコンテンツ」で例えば「Kanon」と検索するとこんな感じになってしまうように、
「何てこった！ 現実の場所を調べているのにアニメやゲームの場所がヒットするぜ！」
と思わせるためのイタズラ心から来てます（笑）
同様に、「神尾家」で検索すると、今やこうなってしまうわけです。
我ながらバカですね（笑）
だけど、これまではこの２つの間のインターフェースが提供されていなかったため、GoogleマイマップとGoogle Maps APIは別個のものとなっていました。
特にGoogle Maps APIの方はJavaScriptのプログラムなので、完全に手作業の世界で、その作成の手間は繁雑です。
例えば、「Kanon」札幌探訪記で言うと、JavaScriptの記述は、↓これだけ書いています。
−−− ↓以下、JavaScriptプログラム −−−
var map;
var markers = new Array(32);
function startUp() {
map = new GMap2(document.getElementById("mymap"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(43.055969766809476, 141.325), 13);
addMarker(new GLatLng(43.032607759057385, 141.36190474033356), 0);
/* --- 以下、26行略 --- */
addMarker(new GLatLng(43.078895790391115, 141.29845440387726), 27);
}
function addMarker(latlng, num) {
var icon = new GIcon();
icon.image = "markers/marker"+num+".png";
icon.iconSize = new GSize(20,34);
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(20, 10);
markers[num] = new GMarker(latlng, icon);
map.addOverlay(markers[num]);
var f = function() {
switch (num) {
case 0:
markers[num].openInfoWindowHtml("<table border=0><tr><td><img src='kanon-tv1/sapporo0s.jpg' /></td><td><div class='infowin'>真琴と歩く高架横<br />第8話<br /><a href='kanon-tv1-1.htm#txt0' onClick='map.closeInfoWindow()'>⇒旅行記へ</a></div></td></tr></table>");
break;
/* --- 以下、case 1〜Case 26まで略 --- */
case 27:
markers[num].openInfoWindowHtml("<table border=0><tr><td><img src='kanon-tv1/sapporo27s.jpg' /></td><td><div class='infowin'>栞と別れた道<br />第17話<br /><a href='kanon-tv1-4.htm#txt27' onClick='map.closeInfoWindow()'>⇒旅行記へ</a></div></td></tr></table>");
break;
default: break;
}
};
GEvent.addListener(markers[num], "click", f);
if ((num > 8) && (num < 16)) {
var marker_field = document.getElementById('mark'+ num);
var fzoom = function() {
f();
map.panTo(latlng);
map.setZoom(15);
}
marker_field.onmousedown = fzoom;
}
}
if (GBrowserIsCompatible()) {
onload=startUp;
onunload=GUnload;
}
−−− ↑以上、JavaScriptプログラム −−−
10行目からの、
addMarker(new GLatLng(43.032607759057385, 141.36190474033356), 0);
/* --- 以下、26行略 --- */
addMarker(new GLatLng(43.078895790391115, 141.29845440387726), 27);
この位置情報をどうやって取得してるかというと、↓のような自作ツールを使っています。
http://www7a.biglobe.ne.jp/~uso9000/diary/test/ichi.htm
クリックすれば分かると思いますが、クリックした場所の緯度・経度が表示されます。これを使って、旅行の後で地図上で再度探して、クリックして得た緯度・経度情報を手でエディタを使って先のプログラム部分に埋め込んでいくわけです。
SONYのGPS-CS1Kも持ってますが、位置情報の精度が芳しくないので、直接使わずに参考データとしてだけ使っています。
以上を見ていただければ、現状ではGoogleマイマップとGoogle Maps APIの自作地図をそれぞれ作ろうとすると、完全に二度手間になってしまうのが分かると思います。
さて、前置きが（ホントに…）長くなりましたが、ここからが本題。
今回追加された「Googleマイマップ取り込みAPI」を使うとどうなるかと言うと、既にGoogleマイマップを作成済みならば、プログラム冒頭の28行の部分が、下記↓のように２行で済んでしまいます。
var gx = new GGeoXml("http://www7a.biglobe.ne.jp/~uso9000/travel/kanon-tv1/kanon-tv1.kml");
map.addOverlay(gx);
この記述を使ってためしに書いてみたのが、↓こちらです。
「Kanon」札幌探訪記(Googleマイマップ取り込みテスト版）
場所の緯度・経度情報を手で取得＆入力する手間が無くなりました。ヤッホウ！
…なのですが、ここで、「地図上のマーカ→記事」には飛べるけど、「記事→地図のマーカ」に飛べない事に気づいた方は鋭い！
実は、このAPI関数だけでは足りないんです。
最初のプログラムの中で、
var marker_field = document.getElementById('mark'+ num);
と記述している部分が、地図上のマーカに外部（記事部分=HTML）からのイベントトリガを埋め込む箇所なんですが、これをKMLデータ中のマーカに対応させるAPIが用意されていないのです。
惜しい、あともう一歩！
ですが、そのAPI関数が用意されるのもそう遠くないことでしょう。
Googleの今後の更新を首を長くして待ちたいと思います。
（実は既にリリースされているのかも？ Googleの本家の英文のサイトを読んでないもので…汗）
