Click here to Skip to main content
15,881,559 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi am developing a project with google map. In this i want to show the particular vehicle latitude and longitude. And put markers for each lat and lng. And also draw a polyline.

Now i have to refresh the map in 5 seconds. In this my polyline affecting, not showing in good. This is my code

var markers = [];
function submit() {
markers = [];
$.ajax({
url: "/map/GetLatitudeValues",
type: 'post',
dataType: 'json',
// imei:null,
data: {imei: $("#imei").val()},
async: false,
success: function (data) {
var Objects = data;
for (var key in Objects) {
markers.push({"lat": Objects[key].Latitude, "lng": Objects[key].Longitude});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
}); loadmap();
setInterval("submit()", 5000);
// loadmap();
}
$(document).ready(function () {

});

function loadmap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
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
});
latlngbounds.extend(marker.position);
(function (marker, data) {
var infoWindow = new google.maps.InfoWindow({ content: $("#imei").val() + 'Latitude : ' + data.lat + 'Longitude : ' + data.lng});
google.maps.event.addListener(marker, "click", function (e) {
google.maps.event.trigger(map, 'resize');
infoWindow.open(map, marker);
});

})(marker, data);

}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);

//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' });
// var path = poly.getPath();
// path.push(new google.maps.LatLng(data.lat,data.lng));
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];
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.TRANSIT
},
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]);
}
}
});
}
}
}
</script>



<input type ="text" id="imei" name="imei" />
<input type="button" value="submit" onclick="submit()" />
Please any one help with this...
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900