iPhoneで最寄駅を検索＋道案内する方法 - PHP,MySQL,Flex,JSな日々＋イラストとか

せっかくiPhoneで緯度経度情報が簡単に取得できるようになったので、最寄駅を検索＋道案内をマッシュアップをしてみました。
こんな感じ

http://moeten.info/maidcafe/?m=iphone&type=gps4
使用するＡＰＩ

座標から最寄駅 API

こちらのＡＰＩはそのまんまで緯度経度を渡すと最寄駅データーが緯度経度情報付きで返ってきます。
ですのでJavaScriptでxmlをパースしてアイコンを設置すればＯＫ。
次にルート案内ＡＰＩ

ルート案内 API が日本でも使えるようになりました

こちらのAPIを使用すると２点の場所（緯度経度もＯＫ）を指定するだけでルートを描いてくれます。
上記２つのＡＰＩを組み合わせれば最寄駅検索と道案内ができちゃいます。
#javascriptなので、結構細かい処理が必要ですが、なるべくライブラリを使う方向で（＾−＾）
ソースはこちら。GoogleMapのAPIKEYは取得してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <title>Google Maps JavaScript API Example: Simple Directions</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="http://maps.google.com/maps?file=api&v=2.x&key=apikey" type="text/javascript"></script>
    <script type="text/javascript">
    var map;
    var directionsPanel;
    var directions;
    var htmlList   = new Array();
    var markerList = new Array();
    var sidebarList;
    var nowLat = "35.171289";
    var nowLon = "136.882725";
    //初期化関数
    function initialize() {
        //簡単にマップ作成
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng( nowLat , nowLon ), 16);
        //iPhoneで緯度経度取得
        getGps();
    }
    //iPhoneで緯度経度取得
    function getGps(){
        navigator.geolocation.getCurrentPosition( callback, handleError );
    }
    //緯度経度取得成功関数
    function callback(a){
        map.setCenter( new GLatLng( a.coords.latitude, a.coords.longitude ), 16);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        //現在位置にカスタムマーカーをマップに設定する
        var markerIcon        = new GIcon();
        markerIcon.image      = "http://moeten.info/flex/20090625_iphoneGpsTest4/iphone.gif";
        markerIcon.iconSize   = new GSize(30, 55);
        markerIcon.iconAnchor = new GPoint(-15, 27);
        nowLat = a.coords.latitude;
        nowLon = a.coords.longitude;
        var marker = new GMarker( new GLatLng( nowLat , nowLon ) , {icon:markerIcon} );
        map.addOverlay(marker);
        //最寄駅データーの取得
        downloadData();
        document.getElementById("sidebar").innerHTML = "最寄駅データーをダウンロード中です・・・";
    }
    //緯度経度取得エラー
    function handleError(a) {
        alert("fault");
    }
    //最寄駅データーの取得
    function downloadData(){
        var url = "http://moeten.info/flex/20080502_twitterAir/myproxy.php?u="+encodeURIComponent("http://www.ekidata.jp/api/s.php?lon="+nowLon+"&lat="+nowLat);
        GDownloadUrl( url , createMap );
    }
    //最寄駅データーの取得完了。XMLデーターからマーカーを作成していく
    function createMap(xmldata, statusCode){
        var xmlDoc = GXml.parse(xmldata);
        var markers = xmlDoc.documentElement.getElementsByTagName("station");
        for (var i = 0; i < markers.length; i++) {
            var lats       = markers[i].getElementsByTagName("lat");
            var lngs       = markers[i].getElementsByTagName("lon");
            var meters     = markers[i].getElementsByTagName("meter");
            var line_names = markers[i].getElementsByTagName("line_name");
            var names      = markers[i].getElementsByTagName("station_name");
            var lat        = parseFloat(GXml.value(lats[0]));
            var lng        = parseFloat(GXml.value(lngs[0]));
            var meter      = GXml.value(meters[0]);
            var line_name  = GXml.value(line_names[0]);
            var name       = GXml.value(names[0]);
            createMarker( lat ,lng , name , meter , line_name , i );
        }
        document.getElementById("sidebar").innerHTML = "<select onchange=dispMarker(this.value)>"
            +"<option>-最寄駅を選択-</option>"
            +sidebarList+"</select>";
    }
    //マーカー作成関数
    function createMarker( lat , lon , name , meter , line_name , i ){
        var marker = new GMarker( new GLatLng( lat, lon ) );
        markerList[i] = marker;
        htmlList[i]   = meter + 'm<br/>' + line_name + '<br/>' + name+ '<br/><a href="#" onClick="showRout('+i+')">route</a>';
        sidebarList  += "<option value=" + i + ">"+meter+"m"+line_name+name+"駅</option>";
        map.addOverlay(marker);
    }
    //現在位置から駅までのルート検索
    function showRout(i) {
        markerList[i].closeInfoWindow();
        directions = new GDirections(map);
        directions.clear();
        var points = new Array();
        points.push(new GLatLng(nowLat,nowLon));
        points.push(markerList[i].getLatLng() );
        directions.loadFromWaypoints(points);
    }
    </script>
<style type="text/css">
*{
  padding:0px;margin:0px;
}
</style
  </head>
  <body onload="initialize()">
    <div id="sidebar" style="padding:3px;"></div>
    <div id="map_canvas" style="width: 100%; height: 310px;"></div>
    <br/>
  </body>
</html>

参考リンク

＃あとは、終電案内とか作ってほしいもんです。