i am providing you full html page javascript code that is create route map, i was clicked the route that google map was draw and in responses, i get coordinates of route, but my route coordinates and click event coordinates are different. how to get axact coordinates of route that match my click event coordinates. because i am checking car on route or not, my car device send me same as click event coordinates ,that's why i was use click event. kindly help me
What I have tried:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Check Car On Route </title>
<style>
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
#panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; text-align: center; }
#panel, .panel { font-family: 'Roboto' , 'sans-serif'; line-height: 30px; padding-left: 10px; }
#panel select, #panel input, .panel select, .panel input { font-size: 15px; }
#panel select, .panel select { width: 100%; }
#panel i, .panel i { font-size: 12px; }
.panel { height: 25%; overflow: auto; right: 0px !important; }
.adp-placemark, .adp-directions, .adp-legal { display:none }
.adp-list { background: #fff;
padding: 0px !important;
font-family: Roboto,Arial,sans-serif;
font-size: 12px !important;
font-weight: 700;
color: #2c2c2c;
opacity: 0.8; }
.adp-summary{
padding: 0px 200px 0px;
font-size: medium;
background: white;
float: left;
padding-left: 5px;
margin-left: 1px;
font-family: Arial;
font-weight: 600;
opacity: 0.8;
}
.searchBtn2{
z-index: 0;
position: absolute;
left: 88px !important;
top: 35px !important;
height: 20px !important;
}
.searchBtn1{ z-index: 0; position: absolute; left: 88px !important;
top: 10px !important; height: 20px !important;}
</style>
</head>
<body >
<input id="searchTextField" type="text" size="50"
class="searchBtn1"/>
<input id="searchTextField2" type="text" size="50"
class="searchBtn2"/>
<button id="btn1" >
Load
</button>
<button id="Button2" >
Save
</button>
<button id="Button4" >
Get
</button>
<button id="Button3" >
Clear
</button>
<button id="Button7" >
Draw
</button>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.21&libraries=places&sensor=false"></script>
<script type="text/javascript">
var directionsService;
var directionsDisplay;
var data = {};
var savedJsonStr;
var getdrawvalues = [];
var mapse;
function ClearAll() {
directionsDisplay.set('directions', null);
}
function initMap() {
var latlng = new google.maps.LatLng('55.378051', '-3.435973');
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('directionsPanel')
});
directionsDisplay.addListener('directions_changed', function () {
directionsDisplay.getDirections();
});
var input = document.getElementById('searchTextField');
var input2 = document.getElementById('searchTextField2');
var dirDiv = document.getElementById('directionsPanel');
var autocomplete = new google.maps.places.Autocomplete(input);
var autocomplete2 = new google.maps.places.Autocomplete(input2);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input2);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(dirDiv);
}
function displayR() {
displayRoute(
document.getElementById("searchTextField").value,
document.getElementById("searchTextField2").value,
directionsService,
directionsDisplay);
}
function getDirectionsRoute(e) {
if (e.keyCode == 13) {
}
}
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true,
avoidTolls: true
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var overviewPath = response.routes[1].overview_path,
overviewPathGeo = [];
for (var i = 0; i < overviewPath.length; i++) {
overviewPathGeo.push(
[overviewPath[i].lng(), overviewPath[i].lat()]
);
}
// var distance = 10 / 111.12, // Roughly 10km
// geoInput = {
// type: "LineString",
// coordinates: overviewPathGeo
// };
// var arraylength = overviewPathGeo.length;
// for (var i = 0; i < arraylength; i++) {
// var getCordinates = overviewPathGeo[i];
// //Do something
// }
// var flightPath = new google.maps.Polyline({
// path: overviewPathGeo,
// geodesic: true,
// strokeColor: '#FF0000',
// strokeOpacity: 1.0,
// strokeWeight: 2
// });
// flightPath.setMap(map);
// shapesAdd(polygon);
// display.setDirections(overviewPath);
drawpolyMap(overviewPath);
}
else if (!destination || destination == '') {
alert('Please enter destination for directions');
}
else if (!origin || origin == '') {
alert('Please enter origin for directions');
}
else {
alert('Could not display directions due to: ' + status);
}
});
}
function save_waypoints() {
var shapes_JSON;
var w = [], wp;
var rleg = directionsDisplay.directions.routes[directionsDisplay.getRouteIndex()].legs[0];
data.start = { 'lat': rleg.start_location.lat(), 'lng': rleg.start_location.lng() }
data.end = { 'lat': rleg.end_location.lat(), 'lng': rleg.end_location.lng() }
var wp = rleg.via_waypoints;
for (var i = 0; i < wp.length; i++) {
w[i] = [wp[i].lat(), wp[i].lng()]
data.waypoints = w;
}
savedJsonStr = JSON.stringify(data);
PageMethods.setOverlays(savedJsonStr, onSaveSuccess);
//
}
function onSaveSuccess(result) {
alert(result);
}
function loadSaved() {
var obj = JSON.parse(savedJsonStr);
setroute(obj);
}
function setroute(os) {
var wp = [];
if (os.waypoints) {
for (var i = 0; i < os.waypoints.length; i++)
wp[i] = { 'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]), 'stopover': false }
}
directionsService.route({ 'origin': new google.maps.LatLng(os.start.lat, os.start.lng),
'destination': new google.maps.LatLng(os.end.lat, os.end.lng),
'waypoints': wp,
'travelMode': google.maps.DirectionsTravelMode.DRIVING
}, function (res, sts) {
if (sts == 'OK') directionsDisplay.setDirections(res);
})
}
function drawpolyMap(getdrawvalues) {
mapse = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: { lat: 55.378051, lng: -3.435973 },
mapTypeId: google.maps.MapTypeId.TERRAIN
});
google.maps.event.addListener(mapse, "click", function (e) {
var latStr1 = e.latLng.lat();
var latStr = latStr1.toFixed(5);
var LongStr1 = e.latLng.lng();
var LongStr = LongStr1.toFixed(5);
for (var i = 0; i < getdrawvalues.length; i++) {
var latgAry1 = getdrawvalues[i].lat();
var latgAry = latgAry1.toFixed(5);
var lngAry1 = getdrawvalues[i].lng();
var lngAry = lngAry1.toFixed(5);
if (latStr.toString() == latgAry.toString() && lngAry.toString() == LongStr.toString()) {
alert('In Zone');
break;
}
}
});
//lat and lng is available in e object
// var marker = new google.maps.Marker({
// position: latLng,
// map: mapse
// });
// var flightPlanCoordinates = getdrawvalues;
// [
// { lat: 34.5065566216456, lng: 71.21337890625 },
// { lat: 33.1007454051442, lng: 69.43359375 }
//
// ];
var DrawLine = new google.maps.Polyline({
path: getdrawvalues,
geodesic: true,
strokeColor: "#00FF00",
strokeOpacity: 1.8,
strokeWeight: 3,
map: mapse
// fillColor: "#000000",
// fillOpacity: 1.35
});
DrawLine.setMap(getdrawvalues);
// mapse.setZoom(5);
// mapse.setCenter(getdrawvalues);
var DrawLine2 = new google.maps.Polyline({
path: getdrawvalues,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 0.3,
strokeWeight: 15,
fillColor: "#FF0000",
fillOpacity: 1.35,
map: mapse
});
DrawLine2.setMap(mapse);
zoomToObject(getdrawvalues);
}
function zoomToObject(obj) {
var bounds = new google.maps.LatLngBounds();
var points = obj; //obj.getPath().getArray();
for (var n = 0; n < obj.length; n++) {
bounds.extend(points[n]);
}
mapse.fitBounds(bounds);
}
</script>
</body>
</html>
Submit an article or tip