• 締切済み

GoogleMapで2点間のルート案内のやり方

Google Maps APIをつかって、２点間のルート案内を表示させたいのですが、 デフォルトでは、スタート地点がＡアイコン、ゴール地点がＢアイコンが表示されます。 たとえばこんなかんじ。 http://www.google-mapi.com/sample76_map.html このＡアイコン、Ｂアイコンを、自分で作成したアイコンにかえたいのです。 その方法はあるのでしょうか？

みんなの回答

回答No.1

単純にはできないようで、合せ技が必要のようです。 こちらに方法が載っています。 http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_direction_customicon.html

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. その他（プログラミング・開発）

関連するQ&A

  • GoogleMap開発

    Google Maps APIを利用したサンプルを作成しております。 ライセンス契約して自社内での利用も検討しています。 以下のようなサンプルを作成しようと考えているのですが、 実現可能であるかが分からず困っております。 ＜自社の配送ルートを毎日地図表示したい＞ ・スタート地点は固定です。 ・DirectionsServiceのルート検索ですと中継点に上限があるようですので、 　利用しない想定です。 (1)スタート地点から最も近い中継点を導きだして、そこまでのルートを 　地図に描画。 (2)上記(1)で求めた地点から最も近い中継点を導き出してルートを描画 これを繰り返して複数の中継点を回るルートを導き出したいと 考えております。 サンプルや参考情報などありましたらお教え頂けると幸いです。 以上です。

  • Google maps API V3 ルート検索

    Google maps API V3　のルート検索で、出発地と目的地のマーカー（アイコン）を独自のものにするには、どのように記述すればよろしいでしょうか？ デフォルトの設定では、出発地が“A”、目的地が“B”となっています。 以下、テストサンプルです。 http://itohiki119.iinaa.net/bousai/test.html よろしくお願い致します。

  • グーグルマップがおかしい！！ルート変更不可！

    グーグルマップがおかしいんです。 ルート検索をかけたのですが　そのルートが変なので質問しました。 例えば　Aというバス停がうちの家のすぐ近くにあるにも関わらず、 グーグルマップのルート案内では　「Bというバス停まで歩け」と いうふうに出るので困っています。 現在地は「Aバス停（バス）」からとしているのですが、 何故かグーグルマップは最寄りの「Aバス停」からバスを乗るのではなく　 距離の離れた「Bバス停」から乗れというルートになるのでしょうか？ 例えば　１０系統のバスに乗りたいとします。 「Aバス停」から１０系統のバスに乗る事が可能なのに、 わざわざ　ちょっと距離のある「Bバス停」から乗る　ルート案内になるのでしょう？ 後　そういうおかしいルートを変更する事ができると書いてあるURLを見つけ、 「Bバス停」からスタートするルートに置かれた○を、クリックとドラッグをして 変更しようとしたのですが変更が出来ないのです！ ○はピクリとも動かないし　変更もできない！ PCからもスマホ（アンドロイド）からも出来ないので困っています。 どうすれば　変なルートを変更する事ができますか？ ○（スタート地点とゴール地点）を動かす方法を教えてください。 【ルート変更の仕方URL】 http://enjoy.sso.biglobe.ne.jp/archives/google_map/ http://www.onikohshi.com/google-useful/routechang/

  • GoogleMapsでルート内の座標を認識したい

    Google Maps API で目的地を設定しそれまでのルートを表示することはできるのですが、そのルート上に数メートル間隔で座標をマーカーなどで表示させたり、100m毎くらいに座標を認識したいのですが可能でしょうか？ 可能であればAPIとどういったソースなのか教えてください。 よろしくお願いします。

  • Google Mapのマーカー非表示

    JavaScriptは初心者ですが、質問させてください。 Google Mapでルート表示をし、かつマーカー（おたまじゃくし）を非表示にしたいのですがGoogle Maps APIで可能でしょうか？またソースの例も教えていただけると嬉しいのですが。 よろしくお願いいたします。

  • google maps api v3のルート検索

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

    • ベストアンサー
    • AJAX
  • google maps api ルート線変更

    Google Maps JavaScript API v3　でルート検索で表示されるポリラインの色や太さを変更したいのですが行き詰ってます。 ネットで調べてますと、polylineOptionのstrokeColorやstrokeWeightなどで変更できるような事は書いてあるのですが、どうやってもうまくいきません。 Googleデベロッパーで紹介されています下記のルートサービスのひな形をもとにいろいろやっているのですが、どこにどのように記述すればいいのでしょうか。 ------------------------------------------------ var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsDisplay.setMap(map); } function calcRoute() { var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = { origin:start, destination:end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); } --------------------------------------------------

  • googlemapについて教えてください。

    googlemapでマーカーが追随するようにしたくて、function update(position)　の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>

  • [Google Maps API] 複数のマーカーをおく場合

    こんにちは。Google Maps APIでわからないことがあるので相談させてください。 一つの地図に複数のマーカーをおこうと思っています。(仮にA,B,C,Dのポイントとします。)各ポイントにはGEventを使って、クリックすると違う内容の吹き出しを表示させます。 A.htmlというファイルでは４地点が入って中心にAがあるように、B.htmlというファイルでは４地点が入って中心にBがあるように、mapを表示させたいのです。 なので吹き出しを表示させるためのscriptは外部ファイルにして共有、座標の中心を決めるためのscriptは各htmlファイルに設定したいと思うのですが、scriptを分けると地図が表示できなくなってしまいました。 (分けなければ外部にしてもしなくても表示できます) A,B,C,Dという地点はこれからも増える可能性があるため、できれば１つのファイルを共有したいのですが、いい方法があれば教えてください。よろしくお願いします。

  • 自分のHPを開く際に「このウェブサイトには別の Google Maps

    自分のHPを開く際に「このウェブサイトには別の Google Maps API キーが必要です。」と表示され困っています。 以前Google　Mapを自分のサイトに貼り付けようと思いGoogle Maps API キーを取得したのですが、今ではもうGoogle　Mapは使わないので削除したのですが、上に書いたように毎回、別のApiが必要ですと表示され困っています。表示しないようにするにはどうしたらいいでしょうか

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する