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.

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

2011年2月25日

GoogleMap API V3 その3

サンプルのとおり作成し、このブログにウェブページとしてサンプルを載せようと思ったのですが、断続的にjavascriptのエラーが発生して正常に動きません。

firebugで見る限りでは、Google Maps JavaScript API v3 Example: Elevationのスクリプトにエラーが発生しているようです。
ただ、Google Maps JavaScript API v3 Example: Elevation単独でのページであれば何もエラーが発生しないので、このブログに使っているjavascirptと何か競合しているのかと思い、順番にスクリプトをはずしていくと、prototype.jsをはずすと正常に動作しました。
setMapがprototype.jsのmapと競合しているんだと思うのですが、無知でチュートハンパな私には解決方法は全く分かりません。ということで、このブログのカレンダーをprototype.jsではなくjQueryのカレンダーに変更することにしました。

手順はいつもの小粋空間さんの手順どおり進めていきます。Ajax 月送りカレンダー(jQuery・MT4版)の記事をよく読み、scriptをダウンロードして、サーバーにアップロードし、各種テンプレートを変更して、再構築!で、OKです。

で、完成したサンプルページがこのページです。

Google Maps JavaScript API v3 Example: Elevation

これから、また駅伝用に修正をしていきたいと思います。

2011年2月24日

GoogleMap API V3 その2

GoogleMapAPIもV3になってから簡単になりました。


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

って読み込むだけですね。

以下の部分でルート検索、標高用のグラフの初期化をしています


<script type="text/javascript">
  var map = null;
  var chart = null;

  var geocoderService = null;
  var elevationService = null;
  var directionsService = null;

  var mousemarker = null;
  var markers = [];
  var polyline = null;
  var elevations = null;

  var SAMPLES = 256;

 var examples = [{
    // Lombard St
    latlngs: [
      [37.801000, -122.426499],
      [37.802051, -122.419418],
      [37.802729, -122.413989]
    ],
    mapType: google.maps.MapTypeId.ROADMAP,
    travelMode: 'driving'
  },{
    // Mount Everest
    latlngs: [
      [27.973323, 86.908035],
      [28.020614, 86.960906]
    ],
    mapType: google.maps.MapTypeId.TERRAIN,
    travelMode: 'direct'
  }];

SAMPLESというのは標高表示グラフの解像度になります。数値を大きくすると細かいグラフになりますし、小さくすると荒いグラフになります。ただ、Google Elevation APIで512までに制限されているようです。

このケースだと、examplesという配列に緯度・経度の情報、地図のタイプ、移動方法の選択をします。

mapTypeはROADMAPを選択し、travelModeはwalkingあたりを選択しておけば問題ないと思います。で、上から順番にexamples[0],examples[1]という配列になり、後でルートを選択する場合にはその番号を使用します。

今回は基本的にサンプルのjavascriptをとりあえずはそのまま使用します。

GoogleMap API V3 その1

今回は管理、運用している別サイトの話。

京都府民総合体育大会市町村対抗駅伝 のホームページを管理しています。

その中でコース紹介のページを作っているのですが、面倒でPDFファイルを貼り付けていただけなのでうすが、どうも面白くないので、GoogleMapAPIのルート案内を使ってみることにしました。

ただ、単にルート案内だけを導入しても面白くない。

そこで、Google先生に聞いてみますと、高低差表示ができるページが紹介されていましたので、さっそくそちらの高低差表示も含めたコース紹介を導入することにしました。

実は、当初はGoogleMapAPIのルート案内ではなく、Yahoo!のルートラボを使用しようと考えていたのですが、ホームページに貼り付けたときにどうも他のページとの整合性が取りにくく、細かいカスタマイズができない。で、結局GoogleMapAPIを使って地図を貼り付ける形に落ち着きました。

で、再度Google先生にお伺いしたところ、http://gmaps-samples-v3.googlecode.com/svn/trunk/elevation/elevation-profile.htmlなるページがヒットしました。

ソースを見る限り、それほど複雑な仕組みにはなっていないようですので、解析しながらおいおい設置したいと思います。