- ベストアンサー
google maps api v3のルート検索
google maps api v3のルート検索でA,Bマーカーでなく、 オリジナルのマーカーにてドラッグ＆ドロップマウスで移動可能なルート検索を javascriptで作るやり方が知りたいです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと面白そうだったので、かなりいい加減ですが作ってみました。 とは言っても、ほとんど A No２様の回答そのままなので、説明は省略です。 独自マーカーは回答欄のコードだと表示しにくいので、googleさんのchart iconを利用して、これまたテキトーです。 参考にもならないかも知れませんが… （マーカーのアニメーションが無い方が良さそうですが、draggableにすると、なってしまうみたい） （全角空白は半角に） <!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 id='map' style='width:800px; height:600px;'></div> <script type="text/javascript"> (function(){ //地図表示 var mapDisp = function(lat, lng, id){ return new google.maps.Map(document.getElementById(id), { zoom: 13, center: new google.maps.LatLng(lat, lng), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); } //マーカー作成（仮マーカー） var createMarker = function(lat, lng, mark){ var icon = { anchor: {x:0, y:37}, url: "http://chart.apis.google.com/chart?chst=d_bubble_icon_text_small_withshadow&chld=glyphish_walk|bb|" + mark + "|000000" } var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map, draggable: true, icon: icon }); google.maps.event.addDomListener(marker, 'dragend', route); return marker; } //経路検索 var route = function(){ var request = { origin: start.getPosition(), destination: goal.getPosition(), travelMode: google.maps.DirectionsTravelMode.DRIVING }; directS.route(request, function(response, status){ if (status == google.maps.DirectionsStatus.OK){ directDisp.setDirections( response ); } }); } var map = mapDisp(35.68, 139.75, "map"); var directS = new google.maps.DirectionsService(); var directDisp = new google.maps.DirectionsRenderer(); directDisp.setMap(map); directDisp.setOptions({markerOptions: { visible:false }}); var start = createMarker(35.71, 139.76, "%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88|00CCFF"); var goal = createMarker(35.65, 139.76, "%E3%82%B4%E3%83%BC%E3%83%AB|88FF00"); })(); </script> </body> </html>
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 ちょっと試せていないのですが、A,Bポイントを表示しないオプションがありますのでルート探索時にそのオプションを設定し、 ステート地点とゴール地点の座標をルート探索結果のスタートとゴール地点の座標に任意のアイコンをプロットすれば良いと思います。 DirectionsRendererのsetOptionsに suppressMarkersというプロパティがありますのでこちらをtrueにするとデフォルトのアイコンが表示されません。 directionsService.route ( request, function(response, status) { if ( status == google.maps.DirectionsStatus.OK ) { directionsDisplay.setDirections ( response ); } }); 上記のようなかんじで探索を実行していると思います。 responseの中にスタート地点とゴール地点の情報が入っていますのでその座標でマーカーを生成すればOKです。 Firebugで見ればわかると思いますが、 var startLocation = response.routes[0].legs[0].start_location; で取得できると思います。
お礼
ありがとうございます、 助かりました。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 基本的な部分は作ってありますか？
補足
A,Bマーカーにてドラッグ＆ドロップマウスで移動可能なルート検索は作りました。
お礼
ありがとうございます、 助かりました。