2点間距離を測定するGoogle maps サンプル（下記）を入手したのですが、次のように手直ししたいと考えています。ご教授の程、よろしくお願い致します。 (1)出発地は決まっているので、「◯◯から」の◯◯の表示は必要ありません。 (2)そのかわり、出発地のポイントと名称をあらかじめ表示させておきたい。 (3)目的地の住所を入力して検索するだけで案内が表示される。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> <title>Google Maps API v3 Directions Draggable</title> <style type="text/css"> body {background-color: #B7C4C8; font-family: Arial, "MS PGothic"; text-align: center; font-size: small;} div#wrapper {width: 728px; margin: 0 auto; padding: 0; text-align: left;} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var rendererOptions = {draggable: true}; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var map; var aqui = new google.maps.LatLng(35.69, 139.71); function initialize() { var myOptions = {zoom: 10, center: aqui, mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel")); google.maps.event.addListener(directionsDisplay, "directions_changed", function() { computeTotalDistance(directionsDisplay.directions); }); calcRoute(); } function calcRoute(fromAddress, toAddress) { var selectedMode = document.getElementById("mode").value; var fromAddress = document.getElementById("fromAddress").value; var toAddress = document.getElementById("toAddress").value; var request = {origin: fromAddress, destination: toAddress, travelMode: google.maps.DirectionsTravelMode[selectedMode]}; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } function computeTotalDistance(result) { var total = 0; var myroute = result.routes[0]; for (i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000. document.getElementById("total").innerHTML = total + " km"; } </script> </head> <body onload="initialize()"> <div id="wrapper"> <div style="margin-bottom: 8px;"> <strong>Directions: モード＝</strong> <select id="mode" onchange="calcRoute();"> <option value="DRIVING">車</option> <option value="WALKING">歩き</option> </select> <form action="#" onsubmit="calcRoute(this.fromAddress.value, this.toAddress.value); return false"> <input type="text" size="12" id="fromAddress" name="from" value=""/>から ～ <input type="text" size="12" id="toAddress" name="to" value="" />へのルートを <input name="submit" type="submit" value="検索" /> またはドラッグ＆ドロップ </form> </div> <div id="map_canvas" style="float:left; width:500px; height:400px;"></div> <div id="directionsPanel" style="margin-left: 505px; width:223px; height: 400px; overflow: auto; background-color: #FFF;"><p>距離: <span id="total"></span></p></div> <div style="margin-top: 12px;"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-9624687380026797"; /* 728-90Big */ google_ad_slot = "2458118948"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <!--/ #wrapper--></div> <script type="text/javascript"> <!-- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1220676-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.src = 'http://www.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })(); // --> </script> </body> </html> 以上です。よろしくお願い致します。
↧