Google maps API V3 のルート検索で、出発地と目的地のマーカー(アイコン)を独自のものにするには、どのように記述すればよろしいでしょうか?
デフォルトの設定では、出発地が“A”、目的地が“B”となっています。
以下、テストサンプルです。
http://itohiki119.iinaa.net/bousai/test.html
よろしくお願い致します。
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 …
ご回答ありがとうございます。
早速教えて頂いたものを追記したところ、見事に出来ました!
しかしながら、新たな問題が・・・
ルート検索を連続で行なった場合、最初のルートが消えずに新たにラインやアイコンが現れてしまいます。
恐れ入りますが、この件についての追記はどうすればいいでしょうか。
すみません。よろしくお願い致します。
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.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>
お探しの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ランキング
-
ホームページビルダー16 地図...
-
iPhoneサイトにgooglemapを掲載...
-
LightWindowのサイズがおかしい...
-
map = new google.maps.Mapで作...
-
googlemapsとjavascriptの勉強...
-
マイページはどこを開くの
-
デジタル時計の時刻合わせの方...
-
デスクトップ画面を4分割するには
-
ウインドウを毎回同じ位置、大...
-
Excelでワードアートや図を常に...
-
エクセルのシート上に別のシー...
-
ポップアップウィンドウがブロ...
-
Javascript_submit()完了後に処...
-
5ちゃんねる
-
エクセルVBAでフォームのListbo...
-
【Android】ユーザー補助機能ボ...
-
リストビューをスクロールさせ...
-
スライドショーを全画面でなく...
-
Excelで一部分だけを常に表示さ...
-
PDFを(htmlのように)無限に縦...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Yahoo地図でマーカーを表示した...
-
VBAでオブジェクトがありません...
-
【javascript】住所から郵便番...
-
WordのVBAについて
-
googlemapで複数条件絞り込みで...
-
GoogleMap のマーカーに数値を...
-
GoogleMapsでルート内の座標を...
-
GoogleMapお店の情報をJSONで取...
-
google map の画面サイズを小さ...
-
Google Map Api 複数のマーカ...
-
Google マップにマーカーと同心...
-
逆ジオコーディングについて
-
ホワイトボードに水性顔料マー...
-
spanの位置、サイズを取得したい
-
PHPで入力された住所で地図表示
-
googlemap api で複数マーカー表示
-
ホームページの案内地図をマッ...
-
入力した住所の画面内でグーグ...
-
グーグルマップ(Googlemap)を...
-
Google maps API 吹き出しに画像
おすすめ情報