गूगल मैप्स मार्ग

Question

दिखाई नहीं दे रहा दो मार्करों के बीच एक मार्ग दिखाने के लिए कोशिश कर रहा हूँ, लेकिन नक्शे हमेशा से ही आयरलैंड के डिफ़ॉल्ट स्थान दिखाया जा रहा है और नहीं दिखा रहा है मार्ग

public string DrawMapDirections(string Start,string End,string[] WayPoints) 
{ 
    string map = "<script type=\"text/javascript\" src=\"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false\"></script>" + 
    "<script>" + 
     "var rendererOptions = { "+ 
      "draggable: true "+ 
     "}; " + 
     "var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); " + 
     " var directionsService = new google.maps.DirectionsService(); " + 
     " var map; " + 

     "function initialize() { " + 
      "var ireland = new google.maps.LatLng(53.085222, -7.558594); " + //Default Ireland 
      " var mapOptions = { " + 
      " zoom: 7, " + 
      " mapTypeId: google.maps.MapTypeId.ROADMAP," + 
      " center: ireland " + 
      "}; " + 
      "map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); " + 
      "directionsDisplay.setMap(map); " + 
      "directionsDisplay.setPanel(document.getElementById('directionsPanel'));" + 

      "google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { " + 
       "computeTotalDistance(directionsDisplay.directions); "+ 
      "}); "+ 
      //Call calcRoute 
      " calcRoute();" + 
     "}" + 

     "function calcRoute() { " + 
      "var start = '" + Start.Replace("'", "") + "'; " + 
      "var end = '" + End.Replace("'", "") + "'; " + 
      "var waypts = []; "; 

    foreach (string s in WayPoints) 
    { 
     map += "waypts.push({ " + 
       "location:'" + s.Replace("'","") + "'}); "; 
    } 
      map += "var request = { " + 
       "origin: start, " + 
       "destination: end, " + 
       "waypoints: waypts, " + 
       "optimizeWaypoints: document.getElementById('chkOptimizeWaypoints').checked, " + 
       "durationInTraffic:document.getElementById('chkDurationInTraffic').checked , " + 
       "provideRouteAlternatives: document.getElementById('chkProvideRouteAlternatives').checked," + 
       "avoidHighways: document.getElementById('chkAvoidHighWays').checked," + 
       "avoidTolls: document.getElementById('chkAvoidTolls').checked, " + 
       "travelMode: google.maps.DirectionsTravelMode.DRIVING " + 
      "}; " + 
      "directionsService.route(request, function(response, status) { " + 
       "if (status == google.maps.DirectionsStatus.OK) {" + 
        "directionsDisplay.setDirections(response);" + 
        "var route = response.routes[0];" + 
       "}" + 
      "});" + 
     " }" + 

     "function computeTotalDistance(result) { "+ 
      "var total = 0; "+ 
      "var myroute = result.routes[0]; " + 
      "for (i = 0; i < myroute.legs.length; i++) { "+ 
       "total += myroute.legs[i].distance.value; "+ 
      "} "+ 
      "total = total/1000; "+ 
      "document.getElementById('total').innerHTML = total + ' km'; "+ 
     "} "+ 

     "</script>"; 
    return map; 
} 

प्रारंभ और अंत बिंदु इस समारोह के माध्यम से पारित हो:

GoogleMap gm = new GoogleMap(); 
html += gm.DrawMapDirections(start, end, waypoints.ToArray()); 

तो उदाहरण के लिए शुरू की तरह कुछ हो सकता है - Treloggan इंडस्ट्रीज़ स्था, न्यूक्वे, TR7 2SX, कॉर्नवाल, यूनाइटेड किंगडम।

मैं नहीं किसी भी त्रुटि तो मैं क्यों यह मार्ग

