No.3ベストアンサー
- 回答日時:
ちょっと面白そうだったので、かなりいい加減ですが作ってみました。
とは言っても、ほとんど A No2様の回答そのままなので、説明は省略です。
独自マーカーは回答欄のコードだと表示しにくいので、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>
No.2
- 回答日時:
こんにちは。
ちょっと試せていないのですが、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;
で取得できると思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ストリートビューでマーカーク...
-
カンマ区切りのデータを配列に...
-
2つのGoogleMapsを1ページに表...
-
JavaScriptでtabindexの変更っ...
-
readyStateが4にならない原因
-
ajaxでエラー処理
-
ホームページについて
-
選択範囲のリンク URL の抽出
-
flame越しの命令
-
Yahoo!ウィジェットのgetElemen...
-
googleマップがWinIEのみエラー...
-
bxsliderで巻き戻しにする方法
-
AjaxでJSONを受信すると、文字...
-
Ajaxでフォームデータを連続登...
-
ajaxでPHPにPOST送信して結果デ...
-
アコーディオンで多階層のメニ...
-
jQuery を外部ファイルから呼び...
-
【再質問】計算(入数*単価)...
-
連番タイトル名を基準にリンク...
-
<input>のvalue値をプルダウン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
二つのbxsliderをレスポンシブ...
-
カンマ区切りのデータを配列に...
-
Googleマップのピンをクリック...
-
たくさんの経由地がある巡回ル...
-
googleマップが表示されない。
-
C言語の 配列の中 出力について
-
google maps api v3のルート検索
-
グーグルマップにマーカーを色...
-
how's whether today in yufuin?
-
Google maps api v3と印刷について
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
readyStateが4にならない原因
-
階層別の組織図の自動作成について
-
[jQuery UI] sortableを使いaja...
-
JavascriptからPHPへのAjax通信...
-
AjaxでJSONを受信すると、文字...
-
jQueryのblockUIをformのボタン...
-
.txtファイルの読み込み
-
SQLのmaxで求めた値を変数に代...
おすすめ情報