Show Direction on Google Map from source to Destination along with turning steps.
Show direction on Map with Animated Object as Walking man, Bicycle or Car.
Description
This will display the directions for the moving object like car or walking man from start to end Point on Google Map. It will also show the Route Plan on Right Panel.
Queries
We need to answer to these queries before we start with the development.
1. How to animate Car, Cycle, Walking Man or other Objects on Google Map?
2. How to show animated Object s moving from one end to other on Google Map?
3. How to plot route and direction indications for start to end on Map?
4. How to Display Direction as the Object move on Map?
Development Steps
1. Enter starting and end point.
2. Create SVG Image of Object Like car, walking man and Cycle. For Other objects Marker and used. They are defined as Icon in Marker.
3. Select Drive Mode as Driving, Walking, Bicycle, Arrow, Circle and Marker.
4. Display Direction for each Point as the Object move on Google Page.
5. Display route plan.
Method used to save and get session variables.
Statement used to Save session Variables
function savesession()
{
sessionStorage.setItem("sessionaddress",document.getElementById('address').value);
sessionStorage.setItem("pyrmontlat",document.getElementById('lat').value);
sessionStorage.setItem("pyrmontlng",document.getElementById('lng').value);
sessionStorage.setItem("sessionmyloc",document.getElementById('myloc').value);
sessionStorage.setItem("sessiondist",document.getElementById('dist').value);
}
Statement used to get session variables.
document.getElementById('address').value=sessionStorage.getItem('sessionaddress');
document.getElementById('lat').value=sessionStorage.getItem('pyrmontlat');
document.getElementById('lng').value=sessionStorage.getItem('pyrmontlng');
document.getElementById('myloc').value=sessionStorage.getItem('sessionmyloc');
document.getElementById('dist').value=sessionStorage.getItem('sessiondist');
Prerequisite Code Required.
1. myjavascript.js
2. mystyle.css
3. MarkerWithLabel.js
Google Library used as
libraries=
Coding:
File Name: map_direction.html.
Show direction on Map with Animated Object as Walking man, Bicycle or Car.
Description
This will display the directions for the moving object like car or walking man from start to end Point on Google Map. It will also show the Route Plan on Right Panel.
Queries
We need to answer to these queries before we start with the development.
1. How to animate Car, Cycle, Walking Man or other Objects on Google Map?
2. How to show animated Object s moving from one end to other on Google Map?
3. How to plot route and direction indications for start to end on Map?
4. How to Display Direction as the Object move on Map?
Development Steps
1. Enter starting and end point.
2. Create SVG Image of Object Like car, walking man and Cycle. For Other objects Marker and used. They are defined as Icon in Marker.
3. Select Drive Mode as Driving, Walking, Bicycle, Arrow, Circle and Marker.
4. Display Direction for each Point as the Object move on Google Page.
5. Display route plan.
Method used to save and get session variables.
Statement used to Save session Variables
function savesession()
{
sessionStorage.setItem("sessionaddress",document.getElementById('address').value);
sessionStorage.setItem("pyrmontlat",document.getElementById('lat').value);
sessionStorage.setItem("pyrmontlng",document.getElementById('lng').value);
sessionStorage.setItem("sessionmyloc",document.getElementById('myloc').value);
sessionStorage.setItem("sessiondist",document.getElementById('dist').value);
}
Statement used to get session variables.
document.getElementById('address').value=sessionStorage.getItem('sessionaddress');
document.getElementById('lat').value=sessionStorage.getItem('pyrmontlat');
document.getElementById('lng').value=sessionStorage.getItem('pyrmontlng');
document.getElementById('myloc').value=sessionStorage.getItem('sessionmyloc');
document.getElementById('dist').value=sessionStorage.getItem('sessiondist');
Prerequisite Code Required.
1. myjavascript.js
2. mystyle.css
3. MarkerWithLabel.js
Google Library used as
libraries=
Coding:
File Name: map_direction.html.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./script/mystyle.css">
<title>Direction</title>
</head>
<body>
<div id="map"></div>
<div id="bottom3">
<table id="t01">
<tr><td id="01">Start Point</td><td><input id="start" value="gagan vihar,east delhi,delhi"></td><td><input type="checkbox" id="show" name="show" >Route</td></tr>
<tr><td id="01">End Point</td><td><input id="end" value="preet vihar,delh"></td><td>Rotation:<input id="loc" size=5 value=""></td></tr>
<tr><td id="01">Drive Mode</td><td>
<input type="radio" id="drive" name="drive" value="driving">Driving
<input type="radio" id="walking" name="drive" value="walking">Walking
<input type="radio" id="bicycle" name="drive" value="bike" >Bicycle
<input type="radio" id="arrow" name="drive" value="arrow" >Arrow
<input type="radio" id="circle" name="drive" value="circle" >Circle
<input type="radio" id="marker1" name="drive" value="marker" >Marker
</td><tr>
<tr><td id="01">Directions</td><td><input id="msg" size=50/></td><td><input type="button" id="submit" value="submit" > </td><tr>
</table>
</div>
<div id="directionsPanel" style="visibility:hidden"></div>
<div id="warnings-panel">aaa</div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
var z = 0;
var opt;
var car = 'car.png';
var markers = [];
var iconbase = "./";
var flightPath;
var flightpc1, flightpc;
var marker;
var map;
var i = 0;
var i_timer = 0;
var ii = 0, nn = 0;
var dif_lat, dif_lng;
var fpath;
var flightpc_final = new Array();
var divrule = 20;
//b = new Object();
var froute = [];
var image;
var msg = [];
var stepDisplay, directionsService, directionsDisplay;
var markerArray = [];
function init()
{
flightpc = [];
flightpc_final = [];
}
function initMap() {
//initialize
directionsService = new google.maps.DirectionsService;
stepDisplay = new google.maps.InfoWindow;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay = new google.maps.DirectionsRenderer({map: map});
init();
// flightpc=[];
var onChangeHandler = function () {
calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map);
};
//define events
document.getElementById('submit').addEventListener('click', onChangeHandler);
document.getElementById('show').addEventListener('click', fnshow);
}
function fnshow()
{
if (document.getElementById('show').checked)
document.getElementById('directionsPanel').style.visibility = "visible";
else
document.getElementById('directionsPanel').style.visibility = "hidden";
}
function selopt()
{
var drive_group = document.getElementsByName('drive');
for (i = 0; i < drive_group.length; i++)
{
if (drive_group[i].checked) {
opt = drive_group[i].value;
break;
}
}
}
function calculateAndDisplayRoute(directionsDisplay, directionsService,
markerArray, stepDisplay, map)
{
init();
selopt();
var tmode = google.maps.TravelMode.DRIVING;
if (opt == 'driving')
tmode = google.maps.TravelMode.DRIVING;
else if (opt == 'walking')
tmode = google.maps.TravelMode.WALKING;
else if (opt == 'bicycle')
tmode = google.maps.TravelMode.BICYCLING;
// First, remove any existing markers from the map.
for (var i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
// Retrieve the start and end locations and create a DirectionsRequest using
// WALKING directions.
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
drivingOptions: {
departureTime: new Date(Date.now()), // for the time N milliseconds from now.
trafficModel: "optimistic"
}, travelMode: tmode
}, function (response, status) {
// Route the directions and pass the response to a function to create
// markers for each step.
if (status === google.maps.DirectionsStatus.OK) {
document.getElementById('warnings-panel').innerHTML =
'<b>' + response.routes[0].warnings + '</b>';
directionsDisplay.setDirections(response);
showSteps(response, markerArray, stepDisplay, map);
} else {
window.alert('Directions request failed due to ' + status);
}
});
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function showSteps(directionResult, markerArray, stepDisplay, map) {
// For each step, place a marker, and add the text to the marker's infowindow.
// Also attach the marker to an array so we can keep track of it and remove it
// when calculating new routes.
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
marker.setMap(map);
marker.setPosition(myRoute.steps[i].start_location);
var tmp = (myRoute.steps[i].start_location + ' ').replace('(', '').replace(')', '').split(',');
flightpc.push({lat: parseFloat(tmp[0]), lng: parseFloat(tmp[1])});
attachInstructionText(stepDisplay, marker, myRoute.steps[i].instructions, map);
msg.push(myRoute.steps[i].start_location.lat() + ',' + myRoute.steps[i].start_location.lng() + ',' + myRoute.steps[i].instructions);
}
calroutef();
var seti = setInterval(function () {
if (i_timer < flightpc.length * divrule) {
showmarker(flightpc_final[i_timer], flightpc_final[i_timer == 0 ? i_timer : i_timer - 1], i_timer);
i_timer++
} else
clearInterval(seti);
}, 200);
}
function attachInstructionText(stepDisplay, marker, text, map) {
google.maps.event.addListener(marker, 'click', function () {
// Open an info window when the marker is clicked on, containing the text
// of the step.
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
function fn1()
{
document.getElementById("img").style.transform = "rotate(50deg)";
}
//apply rotation on object
function fnrot(lat2, lng2, lat1, lng1) {
var dLon = (lng2 - lng1);
var y = Math.sin(dLon) * Math.cos(lat2);
var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
var brng = (Math.atan2(y, x) * 180 / Math.PI);
return 360 - ((brng + 360) % 360);
}
;
function showmarker(ary, aryold, i)
{
var pcar = "M 4.00,16.50 3.80,13.45 4.98,11.18 9.89,1.77 28.76,2.03 37.00,6.06 44.80,9.88 45.98,13.99 46.13,22.00 46.13,22.00 46.13,37.00 46.13,37.00 46.42,41.38 46.59,46.37 44.00,50.00 44.00,50.00 48.00,50.00 48.00,50.00 48.00,50.00 48.00,54.00 48.00,54.00 48.00,54.00 46.03,53.00 46.03,53.00 46.03,53.00 46.03,80.00 46.03,80.00 45.94,85.68 46.82,91.09 40.79,94.70 31.82,100.07 20.66,95.70 13.00,100.00 13.00,100.00 4.85,91.89 4.85,91.89 4.85,91.89 4.00,85.00 4.00,85.00 4.00,85.00 4.00,64.00 4.00,64.00 4.00,64.00 5.00,52.00 5.00,52.00 5.00,58.50 4.15,74.78 7.16,79.89 10.85,86.16 26.66,85.76 33.00,84.53 35.74,84.00 38.51,83.10 40.26,80.78 45.02,74.44 40.49,57.31 45.00,51.00 45.00,51.00 40.00,52.00 40.00,52.00 40.00,52.00 42.00,42.00 42.00,42.00 42.00,42.00 33.99,36.87 33.99,36.87 25.35,33.34 17.51,36.08 9.00,38.00 9.00,38.00 6.00,42.00 6.00,42.00 6.00,42.00 10.43,52.40 10.43,52.40 10.43,52.40 19.00,54.00 19.00,54.00 19.00,54.00 39.00,54.00 39.00,54.00 39.00,54.00 39.00,76.00 39.00,76.00 39.00,76.00 8.95,76.00 8.95,76.00 8.95,76.00 8.95,58.00 8.95,58.00 8.66,55.93 8.03,53.10 5.77,52.32 3.80,51.64 1.66,53.13 0.00,54.00 0.00,54.00 0.00,50.00 0.00,50.00 0.00,50.00 4.00,50.00 4.00,50.00 4.00,50.00 4.00,19.00 4.00,19.00 Z M 8.00,39.00 C 8.00,39.00 9.00,40.00 9.00,40.00 9.00,40.00 9.00,39.00 9.00,39.00 9.00,39.00 8.00,39.00 8.00,39.00 Z M 6.00,49.00 C 6.00,49.00 6.00,44.00 6.00,44.00 6.00,44.00 6.00,49.00 6.00,49.00 Z M 43.00,49.00 C 43.00,49.00 43.00,44.00 43.00,44.00 43.00,44.00 43.00,49.00 43.00,49.00 Z M 45.00,52.00 C 45.00,52.00 46.00,53.00 46.00,53.00 46.00,53.00 46.00,52.00 46.00,52.00 46.00,52.00 45.00,52.00 45.00,52.00 Z";
var pman = "M 3.15,0.80 C 5.56,-0.42 8.58,0.41 11.00,0.80 11.00,0.80 19.39,8.35 19.39,8.35 19.39,8.35 24.29,12.24 24.29,12.24 24.29,12.24 64.00,25.00 64.00,25.00 62.19,22.05 60.18,18.20 56.90,16.72 53.13,15.03 45.44,15.32 43.62,10.78 41.76,6.14 45.88,5.03 49.42,5.27 52.66,5.50 62.33,8.40 64.70,10.44 67.75,13.06 68.02,15.68 73.00,20.00 74.15,27.88 79.58,27.49 78.90,38.00 78.76,40.13 78.56,42.06 77.32,43.87 77.32,43.87 70.00,51.00 70.00,51.00 70.00,51.00 66.00,53.00 66.00,53.00 57.12,55.01 55.55,67.28 50.64,69.92 49.59,70.49 48.47,70.56 47.43,69.92 43.68,67.61 46.87,61.69 48.41,59.04 50.56,55.32 52.79,52.42 53.00,48.00 53.00,48.00 61.00,44.00 61.00,44.00 61.00,44.00 46.00,41.55 46.00,41.55 46.00,41.55 31.00,53.00 31.00,53.00 31.00,53.00 32.00,56.00 32.00,56.00 26.18,58.74 15.37,61.71 9.00,62.56 4.76,63.13 0.88,63.09 0.15,57.98 -1.55,46.06 15.63,49.01 22.91,44.16 22.91,44.16 36.00,31.00 36.00,31.00 31.18,29.91 24.78,29.43 22.00,25.00 15.69,24.12 6.63,15.79 1.00,12.00 1.00,12.00 2.00,10.00 2.00,10.00 -0.85,7.44 -0.64,2.20 3.15,0.80 Z M 88.04,27.65 C 101.96,23.42 105.10,47.98 90.00,46.87 88.24,46.75 86.59,46.31 85.14,45.26 83.29,43.93 82.32,42.17 81.76,40.00 81.76,40.00 81.00,32.00 81.00,32.00 83.13,30.51 85.56,28.41 88.04,27.65 Z";
var pbike = "M 27.00,133.25 C 6.72,116.26 -3.67,83.81 2.52,58.00 5.14,47.09 17.83,26.76 26.00,19.09 35.54,10.15 48.20,4.57 61.00,2.26 61.00,2.26 79.00,0.00 79.00,0.00 82.93,2.14 87.71,1.97 92.00,3.21 101.97,6.08 107.41,8.41 116.00,14.44 137.75,29.70 147.49,49.92 148.90,76.00 149.07,79.17 148.29,86.82 147.69,90.00 146.01,98.94 141.47,108.16 137.00,116.00 137.00,116.00 157.00,128.67 157.00,128.67 157.00,128.67 167.00,134.00 167.00,134.00 167.86,137.64 171.37,136.00 174.04,135.19 188.45,130.82 180.87,130.56 191.00,125.00 191.00,125.00 191.00,137.00 191.00,137.00 187.85,138.43 188.78,145.94 189.06,149.01 189.99,158.96 196.99,171.73 186.00,178.00 186.00,178.00 182.28,160.00 182.28,160.00 182.28,160.00 179.11,154.00 179.11,154.00 179.11,154.00 176.00,148.00 176.00,148.00 176.00,148.00 176.00,146.00 176.00,146.00 176.00,146.00 178.00,140.00 178.00,140.00 168.37,141.12 170.08,148.26 170.44,156.00 170.44,156.00 171.00,255.00 171.00,255.00 174.72,254.19 182.65,253.97 186.00,255.59 186.00,255.59 193.00,260.00 193.00,260.00 194.30,243.40 187.51,246.12 190.00,232.00 190.00,232.00 199.00,231.00 199.00,231.00 200.49,241.55 203.22,245.81 200.50,257.00 199.52,261.04 197.82,265.35 193.00,265.59 189.56,265.76 182.56,261.54 179.00,260.00 175.80,266.25 172.76,264.82 167.00,267.20 158.60,270.66 151.26,276.16 142.00,277.00 143.99,291.12 148.02,293.55 148.00,310.00 147.97,331.24 137.46,354.03 121.00,367.54 115.52,372.03 108.55,376.37 102.00,379.13 97.42,381.05 93.86,380.90 90.00,384.14 90.00,384.14 73.00,384.14 73.00,384.14 73.00,384.14 59.00,384.14 59.00,384.14 57.88,381.52 49.88,380.33 47.00,379.14 37.66,375.29 30.56,370.99 23.42,363.72 14.23,354.34 9.00,344.54 5.43,332.00 3.72,326.02 3.32,317.16 1.00,313.00 1.00,313.00 3.00,312.00 3.00,312.00 1.13,309.76 1.97,306.85 2.23,304.00 2.03,300.60 1.85,297.38 2.23,294.00 5.00,279.96 16.71,262.64 27.00,253.09 39.15,241.81 52.86,237.11 69.00,235.38 69.00,235.38 76.00,234.34 76.00,234.34 76.00,234.34 82.00,235.33 82.00,235.33 105.35,238.54 126.40,250.01 137.00,272.00 137.00,272.00 143.00,266.00 143.00,266.00 143.00,266.00 120.83,243.00 120.83,243.00 120.83,243.00 91.00,212.00 91.00,212.00 91.00,212.00 80.25,200.85 80.25,200.85 80.25,200.85 75.07,197.19 75.07,197.19 75.07,197.19 72.00,199.00 72.00,199.00 64.11,198.86 57.34,202.82 47.00,195.36 43.81,193.06 40.77,189.64 39.22,186.00 38.03,183.20 38.14,179.72 35.69,177.58 32.83,175.10 26.64,175.03 23.00,175.00 23.00,175.00 23.00,177.00 23.00,177.00 23.00,177.00 27.00,178.00 27.00,178.00 27.00,178.00 16.00,178.00 16.00,178.00 16.00,178.00 13.00,170.00 13.00,170.00 17.78,166.66 19.96,164.61 26.00,167.00 24.04,172.49 34.50,171.85 38.00,172.00 38.00,172.00 41.00,153.00 41.00,153.00 41.00,153.00 44.00,144.00 44.00,144.00 37.37,141.90 32.26,137.65 27.00,133.25 Z M 134.23,94.00 C 140.38,74.05 136.06,51.05 122.68,35.00 93.96,0.55 36.14,7.26 18.17,48.00 7.65,71.87 10.89,97.22 28.29,117.00 35.14,124.78 43.37,129.96 53.00,133.58 55.44,134.49 60.93,136.78 63.26,134.99 65.77,133.07 64.97,124.11 65.00,121.00 65.00,121.00 69.33,82.00 69.33,82.00 69.77,78.60 69.42,70.55 74.00,70.03 77.96,69.57 76.90,74.16 81.00,77.00 81.00,77.00 82.00,67.00 82.00,67.00 82.00,69.87 81.54,76.18 82.99,78.49 84.49,80.87 92.32,85.86 95.00,87.67 102.50,92.73 120.29,106.43 128.00,108.00 128.00,108.00 134.23,94.00 134.23,94.00 Z M 76.86,98.01 C 76.86,98.01 71.00,137.00 71.00,137.00 71.00,137.00 81.00,137.00 81.00,137.00 81.00,137.00 81.00,98.00 81.00,98.00 81.00,92.54 82.29,85.61 79.00,81.00 79.00,81.00 76.86,98.01 76.86,98.01 Z M 116.00,121.83 C 118.26,119.81 124.29,114.79 122.83,111.37 121.98,109.37 115.08,105.24 113.00,103.81 106.48,99.33 88.24,86.07 82.00,84.00 82.00,84.00 82.00,137.00 82.00,137.00 94.70,135.29 106.38,130.42 116.00,121.83 Z M 142.00,124.32 C 139.93,123.02 136.74,120.63 134.17,121.41 134.17,121.41 119.96,135.00 119.96,135.00 109.58,143.59 96.59,149.37 83.00,150.00 83.00,150.00 83.00,166.00 83.00,166.00 83.00,166.00 108.00,157.86 108.00,157.86 108.00,157.86 163.00,139.00 163.00,139.00 160.77,135.63 146.28,127.00 142.00,124.32 Z M 51.00,130.00 C 51.00,130.00 50.00,131.00 50.00,131.00 50.00,131.00 50.00,130.00 50.00,130.00 50.00,130.00 51.00,130.00 51.00,130.00 Z M 116.00,160.98 C 110.89,162.56 100.16,164.87 97.00,169.00 90.96,168.38 85.08,170.51 84.00,177.00 87.74,177.75 97.58,181.11 99.00,176.00 108.39,176.33 107.03,179.80 105.00,187.00 105.00,187.00 98.00,186.00 98.00,186.00 98.00,186.00 99.00,182.00 99.00,182.00 96.16,181.66 86.89,180.39 84.69,182.00 83.42,182.94 82.30,185.54 81.75,187.00 81.11,188.75 80.58,190.13 81.23,192.00 82.01,194.24 85.30,197.28 87.00,199.00 87.00,199.00 99.91,211.96 99.91,211.96 99.91,211.96 132.83,247.00 132.83,247.00 132.83,247.00 148.09,263.39 148.09,263.39 151.80,265.78 161.67,262.07 163.98,258.59 165.22,256.70 165.00,253.22 165.00,251.00 165.00,251.00 165.00,223.00 165.00,223.00 165.00,223.00 164.08,210.00 164.08,210.00 164.08,210.00 164.78,198.00 164.78,198.00 164.78,198.00 164.78,180.00 164.78,180.00 164.78,180.00 164.78,171.00 164.78,171.00 164.78,171.00 164.00,145.00 164.00,145.00 164.00,145.00 116.00,160.98 116.00,160.98 Z M 47.00,146.00 C 45.93,149.68 42.90,155.95 46.00,159.00 44.50,161.60 41.93,165.08 41.52,168.00 40.89,172.55 43.69,173.14 47.00,171.00 50.46,174.86 57.37,172.22 60.10,168.48 61.32,166.81 62.24,162.29 63.00,160.00 64.97,167.01 65.61,166.14 61.00,172.00 61.00,172.00 66.00,174.00 66.00,174.00 66.00,174.00 67.00,171.00 67.00,171.00 69.85,171.51 71.10,172.09 72.00,169.00 72.00,169.00 80.00,172.00 80.00,172.00 80.00,172.00 79.00,166.00 79.00,166.00 82.57,162.80 80.10,155.48 80.00,151.00 80.00,151.00 69.00,151.00 69.00,151.00 69.00,151.00 68.00,156.00 68.00,156.00 68.00,156.00 59.00,153.00 59.00,153.00 59.00,153.00 63.00,154.00 63.00,154.00 60.97,147.86 52.73,146.88 47.00,146.00 Z M 80.00,172.00 C 80.00,172.00 81.00,173.00 81.00,173.00 81.00,173.00 81.00,172.00 81.00,172.00 81.00,172.00 80.00,172.00 80.00,172.00 Z M 75.00,175.00 C 75.00,175.00 79.00,178.00 79.00,178.00 79.00,178.00 80.00,177.00 80.00,177.00 80.00,177.00 79.00,174.00 79.00,174.00 79.00,174.00 75.00,175.00 75.00,175.00 Z M 42.00,176.00 C 41.17,181.30 41.03,186.76 46.00,190.00 46.00,190.00 45.00,188.00 45.00,188.00 50.25,192.69 50.70,192.54 57.00,195.00 57.00,195.00 53.00,195.00 53.00,195.00 53.00,195.00 53.00,197.00 53.00,197.00 53.00,197.00 66.00,197.00 66.00,197.00 66.00,197.00 65.00,195.00 65.00,195.00 74.51,192.52 79.72,191.03 80.00,180.00 80.00,180.00 70.00,180.00 70.00,180.00 70.00,180.00 75.00,186.00 75.00,186.00 75.00,186.00 66.00,187.00 66.00,187.00 66.00,187.00 63.00,183.00 63.00,183.00 63.00,183.00 65.00,180.00 65.00,180.00 65.00,180.00 60.00,180.00 60.00,180.00 60.00,180.00 62.00,185.00 62.00,185.00 56.07,180.96 54.57,177.35 48.00,179.00 48.00,179.00 49.00,177.00 49.00,177.00 49.00,177.00 42.00,176.00 42.00,176.00 Z M 79.00,182.00 C 79.00,182.00 78.00,183.00 78.00,183.00 78.00,183.00 78.00,182.00 78.00,182.00 78.00,182.00 79.00,182.00 79.00,182.00 Z M 113.00,261.42 C 93.47,246.23 65.58,244.02 44.00,256.17 23.13,267.92 9.84,291.95 12.17,316.00 12.80,322.54 14.72,328.89 17.06,335.00 32.99,376.47 89.98,385.72 119.91,353.99 130.35,342.91 136.64,327.21 136.99,312.00 137.24,300.84 134.55,293.25 131.00,283.00 124.20,284.07 119.20,286.88 113.00,289.58 105.35,292.90 93.76,298.20 87.00,302.75 87.00,302.75 77.58,310.72 77.58,310.72 76.65,311.46 74.99,312.71 73.90,311.43 72.86,310.21 74.34,308.98 75.16,308.28 75.16,308.28 84.99,300.29 84.99,300.29 100.47,288.67 109.48,285.55 127.00,278.00 124.32,271.15 118.71,265.87 113.00,261.42 Z M 177.00,255.00 C 177.00,255.00 178.00,256.00 178.00,256.00 178.00,256.00 178.00,255.00 178.00,255.00 178.00,255.00 177.00,255.00 177.00,255.00 Z";
selopt();
var rot = fnrot(parseFloat(ary.lat), parseFloat(ary.lng), parseFloat(aryold.lat), parseFloat(aryold.lng));
if (opt == 'walking')
{
var obj = {path: pman, scale: .2, fillColor: 'brown', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 1, rotation: rot};
} else if (opt == 'driving')
{
var obj = {path: pcar, scale: .3, fillColor: 'red', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 1, rotation: rot};
} else if (opt == 'arrow')
{
var obj = {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 3, fillColor: 'blue', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 2, rotation: rot};
} else if (opt == 'bike')
{
var obj = {path: pbike, scale: .08, fillColor: 'yellow', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: .5, rotation: rot};
} else if (opt == 'circle')
{
var obj = {path: google.maps.SymbolPath.CIRCLE, scale: 4, fillColor: 'yellow', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 2, rotation: 0};
} else
var obj = {path: google.maps.SymbolPath.marker, scale: 2, fillColor: 'blue', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 2, rotation: 0};
marker = new google.maps.Marker({
map: map,
visible: false,
icon: obj,
position: ary
});
if (fn_findstr(msg, ary.lat) != "")
{
str1 = fn_findstr(msg, ary.lat);
}
document.getElementById('msg').value = str1;
markers.push(marker);
for (a = 0; a < i; a++)
markers[a].setVisible(false);
markers[i].setVisible(true);
}
function fn_findstr(strarr, strval) //str1 array and str2 value
{
for (ii = 0; ii < strarr.length; ii++)
{
if (strarr[ii].indexOf(strval) == 0) {
rt = strarr[ii].split(',');
return rt[2].replace(/<\/b>/g, " ").replace(/<b>/g, ' ');
}
}
return '';
}
function calroutef()
{
for (i = 0; i < flightpc.length; i++)
{
nn = i + 1;
route1 = flightpc[i];
route2 = flightpc[nn];
if (nn == flightpc.length) {
route2 = route1;
}
var dif_lat = (route1.lat - route2.lat) / divrule;
var dif_lng = (route1.lng - route2.lng) / divrule;
// alert(dif_lat+' '+dif_lng);
// flightpc_final.push({ lat: route1.lat , lng: route1.lng });
for (ii = 0; ii < divrule; ii++)
{
if (dif_lat > 0 && route1.lat > route2.lat) {
froute.lat = route1.lat - dif_lat * ii;
} else if (dif_lat < 0 && route2.lat > route1.lat) {
froute.lat = route1.lat - dif_lat * ii;
}
if (dif_lng > 0 && route1.lng > route2.lng) {
froute.lng = route1.lng - dif_lng * ii;
} else if (dif_lng < 0 && route2.lng > route1.lng) {
froute.lng = route1.lng - dif_lng * ii;
}
flightpc_final.push({lat: froute.lat, lng: froute.lng});
// flightpc_final.push("{ lat:"+ froute.lat +","+" lng:"+ froute.lng+" }");
}
//flightpc_final.push({ lat: route1.lat , lng: route1.lng });
}
//alert(flightpc_final);
//alert(flightpc);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsJ8vVyCoHrvZuGxuhcwhlDEZtevVyoo8&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Other Images.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./script/mystyle.css">
<title>Direction</title>
</head>
<body>
<div id="map"></div>
<div id="bottom3">
<table id="t01">
<tr><td id="01">Start Point</td><td><input id="start" value="gagan vihar,east delhi,delhi"></td><td><input type="checkbox" id="show" name="show" >Route</td></tr>
<tr><td id="01">End Point</td><td><input id="end" value="preet vihar,delh"></td><td>Rotation:<input id="loc" size=5 value=""></td></tr>
<tr><td id="01">Drive Mode</td><td>
<input type="radio" id="drive" name="drive" value="driving">Driving
<input type="radio" id="walking" name="drive" value="walking">Walking
<input type="radio" id="bicycle" name="drive" value="bike" >Bicycle
<input type="radio" id="arrow" name="drive" value="arrow" >Arrow
<input type="radio" id="circle" name="drive" value="circle" >Circle
<input type="radio" id="marker1" name="drive" value="marker" >Marker
</td><tr>
<tr><td id="01">Directions</td><td><input id="msg" size=50/></td><td><input type="button" id="submit" value="submit" > </td><tr>
</table>
</div>
<div id="directionsPanel" style="visibility:hidden"></div>
<div id="warnings-panel">aaa</div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
var z = 0;
var opt;
var car = 'car.png';
var markers = [];
var iconbase = "./";
var flightPath;
var flightpc1, flightpc;
var marker;
var map;
var i = 0;
var i_timer = 0;
var ii = 0, nn = 0;
var dif_lat, dif_lng;
var fpath;
var flightpc_final = new Array();
var divrule = 20;
//b = new Object();
var froute = [];
var image;
var msg = [];
var stepDisplay, directionsService, directionsDisplay;
var markerArray = [];
function init()
{
flightpc = [];
flightpc_final = [];
}
function initMap() {
//initialize
directionsService = new google.maps.DirectionsService;
stepDisplay = new google.maps.InfoWindow;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay = new google.maps.DirectionsRenderer({map: map});
init();
// flightpc=[];
var onChangeHandler = function () {
calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map);
};
//define events
document.getElementById('submit').addEventListener('click', onChangeHandler);
document.getElementById('show').addEventListener('click', fnshow);
}
function fnshow()
{
if (document.getElementById('show').checked)
document.getElementById('directionsPanel').style.visibility = "visible";
else
document.getElementById('directionsPanel').style.visibility = "hidden";
}
function selopt()
{
var drive_group = document.getElementsByName('drive');
for (i = 0; i < drive_group.length; i++)
{
if (drive_group[i].checked) {
opt = drive_group[i].value;
break;
}
}
}
function calculateAndDisplayRoute(directionsDisplay, directionsService,
markerArray, stepDisplay, map)
{
init();
selopt();
var tmode = google.maps.TravelMode.DRIVING;
if (opt == 'driving')
tmode = google.maps.TravelMode.DRIVING;
else if (opt == 'walking')
tmode = google.maps.TravelMode.WALKING;
else if (opt == 'bicycle')
tmode = google.maps.TravelMode.BICYCLING;
// First, remove any existing markers from the map.
for (var i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
// Retrieve the start and end locations and create a DirectionsRequest using
// WALKING directions.
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
drivingOptions: {
departureTime: new Date(Date.now()), // for the time N milliseconds from now.
trafficModel: "optimistic"
}, travelMode: tmode
}, function (response, status) {
// Route the directions and pass the response to a function to create
// markers for each step.
if (status === google.maps.DirectionsStatus.OK) {
document.getElementById('warnings-panel').innerHTML =
'<b>' + response.routes[0].warnings + '</b>';
directionsDisplay.setDirections(response);
showSteps(response, markerArray, stepDisplay, map);
} else {
window.alert('Directions request failed due to ' + status);
}
});
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function showSteps(directionResult, markerArray, stepDisplay, map) {
// For each step, place a marker, and add the text to the marker's infowindow.
// Also attach the marker to an array so we can keep track of it and remove it
// when calculating new routes.
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
marker.setMap(map);
marker.setPosition(myRoute.steps[i].start_location);
var tmp = (myRoute.steps[i].start_location + ' ').replace('(', '').replace(')', '').split(',');
flightpc.push({lat: parseFloat(tmp[0]), lng: parseFloat(tmp[1])});
attachInstructionText(stepDisplay, marker, myRoute.steps[i].instructions, map);
msg.push(myRoute.steps[i].start_location.lat() + ',' + myRoute.steps[i].start_location.lng() + ',' + myRoute.steps[i].instructions);
}
calroutef();
var seti = setInterval(function () {
if (i_timer < flightpc.length * divrule) {
showmarker(flightpc_final[i_timer], flightpc_final[i_timer == 0 ? i_timer : i_timer - 1], i_timer);
i_timer++
} else
clearInterval(seti);
}, 200);
}
function attachInstructionText(stepDisplay, marker, text, map) {
google.maps.event.addListener(marker, 'click', function () {
// Open an info window when the marker is clicked on, containing the text
// of the step.
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
function fn1()
{
document.getElementById("img").style.transform = "rotate(50deg)";
}
//apply rotation on object
function fnrot(lat2, lng2, lat1, lng1) {
var dLon = (lng2 - lng1);
var y = Math.sin(dLon) * Math.cos(lat2);
var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
var brng = (Math.atan2(y, x) * 180 / Math.PI);
return 360 - ((brng + 360) % 360);
}
;
function showmarker(ary, aryold, i)
{
var pcar = "M 4.00,16.50 3.80,13.45 4.98,11.18 9.89,1.77 28.76,2.03 37.00,6.06 44.80,9.88 45.98,13.99 46.13,22.00 46.13,22.00 46.13,37.00 46.13,37.00 46.42,41.38 46.59,46.37 44.00,50.00 44.00,50.00 48.00,50.00 48.00,50.00 48.00,50.00 48.00,54.00 48.00,54.00 48.00,54.00 46.03,53.00 46.03,53.00 46.03,53.00 46.03,80.00 46.03,80.00 45.94,85.68 46.82,91.09 40.79,94.70 31.82,100.07 20.66,95.70 13.00,100.00 13.00,100.00 4.85,91.89 4.85,91.89 4.85,91.89 4.00,85.00 4.00,85.00 4.00,85.00 4.00,64.00 4.00,64.00 4.00,64.00 5.00,52.00 5.00,52.00 5.00,58.50 4.15,74.78 7.16,79.89 10.85,86.16 26.66,85.76 33.00,84.53 35.74,84.00 38.51,83.10 40.26,80.78 45.02,74.44 40.49,57.31 45.00,51.00 45.00,51.00 40.00,52.00 40.00,52.00 40.00,52.00 42.00,42.00 42.00,42.00 42.00,42.00 33.99,36.87 33.99,36.87 25.35,33.34 17.51,36.08 9.00,38.00 9.00,38.00 6.00,42.00 6.00,42.00 6.00,42.00 10.43,52.40 10.43,52.40 10.43,52.40 19.00,54.00 19.00,54.00 19.00,54.00 39.00,54.00 39.00,54.00 39.00,54.00 39.00,76.00 39.00,76.00 39.00,76.00 8.95,76.00 8.95,76.00 8.95,76.00 8.95,58.00 8.95,58.00 8.66,55.93 8.03,53.10 5.77,52.32 3.80,51.64 1.66,53.13 0.00,54.00 0.00,54.00 0.00,50.00 0.00,50.00 0.00,50.00 4.00,50.00 4.00,50.00 4.00,50.00 4.00,19.00 4.00,19.00 Z M 8.00,39.00 C 8.00,39.00 9.00,40.00 9.00,40.00 9.00,40.00 9.00,39.00 9.00,39.00 9.00,39.00 8.00,39.00 8.00,39.00 Z M 6.00,49.00 C 6.00,49.00 6.00,44.00 6.00,44.00 6.00,44.00 6.00,49.00 6.00,49.00 Z M 43.00,49.00 C 43.00,49.00 43.00,44.00 43.00,44.00 43.00,44.00 43.00,49.00 43.00,49.00 Z M 45.00,52.00 C 45.00,52.00 46.00,53.00 46.00,53.00 46.00,53.00 46.00,52.00 46.00,52.00 46.00,52.00 45.00,52.00 45.00,52.00 Z";
var pman = "M 3.15,0.80 C 5.56,-0.42 8.58,0.41 11.00,0.80 11.00,0.80 19.39,8.35 19.39,8.35 19.39,8.35 24.29,12.24 24.29,12.24 24.29,12.24 64.00,25.00 64.00,25.00 62.19,22.05 60.18,18.20 56.90,16.72 53.13,15.03 45.44,15.32 43.62,10.78 41.76,6.14 45.88,5.03 49.42,5.27 52.66,5.50 62.33,8.40 64.70,10.44 67.75,13.06 68.02,15.68 73.00,20.00 74.15,27.88 79.58,27.49 78.90,38.00 78.76,40.13 78.56,42.06 77.32,43.87 77.32,43.87 70.00,51.00 70.00,51.00 70.00,51.00 66.00,53.00 66.00,53.00 57.12,55.01 55.55,67.28 50.64,69.92 49.59,70.49 48.47,70.56 47.43,69.92 43.68,67.61 46.87,61.69 48.41,59.04 50.56,55.32 52.79,52.42 53.00,48.00 53.00,48.00 61.00,44.00 61.00,44.00 61.00,44.00 46.00,41.55 46.00,41.55 46.00,41.55 31.00,53.00 31.00,53.00 31.00,53.00 32.00,56.00 32.00,56.00 26.18,58.74 15.37,61.71 9.00,62.56 4.76,63.13 0.88,63.09 0.15,57.98 -1.55,46.06 15.63,49.01 22.91,44.16 22.91,44.16 36.00,31.00 36.00,31.00 31.18,29.91 24.78,29.43 22.00,25.00 15.69,24.12 6.63,15.79 1.00,12.00 1.00,12.00 2.00,10.00 2.00,10.00 -0.85,7.44 -0.64,2.20 3.15,0.80 Z M 88.04,27.65 C 101.96,23.42 105.10,47.98 90.00,46.87 88.24,46.75 86.59,46.31 85.14,45.26 83.29,43.93 82.32,42.17 81.76,40.00 81.76,40.00 81.00,32.00 81.00,32.00 83.13,30.51 85.56,28.41 88.04,27.65 Z";
var pbike = "M 27.00,133.25 C 6.72,116.26 -3.67,83.81 2.52,58.00 5.14,47.09 17.83,26.76 26.00,19.09 35.54,10.15 48.20,4.57 61.00,2.26 61.00,2.26 79.00,0.00 79.00,0.00 82.93,2.14 87.71,1.97 92.00,3.21 101.97,6.08 107.41,8.41 116.00,14.44 137.75,29.70 147.49,49.92 148.90,76.00 149.07,79.17 148.29,86.82 147.69,90.00 146.01,98.94 141.47,108.16 137.00,116.00 137.00,116.00 157.00,128.67 157.00,128.67 157.00,128.67 167.00,134.00 167.00,134.00 167.86,137.64 171.37,136.00 174.04,135.19 188.45,130.82 180.87,130.56 191.00,125.00 191.00,125.00 191.00,137.00 191.00,137.00 187.85,138.43 188.78,145.94 189.06,149.01 189.99,158.96 196.99,171.73 186.00,178.00 186.00,178.00 182.28,160.00 182.28,160.00 182.28,160.00 179.11,154.00 179.11,154.00 179.11,154.00 176.00,148.00 176.00,148.00 176.00,148.00 176.00,146.00 176.00,146.00 176.00,146.00 178.00,140.00 178.00,140.00 168.37,141.12 170.08,148.26 170.44,156.00 170.44,156.00 171.00,255.00 171.00,255.00 174.72,254.19 182.65,253.97 186.00,255.59 186.00,255.59 193.00,260.00 193.00,260.00 194.30,243.40 187.51,246.12 190.00,232.00 190.00,232.00 199.00,231.00 199.00,231.00 200.49,241.55 203.22,245.81 200.50,257.00 199.52,261.04 197.82,265.35 193.00,265.59 189.56,265.76 182.56,261.54 179.00,260.00 175.80,266.25 172.76,264.82 167.00,267.20 158.60,270.66 151.26,276.16 142.00,277.00 143.99,291.12 148.02,293.55 148.00,310.00 147.97,331.24 137.46,354.03 121.00,367.54 115.52,372.03 108.55,376.37 102.00,379.13 97.42,381.05 93.86,380.90 90.00,384.14 90.00,384.14 73.00,384.14 73.00,384.14 73.00,384.14 59.00,384.14 59.00,384.14 57.88,381.52 49.88,380.33 47.00,379.14 37.66,375.29 30.56,370.99 23.42,363.72 14.23,354.34 9.00,344.54 5.43,332.00 3.72,326.02 3.32,317.16 1.00,313.00 1.00,313.00 3.00,312.00 3.00,312.00 1.13,309.76 1.97,306.85 2.23,304.00 2.03,300.60 1.85,297.38 2.23,294.00 5.00,279.96 16.71,262.64 27.00,253.09 39.15,241.81 52.86,237.11 69.00,235.38 69.00,235.38 76.00,234.34 76.00,234.34 76.00,234.34 82.00,235.33 82.00,235.33 105.35,238.54 126.40,250.01 137.00,272.00 137.00,272.00 143.00,266.00 143.00,266.00 143.00,266.00 120.83,243.00 120.83,243.00 120.83,243.00 91.00,212.00 91.00,212.00 91.00,212.00 80.25,200.85 80.25,200.85 80.25,200.85 75.07,197.19 75.07,197.19 75.07,197.19 72.00,199.00 72.00,199.00 64.11,198.86 57.34,202.82 47.00,195.36 43.81,193.06 40.77,189.64 39.22,186.00 38.03,183.20 38.14,179.72 35.69,177.58 32.83,175.10 26.64,175.03 23.00,175.00 23.00,175.00 23.00,177.00 23.00,177.00 23.00,177.00 27.00,178.00 27.00,178.00 27.00,178.00 16.00,178.00 16.00,178.00 16.00,178.00 13.00,170.00 13.00,170.00 17.78,166.66 19.96,164.61 26.00,167.00 24.04,172.49 34.50,171.85 38.00,172.00 38.00,172.00 41.00,153.00 41.00,153.00 41.00,153.00 44.00,144.00 44.00,144.00 37.37,141.90 32.26,137.65 27.00,133.25 Z M 134.23,94.00 C 140.38,74.05 136.06,51.05 122.68,35.00 93.96,0.55 36.14,7.26 18.17,48.00 7.65,71.87 10.89,97.22 28.29,117.00 35.14,124.78 43.37,129.96 53.00,133.58 55.44,134.49 60.93,136.78 63.26,134.99 65.77,133.07 64.97,124.11 65.00,121.00 65.00,121.00 69.33,82.00 69.33,82.00 69.77,78.60 69.42,70.55 74.00,70.03 77.96,69.57 76.90,74.16 81.00,77.00 81.00,77.00 82.00,67.00 82.00,67.00 82.00,69.87 81.54,76.18 82.99,78.49 84.49,80.87 92.32,85.86 95.00,87.67 102.50,92.73 120.29,106.43 128.00,108.00 128.00,108.00 134.23,94.00 134.23,94.00 Z M 76.86,98.01 C 76.86,98.01 71.00,137.00 71.00,137.00 71.00,137.00 81.00,137.00 81.00,137.00 81.00,137.00 81.00,98.00 81.00,98.00 81.00,92.54 82.29,85.61 79.00,81.00 79.00,81.00 76.86,98.01 76.86,98.01 Z M 116.00,121.83 C 118.26,119.81 124.29,114.79 122.83,111.37 121.98,109.37 115.08,105.24 113.00,103.81 106.48,99.33 88.24,86.07 82.00,84.00 82.00,84.00 82.00,137.00 82.00,137.00 94.70,135.29 106.38,130.42 116.00,121.83 Z M 142.00,124.32 C 139.93,123.02 136.74,120.63 134.17,121.41 134.17,121.41 119.96,135.00 119.96,135.00 109.58,143.59 96.59,149.37 83.00,150.00 83.00,150.00 83.00,166.00 83.00,166.00 83.00,166.00 108.00,157.86 108.00,157.86 108.00,157.86 163.00,139.00 163.00,139.00 160.77,135.63 146.28,127.00 142.00,124.32 Z M 51.00,130.00 C 51.00,130.00 50.00,131.00 50.00,131.00 50.00,131.00 50.00,130.00 50.00,130.00 50.00,130.00 51.00,130.00 51.00,130.00 Z M 116.00,160.98 C 110.89,162.56 100.16,164.87 97.00,169.00 90.96,168.38 85.08,170.51 84.00,177.00 87.74,177.75 97.58,181.11 99.00,176.00 108.39,176.33 107.03,179.80 105.00,187.00 105.00,187.00 98.00,186.00 98.00,186.00 98.00,186.00 99.00,182.00 99.00,182.00 96.16,181.66 86.89,180.39 84.69,182.00 83.42,182.94 82.30,185.54 81.75,187.00 81.11,188.75 80.58,190.13 81.23,192.00 82.01,194.24 85.30,197.28 87.00,199.00 87.00,199.00 99.91,211.96 99.91,211.96 99.91,211.96 132.83,247.00 132.83,247.00 132.83,247.00 148.09,263.39 148.09,263.39 151.80,265.78 161.67,262.07 163.98,258.59 165.22,256.70 165.00,253.22 165.00,251.00 165.00,251.00 165.00,223.00 165.00,223.00 165.00,223.00 164.08,210.00 164.08,210.00 164.08,210.00 164.78,198.00 164.78,198.00 164.78,198.00 164.78,180.00 164.78,180.00 164.78,180.00 164.78,171.00 164.78,171.00 164.78,171.00 164.00,145.00 164.00,145.00 164.00,145.00 116.00,160.98 116.00,160.98 Z M 47.00,146.00 C 45.93,149.68 42.90,155.95 46.00,159.00 44.50,161.60 41.93,165.08 41.52,168.00 40.89,172.55 43.69,173.14 47.00,171.00 50.46,174.86 57.37,172.22 60.10,168.48 61.32,166.81 62.24,162.29 63.00,160.00 64.97,167.01 65.61,166.14 61.00,172.00 61.00,172.00 66.00,174.00 66.00,174.00 66.00,174.00 67.00,171.00 67.00,171.00 69.85,171.51 71.10,172.09 72.00,169.00 72.00,169.00 80.00,172.00 80.00,172.00 80.00,172.00 79.00,166.00 79.00,166.00 82.57,162.80 80.10,155.48 80.00,151.00 80.00,151.00 69.00,151.00 69.00,151.00 69.00,151.00 68.00,156.00 68.00,156.00 68.00,156.00 59.00,153.00 59.00,153.00 59.00,153.00 63.00,154.00 63.00,154.00 60.97,147.86 52.73,146.88 47.00,146.00 Z M 80.00,172.00 C 80.00,172.00 81.00,173.00 81.00,173.00 81.00,173.00 81.00,172.00 81.00,172.00 81.00,172.00 80.00,172.00 80.00,172.00 Z M 75.00,175.00 C 75.00,175.00 79.00,178.00 79.00,178.00 79.00,178.00 80.00,177.00 80.00,177.00 80.00,177.00 79.00,174.00 79.00,174.00 79.00,174.00 75.00,175.00 75.00,175.00 Z M 42.00,176.00 C 41.17,181.30 41.03,186.76 46.00,190.00 46.00,190.00 45.00,188.00 45.00,188.00 50.25,192.69 50.70,192.54 57.00,195.00 57.00,195.00 53.00,195.00 53.00,195.00 53.00,195.00 53.00,197.00 53.00,197.00 53.00,197.00 66.00,197.00 66.00,197.00 66.00,197.00 65.00,195.00 65.00,195.00 74.51,192.52 79.72,191.03 80.00,180.00 80.00,180.00 70.00,180.00 70.00,180.00 70.00,180.00 75.00,186.00 75.00,186.00 75.00,186.00 66.00,187.00 66.00,187.00 66.00,187.00 63.00,183.00 63.00,183.00 63.00,183.00 65.00,180.00 65.00,180.00 65.00,180.00 60.00,180.00 60.00,180.00 60.00,180.00 62.00,185.00 62.00,185.00 56.07,180.96 54.57,177.35 48.00,179.00 48.00,179.00 49.00,177.00 49.00,177.00 49.00,177.00 42.00,176.00 42.00,176.00 Z M 79.00,182.00 C 79.00,182.00 78.00,183.00 78.00,183.00 78.00,183.00 78.00,182.00 78.00,182.00 78.00,182.00 79.00,182.00 79.00,182.00 Z M 113.00,261.42 C 93.47,246.23 65.58,244.02 44.00,256.17 23.13,267.92 9.84,291.95 12.17,316.00 12.80,322.54 14.72,328.89 17.06,335.00 32.99,376.47 89.98,385.72 119.91,353.99 130.35,342.91 136.64,327.21 136.99,312.00 137.24,300.84 134.55,293.25 131.00,283.00 124.20,284.07 119.20,286.88 113.00,289.58 105.35,292.90 93.76,298.20 87.00,302.75 87.00,302.75 77.58,310.72 77.58,310.72 76.65,311.46 74.99,312.71 73.90,311.43 72.86,310.21 74.34,308.98 75.16,308.28 75.16,308.28 84.99,300.29 84.99,300.29 100.47,288.67 109.48,285.55 127.00,278.00 124.32,271.15 118.71,265.87 113.00,261.42 Z M 177.00,255.00 C 177.00,255.00 178.00,256.00 178.00,256.00 178.00,256.00 178.00,255.00 178.00,255.00 178.00,255.00 177.00,255.00 177.00,255.00 Z";
selopt();
var rot = fnrot(parseFloat(ary.lat), parseFloat(ary.lng), parseFloat(aryold.lat), parseFloat(aryold.lng));
if (opt == 'walking')
{
var obj = {path: pman, scale: .2, fillColor: 'brown', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 1, rotation: rot};
} else if (opt == 'driving')
{
var obj = {path: pcar, scale: .3, fillColor: 'red', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 1, rotation: rot};
} else if (opt == 'arrow')
{
var obj = {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 3, fillColor: 'blue', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 2, rotation: rot};
} else if (opt == 'bike')
{
var obj = {path: pbike, scale: .08, fillColor: 'yellow', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: .5, rotation: rot};
} else if (opt == 'circle')
{
var obj = {path: google.maps.SymbolPath.CIRCLE, scale: 4, fillColor: 'yellow', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 2, rotation: 0};
} else
var obj = {path: google.maps.SymbolPath.marker, scale: 2, fillColor: 'blue', fillOpacity: 0.8, strokeColor: 'black', strokeWeight: 2, rotation: 0};
marker = new google.maps.Marker({
map: map,
visible: false,
icon: obj,
position: ary
});
if (fn_findstr(msg, ary.lat) != "")
{
str1 = fn_findstr(msg, ary.lat);
}
document.getElementById('msg').value = str1;
markers.push(marker);
for (a = 0; a < i; a++)
markers[a].setVisible(false);
markers[i].setVisible(true);
}
function fn_findstr(strarr, strval) //str1 array and str2 value
{
for (ii = 0; ii < strarr.length; ii++)
{
if (strarr[ii].indexOf(strval) == 0) {
rt = strarr[ii].split(',');
return rt[2].replace(/<\/b>/g, " ").replace(/<b>/g, ' ');
}
}
return '';
}
function calroutef()
{
for (i = 0; i < flightpc.length; i++)
{
nn = i + 1;
route1 = flightpc[i];
route2 = flightpc[nn];
if (nn == flightpc.length) {
route2 = route1;
}
var dif_lat = (route1.lat - route2.lat) / divrule;
var dif_lng = (route1.lng - route2.lng) / divrule;
// alert(dif_lat+' '+dif_lng);
// flightpc_final.push({ lat: route1.lat , lng: route1.lng });
for (ii = 0; ii < divrule; ii++)
{
if (dif_lat > 0 && route1.lat > route2.lat) {
froute.lat = route1.lat - dif_lat * ii;
} else if (dif_lat < 0 && route2.lat > route1.lat) {
froute.lat = route1.lat - dif_lat * ii;
}
if (dif_lng > 0 && route1.lng > route2.lng) {
froute.lng = route1.lng - dif_lng * ii;
} else if (dif_lng < 0 && route2.lng > route1.lng) {
froute.lng = route1.lng - dif_lng * ii;
}
flightpc_final.push({lat: froute.lat, lng: froute.lng});
// flightpc_final.push("{ lat:"+ froute.lat +","+" lng:"+ froute.lng+" }");
}
//flightpc_final.push({ lat: route1.lat , lng: route1.lng });
}
//alert(flightpc_final);
//alert(flightpc);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsJ8vVyCoHrvZuGxuhcwhlDEZtevVyoo8&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Other Images.
No comments:
Post a Comment