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函数详解 MATLAB:plot函数详解 MATLAB:plot函数详解 MATLAB:plot函数详解 MATLAB:plot函数详解 MATLAB: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函数的各种调用方法 ① plot(Y) :若Y 为实向量,则以该向量元素的下标为横坐标,以Y 的各元素值为纵 坐标,绘制二维曲线; >> A=0:0.05:5; >> plot(A); 运行结果: ② plot(X,Y) :若X 、Y 为长度相等的向量...
plot 教程plot 教程plot 教程plot 教程plot 教程plot 教程plot 教程plot 教程plot 教程
关于G2和G2Plot的在线主题生成器。
how to read and plot audio wav spectrum
plot 例子plot 例子plot 例子plot 例子plot 例子plot 例子plot 例子
Programming Excel with VBA and .NET Preface Part I: Learning VBA Chapter 1. Becoming an Excel Programmer Section 1.1. Why Program? Section 1.2. Record and Read Code Section 1.3. Change ...
1. plot(x,y); %x y 为相应点集 2.plot(x,y1,x,y2); % 在一个窗口下绘制多条曲线之方法一 3.hold on %在一个窗口下绘制多条曲线之方法二 plot(x,y1); plot(x,y2); hold off 4.plot后 xlabel('x_axis_name...
Draw and animate your user interfaces using the CALayer and UIKit animations Intercept and handle user touches to create user interface interactivity Create and depict totally custom controls Design ...
draw a plot of psnr vs bitrate
本代码主要利用MATLAB工具实现MATLAB——plot绘图,简单明了,易于理解
kataura plot V3 for carbon nanotubes
plot_google_map:MATLAB函数,用于在图形背景上绘制Google地图
@ opd / g2plot-react 用于React的 安装 npm install @opd/g2plot-react 用法 import React , { useRef } from 'react' import { LineChart , LineChartProps } from '@opd/g2plot-react' const config : ...
In project two, we build a Crime Map application that is backed by a MySQL database, allowing users to submit information on and the location of crimes in order to plot danger zones and other crime ...
适用于{v} Plot.js ####的Wordpress插件 该项目的目的是简化{v} Plot.js Framework的安装过程。 {v} Plot.js是基于THREE.js的交互式信息可视化框架。 主要是为3D数据可视化领域设计的。 尺寸可以减少到两个,甚至...
引用最新CorePlot 1.5库,注释很详细,各种自定义 // Setup plot space: 设置一屏内可显示的x,y量度范围 CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)[xyGraph defaultPlotSpace]; plotSpace.delegate = self...
用R语言对3维数据进行可视化的方法,一共提供了50种方法。
matlab 设计gui 关于zoomfft的相关代码