In this article I will explain with example and attached source code, how to use the Google Maps API V3 to plot driving directions and route on Google Maps using the DirectionsService.
HTML Markup
The HTML Markup consists of two TextBoxes first one for entering Source address while the other for entering destination address, a Button and three HTML DIVs for displaying the distance and duration details, plotting map and displaying directions.
<table border="0" cellpadding="0" cellspacing="3"> <tr> <td colspan="2"> Source: <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" /> Destination: <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" /> <br /> <input type="button" value="Get Route" onclick="GetRoute()" /> <hr /> </td> </tr> <tr> <td colspan="2"> <div id="dvDistance"> </div> </td> </tr> <tr> <td> <div id="dvMap" style="width: 500px; height: 500px"> </div> </td> <td> <div id="dvPanel" style="width: 500px; height: 500px"> </div> </td> </tr> </table>
Calculate Distance, Travel Duration, draw (plot) Route and display Directions using DirectionsService
Inside the Google Maps window load event handler, for the source and the destination TextBoxes I have implemented Google Places Autocomplete TextBox. For more details please refer Implement Google Places Autocomplete TextBox.
When the Button is clicked, first the Map and the Directions service is initialized to display the map and the directions in their respective HTML DIVs.
Then using the source and destination addresses from the respective TextBoxes, the details of the directions, route, distance and duration are displayed inside the respective HTML DIVs.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> <script type="text/javascript"> var source, destination; var directionsDisplay; var directionsService = new google.maps.DirectionsService(); google.maps.event.addDomListener(window, 'load', function () { new google.maps.places.SearchBox(document.getElementById('txtSource')); new google.maps.places.SearchBox(document.getElementById('txtDestination')); directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); }); function GetRoute() { var mumbai = new google.maps.LatLng(18.9750, 72.8258); var mapOptions = { zoom: 7, center: mumbai }; map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('dvPanel')); //*********DIRECTIONS AND ROUTE**********************// source = document.getElementById("txtSource").value; destination = document.getElementById("txtDestination").value; var request = { origin: source, destination: destination, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); //*********DISTANCE AND DURATION**********************// var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix({ origins: [source], destinations: [destination], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false }, function (response, status) { if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { var distance = response.rows[0].elements[0].distance.text; var duration = response.rows[0].elements[0].duration.text; var dvDistance = document.getElementById("dvDistance"); dvDistance.innerHTML = ""; dvDistance.innerHTML += "Distance: " + distance + "<br />"; dvDistance.innerHTML += "Duration:" + duration; } else { alert("Unable to find the distance via road."); } }); } </script>
Screenshot
下载:GoogleMaps_CalculateDistance
相关推荐
GoogleMapsAPI::路线这是 Google Maps Directions API 的包装器。安装将此行添加到应用程序的 Gemfile 中: gem 'google_maps_api-directions'然后执行: $ bundle或者自己安装: $ gem install google_maps_api-...
适用于Google Maps Services的.NET Client 适用于Google Maps API的.NET客户端服务是适用于以下Google Maps API的.NET客户端库:入门要求.NET 3.5或更高版本。 Google Maps API密钥。API密钥每个Google Maps Web服务...
Google Maps Directions API-折线抽屉助手 这是Couroutines的实现,对于RX,请参见 它是什么? 这是一个用Kotlin写的小型图书馆,可以利用Google Directions API调用并将响应转换为PolylineOptions,并准备添加到...
Other web services: AMap Search, Bing Maps Elevation API, Bing Maps Location API, HERE Routing API, Open Route Service Directions, Open Route Service Geocoding, Open Street Map Nominatim, Open Street...
演示如何使用Android上的Google Maps Directions API在地图上生成折线。 关于如何使用Java在Android上使用Google Maps Directions API的文档很少。 此存储库将帮助您在应用中使用Directions API。 How does this ...
路线规划你的运动路线建立步骤在~/.gradle/gradle.properties设置您的 Google Maps API 密钥: ROUTES_MAPS_API_KEY = YOUR_API_KEY在~/.gradle/gradle.properties设置您的 Google Directions API 密钥: ROUTES_...
mobile ad hoc networking:cutting edge directions Second Edition 移动Ad Hoc网络:前沿研究方向(第2版) 研究移动自组网的必备参考书,878页,高清版本
react-native-maps-directions Directions组件–在两个坐标之间绘制路线,由Google Maps Directions API提供支持安装使用以下任一方法将react-native-maps-directions安装为依赖项 npm install react-native-maps-...
“816 Meridian St., 37207” 获取整个行程的驾驶时间或距离drive_time_in_minutes = directions.drive_time_in_minutesdistance_in_miles = directions.distance_in_miles获取谷歌每次返回的XML ,或者API调用...
•其他Web服务:AMap Search,Bing Maps Elevation API,Bing Maps Location API,HERE Routing API,Open Route Service Directions,Open Route Service Geocoding,Open Street Map Nominatim,Open Street Map ...
该工作簿显示了如何集成Google Maps Directions API来计算从Excel电子表格获取的位置之间的行驶时间。 相同的概念可以应用于通过简单的HTTP GET公开基于XML的接口的许多API。 该工作簿包含三页:一张包含一些仓库的...
快速添加用户界面,以在地图上显示行车,骑车或步行的路线。 Mapbox Directions API由路由引擎提供支持,并从项目中打开数据。 有关本机移动和桌面应用程序中的路线功能,请参阅, 和 。 用法 var mapboxgl = ...
围绕Google Maps API的Elixir包装器 服务 -多个地点之间的路线。 -多个目的地的旅行时间和距离。 (由@bnns提供) -世界上任何一点的海拔数据。 -在地址和地理坐标之间转换。 -允许您使用应用程序中的数据来...
Other web services: AMap Search, Bing Maps Elevation API, Bing Maps Location API, HERE Routing API, Open Route Service Directions, Open Route Service Geocoding, Open Street Map Nominatim, Open Street...
该项目使用MapQuest Directions API(开放数据)获取路线,而不是使用MapQuest Android SDK v1.0.5,因为这需要企业密钥(许可数据)。 在Directions API的响应中,我们还提供了Guidance中使用的叙述。 最后,这将...
Google Maps Services的Node.js客户端 该库是发布到的先前版本的重构。 现在它已发布到 。 旧版本的源代码位于。 使用Node.js? 是否要对某项进行? 寻找? 该库将带到您的Node.js应用程序。 Google Maps ...
The most recent Google Maps API for Adobe Flash is the map_1_9a.swc and for Adobe Flex or Adobe Air it is the map_flex_1_9a.swc one. It fixes two bugs: Geocoding and Directions fail if swf is hosted ...
谷歌地图方向 使用 Google Maps API 查找路线
#TCGoogleMaps 此示例项目说明了我们如何使用iOS版Google Maps SDK,Google Places API和Google Directions API来构建简单的导航应用。 *搜索自动完成功能,结果根据与您当前位置的距离和相关性排序。 *选择搜索结果...
该NPM模块是用于通过Node异步查询Google Directions API( )的最简单接口。 安装 npm i google_directions 获取Google API密钥 选择/创建项目 启用路线指示API 生成密钥(请参阅“凭据”选项卡) 用法 包括这...