google maps api v3のルート検索

解決済

質問者：isi999
質問日時：2013/07/02 13:46
回答数：3件

google maps api v3のルート検索でA,Bマーカーでなく、
オリジナルのマーカーにてドラッグ＆ドロップマウスで移動可能なルート検索を
javascriptで作るやり方が知りたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2013/07/03 21:01

ちょっと面白そうだったので、かなりいい加減ですが作ってみました。

とは言っても、ほとんど 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' …
</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 …|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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます、
助かりました。

通報する

お礼日時：2013/07/03 22:47

No.2

回答者： LancerVII
回答日時：2013/07/03 12:11

こんにちは。

ちょっと試せていないのですが、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;
で取得できると思います。