- 締切済み
Googlemapsapi V=3ルート検索
Google maps API V=3でのルート検索について サイトに地図を表示させてルート案内や距離、時間が取得できるようにしたいと考えておりますが初心者のため、挫折しています。 上級者の皆様のご教示をいただきたく投稿させていただきました。 状況 まず、サイトに地図を表示させてマーカーを地図上に設置しました。 このページからボタン等でルート案内のページにアクセスするものを実現したいと考えています。 ルート案内を取得するにはGDirectionsクラスのオブジェクトを取得する必要があるとのことでした。 V２でのコードGBrowserIsCompatible、GUnloadがV3では対応していないとの情報もあり、GDirectionsクラスのオブジェクトの取得ができない（地図が表示されない）状況です。 参考サイトを探しているのですが、V3で応用できるものが見つかりませんでした。 参考サイト http://www.ajaxtower.jp/googlemaps/ 実現したい参考ページ ttp://www.fm-oze.co.jp/furusatokan/fruits/apple/y5.html この地図のページからルート案内のページへアクセスできるようにしたい。 ＊また、地図のページから直接googleのページに住所情報を保持してルート・乗り換え案内のページにアクセスする方法はないでしょうか。 ttp://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&ie=UTF8&hq=&z=16& よろしくお願いします。
- maido73
- お礼率83% (5/6)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
＞参考サイトを探しているのですが、V3で応用できるものが見つかりませんでした よくわかってませんが、本家のgoogleにAPIのリファレンスがありますけれど、それではダメなのでしょうか？ http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html ＞実現したい参考ページ これってＡＰＩで地図を表示しているわけではないみたいなので、参考サイトにあげられている方法とも違いますよね？ どのようにしたいのか、よくわかりませんが、とりあえず、（↑）のリファレンスに出ている方法でルートを表示する最低限のスクリプトを… （APIをよくわかっていませんので、かなり適当です。 サンプルなので、きちんと調べた上で修正してください。） ＊全角空白は半角に <!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'></script> </head> <body> <div style="width:800px;"> <form action="#"> <p> ルート表示 出発地：<select name="from" onchange="calc_route(this.value)"> <option value="" selected>---</option> <option value="前橋">前橋</option> <option value="宇都宮">宇都宮</option> <option value="東京">東京</option> <option value="新潟">新潟</option> </select> </p> </form> <div id="route" style="width:145px; font-size:0.7em; float:left;"> </div> <div id='map' style="width:650px; height:600px;"></div> </div> <script type="text/javascript"> <!-- var d_service = new google.maps.DirectionsService(); var d_display = new google.maps.DirectionsRenderer(); var map, latlng = new google.maps.LatLng(36.659912, 139.077313); (function init(){ //地図を表示 map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: new google.maps.LatLng(36.6575, 139.076), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); d_display.setMap(map); d_display.setPanel(document.getElementById("route")); //マーカー表示 var marker = new google.maps.Marker({ position: latlng, map: map }); })(); //ルート検索・表示 function calc_route(v){ if(v){ d_service.route({ origin: v, destination: latlng, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) d_display.setDirections(result); else document.getElementById("route").innerHTML = " "; }); } else { document.getElementById("route").innerHTML = " "; } } //--> </script> </body> </html>
関連するQ&A
- GoogleMapsApiで海外ルート検索できない
Google Maps Api v2を使ってルート検索を行うWebアプリケーションを作成しました。 国内の検索は問題ないのですが、国外（韓国）の検索だけエラーが返って来てルート検索できません。 ロケールをko_KRにしても一緒でした。 Apiに渡すポイント情報は地名でなく緯度経度にしています。 どなたか原因が分かる方がいましたらよろしくお願いいたします。
- 締切済み
- AJAX
- GoogleMapsAPI Key取得ができない
HPを変更しました。 google maps を入れたいのです。 しかし、下記コメントが出てます。 このウエブサイトには 別のgoogle maps apiキーが必要です。新しいキーは http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key で作成できます。 ここを調べて見ても、apiキーが取得できません。 Google Maps APIを使うための API Key の取得が、V3では不要になりました。 と書いてありますが、現状api keyを取得しないと、使えません。 いろいろ調べたのですが、v2の取得方法は書いてありますが、現状では役に立ちません。 http://code.google.com/intl/ja/apis/maps/signup.html で登録できないから、質問しています。 具体的なやり方を教えてください。
- 締切済み
- HTML
- GoogleMapAPIv3でルート上の座標を取得
http://okwave.jp/qa/q6978088.html 上記URLの過去の質問を見て疑問に思いましたので質問させていただきます。 上記URLでもありましたようにルート上の座標を取得しようとして var arr; var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { // ヒットした結果を表示 directionsDisplay.setDirections(result); arr = result.routes[0].overview_path; // ルートの全行程を表す } }); alert(arr.length); と記述しました。 arr には経路検索のルート上の座標が含まれているのですがこれを 取り出すためにはどうすればよいでしょうか。取り出してgoogleMap上にマーカーとして 表示したいと思っています。 directionsService.route（）{ } の外では alert(arr.length); と記述しても 「lengthの値を取得できません。オブジェクトがNullまたは未定義です。」 となりarrを取得できないようです。 また、仮に取得できるようになったとして取得した座標の配列を どうやって地図上にマーカーとして表示させればよいでしょうか。 今はマーカーを表示させるのに var markerOpts4 = {position: new google.maps.LatLng(36, 137), map: mapObj} var marker4 = new google.maps.Marker(markerOpts4); というように１つずつマーカーを設定しています。 取得した座標の配列を上記の記述方法にどう組み込めばよいのかいまいちよくわからないです。
- ベストアンサー
- JavaScript
- GMap Api V3で中心マーカーを表示させたい
Google Maps Api V3で地図を作っています。 描画した地図の中心に十字マーカーを表示させたいのですが、どのようにすればいいのでしょうか？ マーカー表示はできたのですが、地図をドラッグすると、地図と一緒に移動してしまいます。 dragイベント中に再描画すればいい・・・と考えましたが、具体的にどのようなソースを書けばいいのかわかりません。 ネットで探しているのですが、V2ばかりで、それをV3に応用することができませんでした。 下記URLのようなものをV3で実現したいと考えています。 http://googlemaps.googlermania.com/google_maps_api_v2/map_4-2.html V3で紹介してあるサイトをご存知の方は教えていただけないでしょうか。 ソースを直接ご指導いただける方でも大歓迎です。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- Google Maps API ルート検索
Google maps API V3でルート検索をする場合、 <input type="submit" value="検索" onclick="searchRoute()"> として、検索ボタンを押さないとルートが表示されないようにしたいのですが、検索する住所が ”ある市”（市町村）に限られている場合、あらかじめ検索窓に”○○市”と表示させておき、”○○市”の後に町名や番地を入力して、それから検索ボタンを押すことで初めて地図上にルートを表示させたいのですが、記述をどうすればよいか悩んでおります。 <input type="text" size="20" id="toAddress" name="to" value="○○市"> とすると、いきなり”○○市”の代表地点までのルートが表示されてしまいます。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- GoogleMapsAPIが表示されません
以下は、GoogleMapsAPIを表示させる部分のみを抜き取ったコードです。 これに併せてGoogleMapsDiretionsサービスを使った経路検索も設置してあります。そちらの経路選択は表示されるのですが、GoogleMapsAPIだけが表示されない現状です。 ・変数名の整合性 ・APIキー（v3は必要なし？） の2点は確認しました。 どうかアドバイスをお願い致します。 ------------↓コード部分↓（test.php）------------ <?php /*----------------------------------------------------------------------------- 概要 : : 作成者 : 作成日 : 更新履歴 : -----------------------------------------------------------------------------*/ // HTTPヘッダーで文字コードを指定 header("Content-Type:text/html; charset=UTF-8"); //--------処理部--------- //検索用クッキー削除 if(isset($_COOKIE["CoSrch"])){ setcookie("CoSrch", "", time() - 3600); } //--------処理部ここまで--------- ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="css/gmapv3.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> $(function(){ var renderFLG=false; var directionsDisplay; var directionsService=new google.maps.DirectionsService(); var map,mode; var currentDirections=null; var startSpot="東京駅"; var endSpot="六本木ヒルズ"; initialize(); /* 地図初期化 */ function initialize() { var myOptions={ zoom:14, center: new google.maps.LatLng(35.670236,139.749832),//虎の門 mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図オブジェクト生成 */ map=new google.maps.Map(document.getElementById("map"), myOptions); if(!renderFLG) render(); calcRoute(startSpot,endSpot); } } </script> <style> #map { float:left; width:70%; height:100%; } #side { float:right; width:30%; height:100%; } #side .inner { padding:10px; overflow:auto; } </style> </head> <body> <h1>設置サンプル</h2> <p>「東京駅」から「六本木ヒルズ」までルートを検索し、右カラムにルート検索結果を表示します。 出発地点A・到着地点Bのマーカーをドラッグすると、それぞれの地点を変更されます。右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード（自動車、自転車、電車、徒歩）を切り替えられます。</p> <div id="map"><!-- 地図の埋め込み表示 --></div> <br clear="all" /> </body> </html>
- 締切済み
- JavaScript
- google maps api v3のルート検索
google maps api v3のルート検索でA,Bマーカーでなく、 オリジナルのマーカーにてドラッグ＆ドロップマウスで移動可能なルート検索を javascriptで作るやり方が知りたいです。
- ベストアンサー
- AJAX
- Google Maps API は利用申請が必要？
現在Google Static Maps API（Google Maps API）を使用して、地図表示をするページを作成しようとしているのですが、自社webサイトに掲載するために必要な手続きなどがあれば教えていただきたいです。 やろうとしていることは、 QRコードから入れるwebモバイルサイト内に店舗ごとのページがあって、「地図を表示」のリンクをからジャンプするとGoogle Static Maps APIを使用した地図を表示…といったものです QRを読むか、アドレスを入力すれば誰でも閲覧できるページにするので、利用規約上は問題ないと思っているのですが お知りの方がいたらしたら、ご回答くだされば助かります。
- ベストアンサー
- その他（プログラミング・開発）
- GoogleMapsAPIの表示のカスタマイズ
食べログの地図を見ていると、GoogleMapsAPI を使っているのに、 例えば高速道路のジャンクションやパーキングエリアは表示されていません。 正確にいうと、クリックしても吹き出しが出ないようになっています。 このように特定の要素でクリックしても吹き出しが出ないようにしたいのですが… https://developers.google.com/maps/documentation/javascript/styling?hl=ja#map_features https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapTypeStyleFeatureType この辺りがヒントのように思うのですが、力尽きてしまいました。 わかる方がおられましたらよろしくお願いします。
- ベストアンサー
- HTML
- 地図：バスのルート検索
googleでもyahooでも何でもいいのですが、地図検索でルートを調べたいのですが、電車ではルート検索できるのですが、バスのルート検索できません。 バスのルート検索ができるサイトとそのやり方を教えてください。 回答よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
補足
不十分な説明、早々のご教示にも関わらず返信が遅れて申し訳ありませんでした。 実現したい参考ページ ttp://www.fm-oze.co.jp/furusatokan/fruits/apple/y5.html このページには、マーカーと吹き出しがあり、吹き出し内にリンクされている『ルート』から下記ページのように『ルート・乗り換え案内』のページに移動できます。 http://maps.google.co.jp/maps?daddr=%E5%8D%83%E8%91%89%E7%9C%8C%E6%B5%A6%E5%AE%89%E5%B8%82%E8%88%9E%E6%B5%9C1-1&hl=ja&ie=UTF8&sll=35.635568,139.88457&sspn=0.013376,0.014226&geocode=FXDBHwIdGnhWCCnvbcrDEX0YYDFJMP191MKObw&mra=prev&ttype=now&noexp=0&noal=0&sort=time&brcurrent=3,0x60187d1047835c47:0x89620b95c4d7f418,0&z=16&start=0 このようなことを考えています。 かなりハードルが高いですが、ご教示いただいた内容も参考にさせていただきたいと思います。 ありがとうございました。