यहाँ ठीक से प्रदर्शित नहीं करता नहीं जानता कि क्या नक्शा रिटर्न हो रही है:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
var rendererOptions = { draggable: true }; 
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
var directionsService = new google.maps.DirectionsService(); 
var map; function initialize() { 
    var ireland = new google.maps.LatLng(53.085222, -7.558594); 
    var mapOptions = { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: ireland }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directionsPanel')); 
    google.maps.event.addListener(directionsDisplay, 'directions_changed', 

     function() { 
      computeTotalDistance(directionsDisplay.directions); 
     }); 
     calcRoute() 
    ;} 
    function calcRoute() { 
    var start = 'Unit 2, Hendy Industrial Estate, Hendy, SWANSEA, SA4 0XP, West Glamorgan, UNITED KINGDOM'; 
    var end = 'Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM'; 
    var waypts = []; 
    var request = { 
    origin: start, destination: end, 
    waypoints: waypts, optimizeWaypoints: document.getElementById('chkOptimizeWaypoints').checked, 
    durationInTraffic:document.getElementById('chkDurationInTraffic').checked , 
    provideRouteAlternatives: document.getElementById('chkProvideRouteAlternatives').checked, 
    avoidHighways: document.getElementById('chkAvoidHighWays').checked,avoidTolls: document.getElementById('chkAvoidTolls').checked, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK){ 
      directionsDisplay.setDirections(response);var route = response.routes[0];}}); 
     } 
     function computeTotalDistance(result) { 
      var total = 0; 
      var myroute = result.routes[0]; 
      for (i = 0; i < myroute.legs.length; i++) { 
       total += myroute.legs[i].distance.value; } 
       total = total/1000; 
       document.getElementById('total').innerHTML = total + ' km'; 
     } 
    </script> 

Answer 1

आपका कोड मेरे लिए सही लग रहा है। मैंने आपके कोड के साथ एक स्निपेट बनाया और मुझे मार्ग अनुरोध से "नहीं मिला" स्थिति वापस मिली। यदि मैं प्रारंभिक बिंदु को उस पते पर बदलता हूं जो Google मानचित्र ढूंढ सकता है तो मार्ग प्रदर्शित होता है (नीचे स्निपेट में)।

यदि आप शुरुआती बिंदु के अक्षांश और देशांतर को जानते हैं, तो आप इसका उपयोग कर सकते हैं, अन्यथा आपको एक पता होना चाहिए कि दिशा सेवा का ज्ञान हो।

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Direction Service Example</title> 
 
</head> 
 

 
<body> 
 
    <div id="map_canvas" style="width: 600px;height: 600px"></div> 
 
    <script> 
 
    var map; 
 
    var directionsDisplay; 
 
    var directionsService; 
 

 
    function initialize() { 
 
     var ireland = new google.maps.LatLng(53.085222, -7.558594); 
 
     var mapOptions = { 
 
     zoom: 7, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     center: ireland 
 
     }; 
 
     directionsDisplay = new google.maps.DirectionsRenderer({ 
 
     draggable: true 
 
     }); 
 
     directionsService = new google.maps.DirectionsService(); 
 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 
     directionsDisplay.setMap(map); 
 
     directionsDisplay.setPanel(document.getElementById('directionsPanel')); 
 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', 
 

 
     function() { 
 
      computeTotalDistance(directionsDisplay.directions); 
 
     }); 
 
     calcRoute(); 
 
    } 
 

 
    function calcRoute() { 
 
     var start = 'Hendy Industrial Estate, Hendy, Pontarddulais, Swansea, Carmarthenshire SA4 0XP, UK'; 
 
     var end = 'Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM'; 
 
     var waypts = []; 
 
     var request = { 
 
     origin: start, 
 
     destination: end, 
 
     waypoints: waypts, 
 
     optimizeWaypoints: false, 
 
     durationInTraffic: true, 
 
     provideRouteAlternatives: true, 
 
     avoidHighways: false, 
 
     avoidTolls: false, 
 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
     }; 
 
     directionsService.route(request, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
      directionsDisplay.setDirections(response); 
 
      var route = response.routes[0]; 
 
     } 
 
     }); 
 
    } 
 

 
    function computeTotalDistance(result) { 
 
     var total = 0; 
 
     var myroute = result.routes[0]; 
 
     for (i = 0; i < myroute.legs.length; i++) { 
 
     total += myroute.legs[i].distance.value; 
 
     } 
 
     total = total/1000; 
 
     document.getElementById('total').innerHTML = total + ' km'; 
 
    } 
 
    </script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> 
 
