2011年2月26日

GoogleMap API V3 その4

早速ですが、サンプルスクリプトを修正していきます。
まず、ルート案内の基本となるポイントの修正です。

これはgoogle mapsを見ながら通るポイントを見つけ、google mapsが導くルートと駅伝のルートが正しいことを確認しながらリストアップしてきます。本来であれば、中継所だけをポイントとしておいておくのが一番スッキリするのですが、google mapsが近道を探し出したりしてしまうので、中継所以外の交差点もポイントとして出しておく必要があります。

ですが、ここで大きな問題が...。
中継所+交差点などのポイントをリストアップしていくと、ルート案内としておくことができるポイントが足りなくなってしまいました...。Google Maps API V3のディレクションのドキュメントでは、ディレクションクエリのステータスとして、MAX_WAYPOINTS_EXCEEDEDの場合には最大のウェイポイント数は23+基点と終着地点ということになっているのに、基点+終着地点+ウェイポイントが10個で上記のステータスが出てしまいます。

なぜなのかはさっぱり分かりません。
仕方が無いので、ルート案内用のポイントと中継所用のポイントを別の配列で管理することにしました。


var examples = [{
latlngs: [
[35.312932,135.134513],
[35.304807,135.135814],
[35.311912,135.219952],
[35.387406,135.177171],
[35.304807,135.135814],
[35.312932,135.134513]
],
chukeis: [
[35.312932,135.134513, 'スタート・ゴール<br />三段池公園総合体育館'],
[35.309102,135.154281, '第1中継所<br />(太光バス停前)'],
[35.313659,135.183345, '第2中継所<br />(中丹養護学校前)'],
[35.342586,135.216513, '第3中継所<br />(太ヶ鼻バス停前)'],
[35.364335,135.201817, '第4中継所<br />(西坂集荷場前バス停前)'],
[35.379030,135.157333, '第5中継所<br />(千原砕石場先広場)'],
[35.363997,135.119171, '第6中継所<br />(夏間バス停前)'],
[35.350159,135.115858, '第7中継所<br />(筈巻天満宮前)']
],
mapType: google.maps.MapTypeId.ROADMAP,
travelMode: 'driving'
}

最初のlatlngsという配列はサンプルの通りルート用の配列です。別にchukeisという配列を準備し、中継所にポイントを出し、ポップアップウィンドウを表示させるようにしました。

mapTypeはROADMAP、travelModeはとりあえずdrivingに設定してあります。
function addAddress() は今回使いませんので、全部削除。
function addMarker(latlng, doQuery) についても、今回は画面上で新たなウェイポイントを追加しない前提ですので、ウェイポイントの数のチェックなどは行わせていません。
function updateElevation() も今回は使いません。
function calcRoute(travelMode) について、ウェイポイントにはマーカーを設置しませんので、stopverはfalseに設定します。
function addressKeyHandler(e)も今回は使いませんので、全部削除。
function loadExample(n)については、基点、終点、ウェイポイント以外に、中継所のマーカーを設置しますので、


for (var i = 0; i < examples[n].chukeis.length; i++) {
var latlng = new google.maps.LatLng(
examples[n].chukeis[i][0],
examples[n].chukeis[i][1]
);

var myMarker = new google.maps.Marker({
position: latlng,
map: map
});

attachMessage(myMarker,examples[n].chukeis[i][2]);
}

だけを追加しました。


<div id="main">
<div class="course_title">
<table summary="コース図">
<tr>
<td><a href="#" onclick="loadExample(0); return false">全体</a></td>
<td><a href="#" onclick="loadExample(1); return false">第1区</a></td>
<td><a href="#" onclick="loadExample(2); return false">第2区</a></td>
<td><a href="#" onclick="loadExample(3); return false">第3区</a></td>
<td><a href="#" onclick="loadExample(4); return false">第4区</a></td>
<td><a href="#" onclick="loadExample(5); return false">第5区</a></td>
<td><a href="#" onclick="loadExample(6); return false">第6区</a></td>
<td><a href="#" onclick="loadExample(7); return false">第7区</a></td>
<td><a href="#" onclick="loadExample(8); return false">第8区</a></td>
</tr>
</table>
</div>

<div id="map_canvas" style="border: 1px solid black; width:666px; height:400px"></div>
<div id="chart_div" style="width:666px; height:200px" onmouseout="clearMouseMarker()"></div>
</div>

で、最後にhtmlを挿入して完成!

Google Maps JavaScript API v3 Example: Elevation Ekiden ver.

もっとスマートに作ることも出来るんでしょうけど、なんせ素人でチュートハンパなものですから、こんな力技でしか作ることが出来ません。
でも、それなりに見えるでしょ?

トラックバックURL

このエントリーのトラックバックURL:
http://blog.776town.net/mt/mt-tb.cgi/17

コメントする