Google Map Draw route between two cities
var markers = [];
var map = '';
function ShowTrack(address) {
markers = [];
debugger;
var lst = address.split('~');
GetMarkers(address);
{
if (lst.length > 1) {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var lat_lng = new Array();
var latlng = [];
var myLatlng = [];
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
//latlng.push(data.lat + "~" + data.lng);
latlng.push({ "lat": data.lat, "lng": data.lng });
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
}
google.maps.event.addListenerOnce(map, 'idle', function () {
google.maps.event.trigger(map, 'resize');
// map.setCenter(latlngbounds.getCenter());
var center = new google.maps.LatLng(50, 3, 10.9);
map.setCenter(center);
map.fitBounds(latlngbounds);
});
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 {
initMap(latlng);
}
});
}
}
}
}
}
function initMap(latlng) {
debugger;
var flightPath = new google.maps.Polyline({
path: latlng,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
function GetMarkers(address) {
var list = [];
list = address.split('~');
debugger;
for (var index = 0; index < list.length; index++) {
var desc = list[index];
if (desc != "") {
if (index == 0) {
desc = "Pickup Location
" + " " + desc;
}
var Address = getLatLon(list[index]);
markers.push({
"title": list[index],
"lat": Address.location.lat,
"lng": Address.location.lng,
"description": desc
})
} //Check if Location text is not empty
}
}
function getLatLon(addr) {
if (addr != "") {
addr = addr.replace(new RegExp(" ", 'g'), "+");
ajax_url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + addr + "&sensor=false";
var result = {};
$.ajax({
url: ajax_url,
dataType: 'json',
async: false,
data: {},
success: function (data) {
result = {
"location": {
"lat": data.results[0].geometry.location.lat,
"lng": data.results[0].geometry.location.lng
}
};
},
error: function (xhr, status, error) {
if (xhr.status == 200) {
isSessionExpiresErrorMessage(xhr);
}
else {
$('.loader').hide();
alert(status);
alert(error);
}
}
});
}
return result;
}
var map = '';
function ShowTrack(address) {
markers = [];
debugger;
var lst = address.split('~');
GetMarkers(address);
{
if (lst.length > 1) {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var lat_lng = new Array();
var latlng = [];
var myLatlng = [];
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
//latlng.push(data.lat + "~" + data.lng);
latlng.push({ "lat": data.lat, "lng": data.lng });
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
}
google.maps.event.addListenerOnce(map, 'idle', function () {
google.maps.event.trigger(map, 'resize');
// map.setCenter(latlngbounds.getCenter());
var center = new google.maps.LatLng(50, 3, 10.9);
map.setCenter(center);
map.fitBounds(latlngbounds);
});
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 {
initMap(latlng);
}
});
}
}
}
}
}
function initMap(latlng) {
debugger;
var flightPath = new google.maps.Polyline({
path: latlng,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
function GetMarkers(address) {
var list = [];
list = address.split('~');
debugger;
for (var index = 0; index < list.length; index++) {
var desc = list[index];
if (desc != "") {
if (index == 0) {
desc = "Pickup Location
" + " " + desc;
}
var Address = getLatLon(list[index]);
markers.push({
"title": list[index],
"lat": Address.location.lat,
"lng": Address.location.lng,
"description": desc
})
} //Check if Location text is not empty
}
}
function getLatLon(addr) {
if (addr != "") {
addr = addr.replace(new RegExp(" ", 'g'), "+");
ajax_url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + addr + "&sensor=false";
var result = {};
$.ajax({
url: ajax_url,
dataType: 'json',
async: false,
data: {},
success: function (data) {
result = {
"location": {
"lat": data.results[0].geometry.location.lat,
"lng": data.results[0].geometry.location.lng
}
};
},
error: function (xhr, status, error) {
if (xhr.status == 200) {
isSessionExpiresErrorMessage(xhr);
}
else {
$('.loader').hide();
alert(status);
alert(error);
}
}
});
}
return result;
}
Comments
Post a Comment