- 締切済み
Google Maps APIについて質問です
こんにちは。 現在大学の研究の一環で、Google Maps APIについて学習しております。 APIに関して全くの初心者ですが、質問があります。 今回必要としている機能として、羊ケ丘展望台から札幌駅へ向かう２ルートを地図上に表示させたいのですが 下記に示すようなものが現在できております。 ですが、まだ一つのルートしか表示できません。 このルートをそのままに、同じ出発地と到着地で（43.034047,141.359536）を経由するルートを赤いラインで追加したいと思っているのですが、 この場合はどういったコードになるのでしょうか？ かなりいろいろ調べてみましたが、初心者ゆえなかなか上手くできません。 どなたか知識をお持ちの方がいらっしゃいましたら、ご助力頂きたく存じます。 何卒宜しくお願い致します。 <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <style type="text/css"> v\:* {behavior:url(#default#VML);} html, body {width: 100%; height: 100%} body {top:0px;left:0px;margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px} </style> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> google.maps.event.addDomListener(window, 'load', function() { var mapObj; var lng = 139.8131925612688; var lat = 35.73369469149347; var mapOptions = { zoom: 11, center: null, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); // ルートを表示するマップを設定 var directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(mapObj); // 開始地点と終了地点、ルーティングの種類の設定 var request = { origin: "羊ケ丘展望台", destination: "札幌駅", travelMode: google.maps.DirectionsTravelMode.DRIVING }; // ルート検索を行う var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(result); } }); // Monitor the window resize event and let the map know when it occurs if (window.attachEvent) { window.attachEvent("onresize", function() {this.map.onResize()} ); } else { window.addEventListener("resize", function() {this.map.onResize()} , false); } }); </script> </head> <body> <div id="gmap" style="top:0px;left:0px;width: 100%; height: 100%;"> </div> </body> </html>
- naridanjp
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yamada_g
- ベストアンサー率68% (258/374)
たとえば現状のルート表示処理のあとに、 // 別ルート表示処理 var directionsRenderer2 = new google.maps.DirectionsRenderer({polylineOptions:{strokeColor: "red"}}); directionsRenderer2.setMap(mapObj); request = { origin: "羊ケ丘展望台", destination: "札幌駅", travelMode: google.maps.DirectionsTravelMode.DRIVING, waypoints: [ { location: new google.maps.LatLng(43.034047,141.359536) } ] }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsRenderer2.setDirections(result); } }); こんなのを追加すればいいのではないでしょうか。（処理をまとめたりするのはご自身で・・） ただ、自分は今回の質問を拝見して初めてGoogle Maps APIを触った、というレベルですので、もっとうまい方法もあるのだと思います。
お礼
上手くできました！有難うございました！