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
//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()" />