Google maps API V3 のルート検索で、出発地と目的地のマーカー(アイコン)を独自のものにするには、どのように記述すればよろしいでしょうか?
デフォルトの設定では、出発地が“A”、目的地が“B”となっています。
以下、テストサンプルです。
http://itohiki119.iinaa.net/bousai/test.html
よろしくお願い致します。
No.3ベストアンサー
- 回答日時:
>>No.2 お礼
※関数の外(グローバルコード)に記述
// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.5,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/icon/F_red_ka …
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/fired …
});
function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);
var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);
endMarker.setPosition(legs.end_location);
endMarker.setMap(map);
map.fitBounds(routes.bounds); // 追記(自動的に...)
}
// 終了タグ直前にでも置く
</script>
No.2
- 回答日時:
>>No.1 お礼
// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#000',
strokeOpacity: 0.5,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'start.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'end.png'
});
function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);
var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);
endMarker.setPosition(legs.end_location);
endMarker.setMap(map);
}
...
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
func(response);
}
});
...
この回答への補足
すみません。m(_ _)m
どうもアップ出来ていないようです。
こちらでどうでしょうか。
http://itohiki119.iinaa.net/bousai/test03.js
よろしくお願い致します。
早速のご回答ありがとうございます。
修正したのですが、やはり連続して検索すると(住所を入力して、まず最初に検索した後、“車”を“歩き”にしたり、支部を変更すると…)ラインが重なってしまいます。
私の記述がおかしいのかもしれません。
それと、修正前は検索結果が画面の大きさに合わせて自動的に拡大、縮小できていたものが、出来なくなっています。
本当に厚かましいお願いで申し訳ないですが、マップの記述を下記にアップしましたので、修正箇所を示して頂けないでしょうか。
http://itohiki119.iinaa.net/bousai/test.txt
あとすこしのところで大きな壁にぶち当たってしまっています。
よろしくお願い致します。m(_ _)m
No.1
- 回答日時:
...
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//directionsDisplay.setDirections(response);
var routes = response.routes[0];
// ラインを引く
new google.maps.Polyline({
map: map,
path: routes.overview_path, // ルート座標
strokeColor: '#000',
strokeOpacity: 0.5,
strokeWeight: 5
});
var legs = routes.legs[0];
// 出発地マーカー
new google.maps.Marker({
map: map,
position: legs.start_location, // 出発地座標
icon: 'start.png' // 画像パス
});
// 目的地マーカー
new google.maps.Marker({
map: map,
position: legs.end_location, // 目的地座標
icon: 'end.png' // 画像パス
});
}
});
...
google.maps.PolylineOptions object specification
https://developers.google.com/maps/documentation …
google.maps.MarkerOptions object specification
https://developers.google.com/maps/documentation …
ご回答ありがとうございます。
早速教えて頂いたものを追記したところ、見事に出来ました!
しかしながら、新たな問題が・・・
ルート検索を連続で行なった場合、最初のルートが消えずに新たにラインやアイコンが現れてしまいます。
恐れ入りますが、この件についての追記はどうすればいいでしょうか。
すみません。よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- iPhone(アイフォーン) Google map のルート保存について 1 2022/05/13 11:50
- Google Maps Google Maps にお店の名前を表示する方法は? 2 2022/12/26 16:21
- シティサイクル・電動アシスト自転車 自転車での最適ルートを出してくれるアプリってあります? 1 2022/04/13 20:15
- Google Maps スマホでルート検索はどうやりますか パソコンならGoogleで地図というところからできますが 5 2023/08/12 13:08
- 国産車 「純正ナビ」と「スマホのナビ」の相違 5 2023/03/04 21:54
- Windows 10 Googleサイトのサイト内検索(虫眼鏡アイコン、検索ボックス)について 1 2022/04/08 12:16
- 地図・道路 カーナビタイムのルート検索結果について 枚方ー能登のルート 2 2022/08/07 13:03
- Google Maps Googleマップでは、連絡地下道がある場合、その地下道を通っての直通ルートは表示されないんですか? 1 2022/12/09 13:32
- その他(SNS・コミュニケーションサービス) Yahoo!とGoogle検索のしくみの違いを教えてください 2 2022/08/14 01:53
- Google Maps Googleマップで、現在地Aから目的地Cまでのルートや掛かる時間は分かります。 ある地点Bから、目 2 2022/04/02 16:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【javascript】住所から郵便番...
-
マイページはどこを開くの
-
ウインドウを毎回同じ位置、大...
-
デジタル時計の時刻合わせの方...
-
スクリプトって、何ですか?ど...
-
VBAで任意のウインドウのサイズ...
-
エクセルのシート上に別のシー...
-
リストビューをスクロールさせ...
-
別フォームから戻ったときのイ...
-
小さな表示窓の呼び方は
-
PL/Iについて、教えてください。
-
「Cancel = True」とはどういう...
-
Visual Basicから Spreadのスク...
-
子ウィンドウより親ウィンドウ...
-
Excelでワードアートや図を常に...
-
Excel VBAでの右クリックのポッ...
-
5ちゃんねる
-
PDFを(htmlのように)無限に縦...
-
表示するウィンドウのサイズを...
-
画面を閉じる。「いいえ」の場...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Yahoo地図でマーカーを表示した...
-
WordのVBAについて
-
VBAでオブジェクトがありません...
-
【javascript】住所から郵便番...
-
グーグルマップのリンクについて
-
aspのセレクトボックスにDBのデ...
-
ホームページビルダー16 地図...
-
Google マップにマーカーと同心...
-
JavaScriptでGoogleMAPの表示を...
-
GoogleMapお店の情報をJSONで取...
-
Yahoo地図で郵便番号からおおよ...
-
Google Maps API v2 現在位置か...
-
既存のgoogleマップに半径表示...
-
google mapに複数マーカーを設...
-
グーグルマップAPI+MySQLを使...
-
ホワイトボードに水性顔料マー...
-
グーグルマップV3のマーカー表...
-
グーグルマップ(Googlemap)を...
-
Google Map ルート
-
map = new google.maps.Mapで作...
おすすめ情報