How To Draw A Map On Google Maps

• 
• Updated date April 13, 2020

• 518k
• 24

In this article you will learn how to draw and work with routes on the fly using the Google Maps API V3.

Introduction

This article volition aid you to solve the following problems:

1. How to describe a route on the wing.
2. How to delete a location from a route on the fly.
3. How to swap the routes on Google Maps using an HTML table.
4. How to summate route distance and time with respect to speed.

I have used waypoints to draw the routes. Please note that you can use a maximum of x locations at a time. In this article, I have made all necessary JavaScript code comments in the "googlemap.js" JavaScript file. So I am not explaining the JavaScript lawmaking. Please download the attachment for more details about code.

Procedure

Use the post-obit procedure to draw a route on the fly:

1. Run the projection.
2. Double-click on the start location on the Google map.

   

   Here I have chosen Mumbai equally the starting location.
3. Yous can choose the second location by double-clicking on another location on the map or drag the "B" icon to the second location.

   

   Here I take called Pune as my second location.
4. You can choose some other location by double-clicking on the map.

   

   Hither I take chosen Hyderabad equally my third location.
5. Notice that when y'all click on the map, the table will automatically generate the latitude, longitude, distance and time.
6. Toe calculate the fourth dimension, you lot demand to enter the speed in the TextBox.

Lawmaking

1. Initialize the map on folio load

2. var  directionsService = new  google.maps.DirectionsService();
4. var  _mapPoints = new  Array();
6. var  _directionsRenderer = '' ;
8. function  InitializeMap() {
10.     _directionsRenderer =new  google.maps.DirectionsRenderer();
12. var  myOptions = {
13.         zoom: 6,
14.         center:new  google.maps.LatLng(21.7679, 78.8718),
15.         mapTypeId: google.maps.MapTypeId.ROADMAP
16.     };
18. var  map = new  google.maps.Map(document.getElementById( "dvMap" ), myOptions);
20.     _directionsRenderer.setMap(map);
23.     _directionsRenderer.setOptions({
24.         draggable:truthful
25.     });
27.     google.maps.event.addListener(map,"dblclick" , function  (outcome) {
29. if  ($( "#txtAvgSpeed" ).val() == '' ) {
30.             alert("Please enter the Average Speed (km/60 minutes)." );
31.             $("#txtAvgSpeed" ).focus();
32. return false ;
33.         }
34. var  _currentPoints = event.latLng;
35.         _mapPoints.push button(_currentPoints);
36.         getRoutePointsAndWaypoints();
37.     });
39.     google.maps.event.addListener(_directionsRenderer,'directions_changed' , function  () {
40.         computeTotalDistanceforRoute(_directionsRenderer.directions);
41.     });
42. }

2. Get the route points and waypoints

2. function  getRoutePointsAndWaypoints() {
4. var  _waypoints = new  Array();
5. if  (_mapPoints.length > 2)
6.     {
7. for  ( var  j = 1; j < _mapPoints.length - 1; j++) {
8. var  address = _mapPoints[j];
9. if  (address !== "" ) {
10.                 _waypoints.button({
11.                     location: address,
12.                     stopover:true
13.                 });
14.             }
15.         }
17.         drawRoute(_mapPoints[0], _mapPoints[_mapPoints.length - ane], _waypoints);
18.     }else if  (_mapPoints.length > 1) {
20.         drawRoute(_mapPoints[_mapPoints.length - 2], _mapPoints[_mapPoints.length - i], _waypoints);
21.     }else  {
23.         drawRoute(_mapPoints[_mapPoints.length - 1], _mapPoints[_mapPoints.length - 1], _waypoints);
24.     }
25. }

3. Draw the route

The following function is used to describe the route.

2. function  drawRoute(originAddress, destinationAddress, _waypoints) {
4. var  _request = '' ;
6. if  (_waypoints.length > 0) {
7.             _request = {
8.                 origin: originAddress,
9.                 destination: destinationAddress,
10.                 waypoints: _waypoints,
11.                 optimizeWaypoints:true ,
12.                 travelMode: google.maps.DirectionsTravelMode.DRIVING
13.             };
14.         }else  {
16.             _request = {
17.                 origin: originAddress,
18.                 destination: destinationAddress,
19.                 travelMode: google.maps.DirectionsTravelMode.DRIVING
20.             };
21.         }
23.         directionsService.road(_request,function  (_response, _status) {
24. if  (_status == google.maps.DirectionsStatus.OK) {
25.                 _directionsRenderer.setDirections(_response);
26.             }
27.         });
28.     }

How to delete a location from the route on the fly

1. If I desire to delete the Pune location grade the instance in a higher place then I click on the "Ten" image button to delete the location.

   

2. When you click on the "Ok" push button, the "Pune" or "B" location will be deleted.

   

Code

ane. The following is the lawmaking to delete the required location:

2. function  deleteLocation(trid) {
3. if  (ostend( "Are you certain want to delete this location?" ) == true ) {
4. var  _temPoint = new  Assortment();
5. for  ( var  w = 0; westward < _mapPoints.length; due west++) {
6. if  (trid != w + 1) {
7.                     _temPoint.push(_mapPoints[due west]);
8.                 }
9.             }
10.             _mapPoints =new  Array();
11. for  ( var  y = 0; y < _temPoint.length; y++) {
12.                 _mapPoints.push button(_temPoint[y]);
13.             }
14.             getRoutePointsAndWaypoints();
15.         }else  {
16. return false ;
17.         }
18.     }

2. I take called the deleteLocation() method on image click on click event.

1. htmlhtml = html + "<td manner=\"width: 60px;\"><img alt=\"DeleteLocation\" src=\"Images/Delete.jpg\" onclick=\"return deleteLocation("  + _htmlTrCount + ");\" /></td>" ;

How to swap the routes on Google map using HTML table

1. In the case above, I have created iii locations, they are Bombay, Pune, and Hyderabad.

2. Now I desire to swap the locations, in other words, my start locations will be Hyderabad, then Pune, so Mumbai.

3. Put the mouse on the third row of the table or the "Location Name: C" tabular array row then drag and driblet to the offset row, in other words the offset row or "Location Name: A".

iv. So my start location is "A", in other words, Hyderabad. Now the 2nd location volition exist Pune. Right at present it is showing Mumbai. Do the aforementioned for Bombay.

Code

ane. The post-obit code volition help yous to move the locations from the HTML table:

2. part  draganddrophtmltablerows() {
3. var  _tempPoints = new  Array();
5.         $("#HtmlTable" ).tableDnD();
7.         $("#HtmlTable" ).tableDnD({
8.             onDrop:function  (tabular array, row) {
9. var  rows = tabular array.tBodies[0].rows;
10. for  ( var  q = 0; q < rows.length; q++) {
11.                     _tempPoints.push button(_mapPoints[rows[q].id - 1]);
12.                 }
13.                 _mapPoints =new  Assortment();
14. for  ( var  y = 0; y < _tempPoints.length; y++) {
15.                     _mapPoints.push(_tempPoints[y]);
16.                 }
17.                 getRoutePointsAndWaypoints();
18.             }
19.         });

2. I have used the Scripts/jquery.tablednd.js for this table swap.

Calculate route altitude and time with respect to speed

The following process will calculate the road distance and time with respect to speed.

one. When you create a location on the map, the distance and speed will automatically exist calculated.

ii. For speed, you need to enter the "Boilerplate Speed (km/hr)" in the text box.

Code

2. function  CreateHTMTable(_latlng, _distance) {
3. var  _Speed = $( "#txtAvgSpeed" ).val();
4. var  _Time = parseInt(((_distance / 1000) / _Speed) * lx);;
5. if  (_htmlTrCount - ane == 0) {
6.             _Time = 0;
7.             _distance = 0;
8.         }
9. var  html = '' ;
10. var  championship = new  Assortment( "A" , "B" , "C" , "D" , "E" , "F" , "G" , "H" , "I" , "J" , "1000" , "L" , "1000" , "Due north" , "O" );
11.         html = html +"<tr id=\""  + _htmlTrCount + "\">" ;
12.         html = html +"<td manner=\"width: 80px;\">"  + _htmlTrCount + "</td>" ;
13.         html = html +"<td style=\"width: 80px;\"><bridge id=\"Title_"  + _htmlTrCount + "\">"  + title[_htmlTrCount - 1] + "</span></td>" ;
14.         html = html +"<td manner=\"width: 100px;\"><span id=\"lat_"  + _htmlTrCount + "\">"  + parent.Cord(_latlng).split up( "," )[0].substring(one, 8) + "</span></td>" ;
15.         html = html +"<td style=\"width: 100px;\"><span id=\"lng_"  + _htmlTrCount + "\">"  + parent.Cord(_latlng).split( "," )[1].substring(1, 8) + "</span></td>" ;
16.         html = html +"<td mode=\"width: 100px;\"><span id=\"dir_"  + _htmlTrCount + "\">"  + _distance + "</span></td>" ;
17.         html = html +"<td style=\"width: 70px;\"><bridge id=\"time_"  + _htmlTrCount + "\">"  + _Time + "</span></td>" ;
18.         html = html +"<td style=\"width: 60px;\"><img alt=\"DeleteLocation\" src=\"Images/Delete.jpg\" onclick=\"render deleteLocation("  + _htmlTrCount + ");\" /></td>" ;
19.         html = html +"</tr>" ;
20.         $("#HtmlTable" ).append(html);
21.         draganddrophtmltablerows();
22.     }

The post-obit lawmaking volition help you to calculate distance and speed.

NOTE:

1. Equally I already mentioned at the top of this article, I have used the waypoints to plot the route. So you can use a maximum of 10 waypoints with the gratis ane.
2. To better sympathise, download the source code in the attachment and run it to exam it.
3. I have used the Google map API v3 for this article.
4. Please comment on this article for better comeback and I promise y'all bask the article.

Source: https://www.c-sharpcorner.com/UploadFile/8911c4/how-to-draw-routes-and-calculate-route-time-and-distance-on/

Posted by: harrisonsiquene.blogspot.com

Share this post