In this article I will explain how to draw a route between user’s current location and the specified location on Google Maps V3.
In day to day life in our mobile phones we make use of navigation, in similar way using the HTML5 GeoLocation feature we can determine the current location of the user and using the Google Maps Geocoding API we can determine the position coordinates i.e. Latitude and Longitude of an Address.
Thus now we can easily draw route between the two locations using the Google Maps Routing API.
Draw (Plot) route between User's Current Location and specified location on Google Maps V3
User has to input the address of the location he wants to route from his current location and press the button. The following method is executed which first determines the current location coordinates i.e. Latitude and Longitude of the user using the browser’s HTML5 GeoLocation feature.
Note: The browser must support HTML5 in order to get the user’s current location. For more details, please refer Google Maps GeoLocation API Example.
Next, we need to determine the location coordinates i.e. Latitude and Longitude of the address which was typed in by the user using the Google Maps Geocoding API. For more details refer my article Get Latitude and Longitude of a location from Address using JavaScript.
Now we have the geographical location coordinates of both the user’s current location and also the location he wants to go.
Finally we need to draw route between the two geographical location points using the Google Maps Routing API. For more details refer Google Maps V3: Draw route line between two geographic locations / Coordinates / Latitude and Longitude points.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function GetRoute() { var markers = new Array(); var myLatLng; //Find the current location of the user. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (p) { var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude); var m = {}; m.title = "Mudassar's location"; m.lat = p.coords.latitude; m.lng = p.coords.longitude; markers.push(m); //Find specified address location. var address = document.getElementById("txtAddress").value; var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { m = {}; m.title = address; m.lat = results[0].geometry.location.lat(); m.lng = results[0].geometry.location.lng(); markers.push(m); var mapOptions = { center: myLatLng, zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); var infoWindow = new google.maps.InfoWindow(); var lat_lng = new Array(); var latlngbounds = new google.maps.LatLngBounds(); for (i = 0; i < markers.length; i++) { var data = markers[i]; var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); latlngbounds.extend(marker.position); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.title); infoWindow.open(map, marker); }); })(marker, data); } map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds); //***********ROUTING****************// //Initialize the Path Array. var path = new google.maps.MVCArray(); //Initialize the Direction Service. var service = new google.maps.DirectionsService(); //Set the Path Stroke Color. var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' }); //Loop and Draw Path Route between the Points on MAP. for (var i = 0; i < lat_lng.length; i++) { if ((i + 1) < lat_lng.length) { var src = lat_lng[i]; var des = lat_lng[i + 1]; path.push(src); poly.setPath(path); service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { path.push(result.routes[0].overview_path[i]); } } else { //If the location specified is invalid, show error. alert("Invalid location for plotting route."); window.location.href = window.location.href; } }); } } } else { alert("Request failed.") } }); }); } else { alert('Geo Location feature is not supported in this browser.'); return; } } </script> <input type="text" id="txtAddress" value="" style = "width:200px" /> <br /> <input type="button" value="Get Route" onclick="GetRoute()" /> <hr /> <div id="dvMap" style="width: 500px; height: 500px">
下载:GoogleMaps_DrawPath_CurrentLocation
转自:Google Maps V3: 导航到指定地址 Draw (Plot) route between User's current location and Specified location
相关推荐
在MATLAB中,`plot`函数是用于绘制二维线图的核心工具,它允许用户根据给定的数据绘制各种图形,如直线、曲线、折线等。本文将深入解析`plot`函数的语法、参数以及常见使用示例。 1. **plot函数语法**: `plot`...
plot_google_map.m uses the Google Maps API to plot a map in the background of the current figure. It assumes the coordinates of the current figure are in the WGS84 datum, and uses a conversion code to...
`plot_google_map`是MATLAB中的一个用户定义的函数,它允许用户在图形窗口的背景下绘制Google地图。这个功能极大地扩展了MATLAB的绘图能力,使得用户可以在熟悉的MATLAB环境中利用Google Maps丰富的地理信息进行数据...
在数据分析和科学计算领域,`plot` 是一个非常重要的概念,它主要用于绘制各种图形和图表,帮助我们可视化数据。这个“plot教程”可能是为了详细解释如何使用不同的编程语言或库来创建各种类型的图表,比如线图、...
《前端项目:深入理解function-plot》 在前端开发领域,可视化工具的使用越来越广泛,它们可以帮助我们更好地理解和展示数据。function-plot就是一个基于d3.js库的2D函数绘图器,它提供了简单易用的接口,让我们...
CorePlot是一款强大的图形库,主要用于iOS和Mac OS X平台,它允许开发者轻松地创建各种复杂的2D图表,如折线图、柱状图、饼图等。在这个"CorePlot1.0饼图demo"中,我们将深入探讨如何利用CorePlot 1.0版本来构建一个...
**QWT Plot应用例程详解** QWT(Qt Widgets for Technical Applications)是一个开源库,它为Qt应用程序提供了用于科学和工程应用的图形组件。QWT Plot是QWT库中的一个核心部件,允许开发者创建功能丰富的2D图表,...
标题中的"draw_current.rar_fvcom"提示我们这是一个与FVCOM(Finite Volume Community Ocean Model)相关的文件,其中包含了绘制流场结果的代码。FVCOM是一种广泛应用的三维海洋环流模型,它采用有限体积方法来模拟...
在OpenCV库中,`plot`类提供了一个方便的方式来绘制二维图形,类似于MATLAB中的`plot`函数。这个功能使得开发者能够在OpenCV中进行数据可视化,这对于数据分析、图像处理和机器学习任务尤其有用。让我们深入了解一下...
标题中的"Plot Spectrum.rar_and_hoe_plot_read_to"暗示了我们将在讨论如何处理音频文件,特别是.WAV格式的音频,并且会涉及频谱分析以及如何可视化这些数据。描述中的"how to read and plot audio wav spectrum...
《G2Plot主题构建工具——Lipstick:打造个性图表风格》 在数据可视化领域,G2Plot作为一款强大的图表库,提供了丰富的图表类型和高度定制化的选项,以帮助开发者和设计师创建出引人入胜的数据展示。然而,面对众多...
在MATLAB中,`plot`函数是一个非常重要的绘图工具,用于绘制二维线性图形。这个函数具有多种用法和参数,可以根据不同的需求创建各种各样的图形。下面将详细介绍`plot`函数的功能、使用方法以及参数`LineSpec`的相关...
这篇文章主要介绍了如何使用R语言的plot3D包来进行三维数据可视化的操作。R语言是一种非常受欢迎的统计分析和图形表示的编程语言,而plot3D包则是R语言中用于生成三维图形的一个重要工具。文章通过展示50种不同的...
MATLAB 中 plot 函数详解 MATLAB 中的 plot 函数是绘制二维图形的基本函数,它可以用于绘制各种类型的曲线图形。下面对 plot 函数的用法进行详细的介绍。 Plot 函数的基本用法 -------------------- plot 函数的...
在MATLAB中,`plot`函数是用于绘制二维图形的核心工具,它可以帮助用户创建各种类型的线图、散点图和曲线图。这个“Matlab-plot.zip”压缩包中的“Matlab plot.wps”文件很可能提供了关于如何使用`plot`函数的详细...
在OpenCV库中,`iplimage`类型是旧版图像数据结构,而`plot`类是一种功能,可以让我们在OpenCV环境中实现类似MATLAB的图形绘制。本文将深入探讨这两个概念以及如何在实际编程中应用它们。 首先,我们来了解`...
标题中的"plot_ps.zip_IDL plot_IDL plot 界面"指的是一个与IDL编程语言相关的压缩包文件,其中包含了用于创建PS(PostScript)格式图形的代码和可能的用户界面元素。IDL,全称Interactive Data Language,是一种...
### MATLAB中的`plot`函数详解 #### 一、引言 MATLAB作为一种广泛应用于科学计算、数据分析及工程领域的高级编程语言,拥有强大的图形处理能力。本文将深入探讨MATLAB中最常用的绘图命令——`plot`函数的基本用法...
在MATLAB编程环境中,`plot3c`是一个自定义函数,用于绘制三维数据,并通过颜色编码来增强数据的可视化效果。这个功能对于理解和分析复杂的三维数据集非常有用,尤其是在科学计算、工程应用以及数据分析等领域。下面...