KenG Blog

前回の記事でも紹介した「経路マップ on Google Maps」。まずはこちらで地図の上に経路を引きます。…で、引いてみるとこんな感じになります。

次にそのソースを見てみると、いかにも経路ラインの座標っぽいのが見えますね。今回であれば…

var linePoints = [[35.643190,139.67093],[35.643076,139.67126],[35.642449,139.67093],[35.641115,139.67047],[35.641080,139.67067],[35.640757,139.67061],[35.640705,139.67119],[35.640208,139.67108],[35.640077,139.67174],[35.639170,139.67138]];

これです。こんなのゼロから自分で作れるわけないので、先の経路マップ on Google Mapsのような便利なサイトを利用するに限る。まさにマッシュアップの恩恵ってやつですね。

さて、これを前回のソースに付け足せばいいんですが、座標だけを指定してやっても実際の描画をしないことには、地図の上には表示されません。それにはこういう命令を書き加えてあげます

// ラインの描画
lat = linePoints[0][0];
lng = linePoints[0][1];

var centerPoint = new GLatLng(35.641184914634984, 139.6685028076172);

map.setCenter(centerPoint, 15);
var lineLatLngPoints = [];
for(i=0; i

なんじゃこれは!?　全然分からん!　と思われるでしょうけど、まあ、こういうものなのだってことで捉えておいてください。この中で書き換える必要があるのは、「var centerPoint = new GLatLng(35.641184914634984, 139.6685028076172); 」の一行のみ。他は手を加えず、コピペだけでOKです。

じゃあそれをどう変えるのかっていうと、これは地図の中心点を決めている命令文なんです。そこで、前のソースコードをよく眺めると「map.setCenter(new GLatLng(35.641184914634984,139.6685028076172),15);」という似たような一文が見つかるはず。もう何となく分かったと思いますが、「35.xxxx」で始まる数字を、さっきの一文の該当する箇所に。さらに「139.xxx」で始まる数字も該当するところにコピペしてやるんですね。

するとこんな感じで地図が表示されます。

地図データ ©2008 ZENRIN - 利用規約

おや、なんかマーカーまで表示されていますね。これも地図のソースに以下の命令文を書き加えてあげれば表示されます。書き換えのポイントは、どこにマーカーを表示させるかという座標の指定なわけですが、普通に考えれば経路ラインの終点座標をそのまま記入してあげればいいわけで、ここでは[35.639170,139.67138]の座標を逆にして、指定してあります。

じゃあ、ここまでの部分をソースにまとめると、こんな感じになるわけです。

さらに、マーカーにマウスカーソルを合わせると吹き出しが出てきて、その中にテキストや写真を表示させるなんて芸当もできるわけですが、要望があれば次回以降でまとめます。