</body> 
 

 
</html>

Answer 2

मेरी aspx कोड का प्रयास करें:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Search Route Direction</title> 

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false"> 
    </script> 

    <%--Getting User Current Location--%> 

    <script type="text/javascript"> 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(success); 
     } else { 
      alert("There is Some Problem on your current browser to get Geo Location!"); 
     } 

     function success(position) { 
      var lat = position.coords.latitude; 
      var long = position.coords.longitude; 
      var city = position.coords.locality; 
      var LatLng = new google.maps.LatLng(lat, long); 
      var mapOptions = { 
       center: LatLng, 
       zoom: 12, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions); 
      var marker = new google.maps.Marker({ 
       position: LatLng, 
       title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " 
          + lat + +"<br />Longitude: " + long 
      }); 

      marker.setMap(map); 
      var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" + 
            lat + "<br /> Longitude:" + long + "" 
      }); 
      getInfoWindow.open(map, marker); 
     } 
    </script> 

    <%--Getting Route Direction From User Current Location to Destination--%> 

    <script type="text/javascript"> 
     function SearchRoute() { 
      document.getElementById("MyMapLOC").style.display = 'none'; 

      var markers = new Array(); 
      var myLatLng; 

      //Find the current location of the user. 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function(p) { 
        var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude); 
        var m = {}; 
        m.title = "Your Current Location"; 
        m.lat = p.coords.latitude; 
        m.lng = p.coords.longitude; 
        markers.push(m); 

        //Find Destination address location. 
        var address = document.getElementById("txtDestination").value; 
        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({ 'address': address }, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          m = {}; 
          m.title = address; 
          m.lat = results[0].geometry.location.lat(); 
          m.lng = results[0].geometry.location.lng(); 
          markers.push(m); 
          var mapOptions = { 
           center: myLatLng, 
           zoom: 4, 
           mapTypeId: google.maps.MapTypeId.ROADMAP 
          }; 
          var map = new google.maps.Map(document.getElementById("MapRoute"), mapOptions); 
          var infoWindow = new google.maps.InfoWindow(); 
          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, 
            title: data.title 
           }); 
           latlngbounds.extend(marker.position); 
           (function(marker, data) { 
            google.maps.event.addListener(marker, "click", function(e) { 
             infoWindow.setContent(data.title); 
             infoWindow.open(map, marker); 
            }); 
           })(marker, data); 
          } 
          map.setCenter(latlngbounds.getCenter()); 
          map.fitBounds(latlngbounds); 

          //***********ROUTING****************// 

          //Initialize the Path Array. 
          var path = new google.maps.MVCArray(); 

          //Getting 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 { 
              alert("Invalid location."); 
              window.location.href = window.location.href; 
             } 
            }); 
           } 
          } 
         } else { 
          alert("Request failed.") 
         } 
        }); 

       }); 
      } 
      else { 
       alert('Some Problem in getting Geo Location.'); 
       return; 
      } 
     } 
    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <table style="border: solid 15px blue; width: 100%; vertical-align: central;"> 
     <tr> 
      <td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; 
       text-align: center; font-family: Verdana; font-size: 20pt; color: Green;"> 
       Draw Route Between User's Current Location & Destination On Google Map 
      </td> 
     </tr> 
     <tr> 
      <td style="background-color: skyblue; text-align: center; font-family: Verdana; font-size: 14pt; 
       color: red;"> 
       <b>Enter Destination:</b> 
       <input type="text" id="txtDestination" value="" style="width: 200px" /> 
       <input type="button" value="Search Route" onclick="SearchRoute()" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div id="MyMapLOC" style="width: 550px; height: 470px"> 
       </div> 
       <div id="MapRoute" style="width: 500px; height: 500px"> 
       </div> 
      </td> 
     </tr> 
    </form> 
</body> 
</html>