How to add dyanmic polyline in google map?

Jun 5 2015 7:46 AM

Am now develop a project google map. In this i get the values from sql server database and the data are continuous received in database.

so Marker will be added automatically.... i want to add polyline for markers like 1->2->3->4-> in my coding line adding 1->2,1->3,1->4..etc.. my codings are.

@model System.Collections.Generic.IEnumerable
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var markers = [];
var lat_lng = [];
var mapFlag=0;
function submit
()
 { markers = [];
// lat_lng.length = [];
$
.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); } }); if (mapFlag == 0) { intialize();
}
loadmap
();
mapFlag
= 1;
setInterval
("submit()", 5000);
 }
var mapOptions;
var map;
var latlngbounds; var path, service,poly;
function intialize
() {
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);
lat_lng
= new Array();
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) { infoWindow.open(map, marker); }); })(marker, data); } map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds);

//Initialize the Path Array

path = new google.maps.MVCArray();
//Initialize the Direction Service 
service
= new google.maps.DirectionsService();
}
function loadmap
()
{
if (mapFlag == 1)
 {
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 });
}
}
poly
= new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
 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.TRANSIT });
 } } } </script>
<input type ="text" id="imei" name="imei" />
<input type="button" value="submit" onclick="submit()" />