プロが教えるわが家の防犯対策術！

Googlemapsapi　V=3ルート検索

締切済

  • 質問者：maido73
  • 質問日時：
  • 回答数：1件

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&

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： fujillin
  • 回答日時：

＞参考サイトを探しているのですが、V3で応用できるものが見つかりませんでした


よくわかってませんが、本家のgoogleにAPIのリファレンスがありますけれど、それではダメなのでしょうか？
http://code.google.com/intl/ja/apis/maps/documen …

＞実現したい参考ページ
これってＡＰＩで地図を表示しているわけではないみたいなので、参考サイトにあげられている方法とも違いますよね？

どのようにしたいのか、よくわかりませんが、とりあえず、（↑）のリファレンスに出ている方法でルートを表示する最低限のスクリプトを…
（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' …
</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>

この回答への補足

不十分な説明、早々のご教示にも関わらず返信が遅れて申し訳ありませんでした。

実現したい参考ページ
ttp://www.fm-oze.co.jp/furusatokan/fruits/apple/y5.html
このページには、マーカーと吹き出しがあり、吹き出し内にリンクされている『ルート』から下記ページのように『ルート・乗り換え案内』のページに移動できます。
http://maps.google.co.jp/maps?daddr=%E5%8D%83%E8 …

このようなことを考えています。
かなりハードルが高いですが、ご教示いただいた内容も参考にさせていただきたいと思います。

ありがとうございました。

補足日時：2011/07/27 22:47
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報