maps in asp.net using javascript

1 posts, 0 answers
  1. Vishwateja
    Vishwateja avatar
    3 posts
    Member since:
    Jan 2014

    Posted 24 Jan 2014 Link to this post


         var map;
         var myVar;
         var flightPlanArray = [];
         var markerDispSize = 0;
         var directionDisplay;
         var directionsService = new google.maps.DirectionsService();
         initialize();

         function initialize() {
             var markers = JSON.parse('<%#ConvertDataTabletoString() %>');
           function pauseMarker() {
               directionsDisplay = new google.maps.DirectionsRenderer();
                var markersData = [];
                 //alert("starting func outside if var size:" + markerDispSize + "array size:" + markers.length);
                  if (markerDispSize < markers.length) {
                     markerDispSize = markerDispSize + 1;
                    
                     markersData.push(markers[markerDispSize-1]);
                     var mapOptions = {
                         center: new google.maps.LatLng(markersData[0].Latitude, markersData[0].Longitude),
                         zoom:5,
                         mapTypeId: google.maps.MapTypeId.ROADMAP
                     }

                     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                     settingMarkers(markersData);

                 }
                var start = document.getElementById("start").value;
                var end = new google.maps.LatLng(markersData.push(markers[markerDispSize+1]));
                var request = {
                    origin:start,
                    destination:end,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
              
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
              
                var endMarker = new google.maps.Marker({
                    position: end,
                    map: map,
                });
                 
             } setInterval(pauseMarker,3000);

         }
         
         function settingMarkers(markersToSet) {
       
         for (i = 0; i < markersToSet.length; i++) {
                 data = markersToSet[i];
                 if (i == 0) {
                     var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
                     var image = 'images/YellowCar.png'
                     var marker = new google.maps.Marker({
                         position: myLatlng,
                         map: map,
                         icon: image
                     }); directionsDisplay.setMap(map);
                 }


                 (function (map) {
           
                         var myLatLng = new google.maps.LatLng(data.Latitude, data.Longitude);
                         var marker = new google.maps.Marker({
                             position: myLatLng,
                             map: map, icon: image
                         });
                         flightPlanArray.push(myLatLng);
                     drawFlightPlan(flightPlanArray);

                     /* Draw lines between all markers */
                     function drawFlightPlan(flightPlanCoordinates) {
                         var flightPath = new google.maps.Polyline({
                             path: flightPlanCoordinates,
                             geodesic: true,
                             strokeColor: "#ad1700",
                             strokeOpacity: 1.0,
                             strokeWeight: 2
                         });    
                          // To add the marker to the map, call setMap();
                         /* Bind the new flightPath to the map */
                         flightPath.setMap(map);
                         fitBounds(flightPlanCoordinates);
                     }
                 })(map)
             }
         }
Back to Top