- 締切済み
Googlemapsapi V=3ルート検索
Google maps API V=3でのルート検索について サイトに地図を表示させてルート案内や距離、時間が取得できるようにしたいと考えておりますが初心者のため、挫折しています。 上級者の皆様のご教示をいただきたく投稿させていただきました。 状況 まず、サイトに地図を表示させてマーカーを地図上に設置しました。 このページからボタン等でルート案内のページにアクセスするものを実現したいと考えています。 ルート案内を取得するにはGDirectionsクラスのオブジェクトを取得する必要があるとのことでした。 V２でのコードGBrowserIsCompatible、GUnloadがV3では対応していないとの情報もあり、GDirectionsクラスのオブジェクトの取得ができない（地図が表示されない）状況です。 参考サイトを探しているのですが、V3で応用できるものが見つかりませんでした。 参考サイト http://www.ajaxtower.jp/googlemaps/ 実現したい参考ページ ttp://www.fm-oze.co.jp/furusatokan/fruits/apple/y5.html この地図のページからルート案内のページへアクセスできるようにしたい。 ＊また、地図のページから直接googleのページに住所情報を保持してルート・乗り換え案内のページにアクセスする方法はないでしょうか。 ttp://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&ie=UTF8&hq=&z=16& よろしくお願いします。
- maido73
- お礼率83% (5/6)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
＞参考サイトを探しているのですが、V3で応用できるものが見つかりませんでした よくわかってませんが、本家のgoogleにAPIのリファレンスがありますけれど、それではダメなのでしょうか？ http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html ＞実現したい参考ページ これってＡＰＩで地図を表示しているわけではないみたいなので、参考サイトにあげられている方法とも違いますよね？ どのようにしたいのか、よくわかりませんが、とりあえず、（↑）のリファレンスに出ている方法でルートを表示する最低限のスクリプトを… （APIをよくわかっていませんので、かなり適当です。 サンプルなので、きちんと調べた上で修正してください。） ＊全角空白は半角に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> </head> <body> <div style="width:800px;"> <form action="#"> <p> ルート表示 出発地：<select name="from" onchange="calc_route(this.value)"> <option value="" selected>---</option> <option value="前橋">前橋</option> <option value="宇都宮">宇都宮</option> <option value="東京">東京</option> <option value="新潟">新潟</option> </select> </p> </form> <div id="route" style="width:145px; font-size:0.7em; float:left;"> </div> <div id='map' style="width:650px; height:600px;"></div> </div> <script type="text/javascript"> <!-- var d_service = new google.maps.DirectionsService(); var d_display = new google.maps.DirectionsRenderer(); var map, latlng = new google.maps.LatLng(36.659912, 139.077313); (function init(){ //地図を表示 map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: new google.maps.LatLng(36.6575, 139.076), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); d_display.setMap(map); d_display.setPanel(document.getElementById("route")); //マーカー表示 var marker = new google.maps.Marker({ position: latlng, map: map }); })(); //ルート検索・表示 function calc_route(v){ if(v){ d_service.route({ origin: v, destination: latlng, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) d_display.setDirections(result); else document.getElementById("route").innerHTML = " "; }); } else { document.getElementById("route").innerHTML = " "; } } //--> </script> </body> </html>
補足
不十分な説明、早々のご教示にも関わらず返信が遅れて申し訳ありませんでした。 実現したい参考ページ ttp://www.fm-oze.co.jp/furusatokan/fruits/apple/y5.html このページには、マーカーと吹き出しがあり、吹き出し内にリンクされている『ルート』から下記ページのように『ルート・乗り換え案内』のページに移動できます。 http://maps.google.co.jp/maps?daddr=%E5%8D%83%E8%91%89%E7%9C%8C%E6%B5%A6%E5%AE%89%E5%B8%82%E8%88%9E%E6%B5%9C1-1&hl=ja&ie=UTF8&sll=35.635568,139.88457&sspn=0.013376,0.014226&geocode=FXDBHwIdGnhWCCnvbcrDEX0YYDFJMP191MKObw&mra=prev&ttype=now&noexp=0&noal=0&sort=time&brcurrent=3,0x60187d1047835c47:0x89620b95c4d7f418,0&z=16&start=0 このようなことを考えています。 かなりハードルが高いですが、ご教示いただいた内容も参考にさせていただきたいと思います。 ありがとうございました。