2011-10-29 15 views
4

私はマップ上に方向サービスを配置しようとしていますが、動作させることはできません。ここではhtmlです:GoogleマップV3 - directionServiceが定義されていません

<div> 
     <span class="bold">From:</span> <input id="start" type="text" size="60" maxlength="150" /> &nbsp;&nbsp;&nbsp; 
     <span class="bold">To:</span> <input type="text" disabled="disabled" size="<?php echo $address_length;?>" value="<?php echo $address ;?>"/> 
     <input id="end" type="hidden" value="<?php echo $latlng ;?>" /><br/><br/> 
     <span class="bold">Mode of Travel:</span> 
      <select id="mode"> 
       <option value="DRIVING">Driving</option> 
       <option value="WALKING">Walking</option> 
       <option value="BICYCLING">Bicycling</option> 
      </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <input type="button" class="submit" value="Find Directions!" onclick="calcRoute()";/> 
    </div><br class="clear" /> 
    <div class="inline"> 
     <div id="mapDiv" style="width:950px; height:550px; border:1px solid #FD5F00;"> 
      <noscript><h3 style="color:red; margin:150px 0 0 250px">Oppps. Please activate JavaScript to view this map</h3></noscript> 
     </div> 
    </div> 
</div> 

、ページの下部にダウン私はあなたが緯度経度は、PHPの変数から移入されていることを見ることができるいくつかのインラインJavascriptを

$(function() { 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
initialize(); 
}); 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var latlng = new google.maps.LatLng(<?php echo $latlng; ?>); 
    var myOptions = { 
     zoom:15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: latlng 
    } 
    map = new google.maps.Map(document.getElementById("mapDiv"), myOptions); 
    directionsDisplay.setMap(map); 
} 
function calcRoute() { 
    var selectedMode = document.getElementById("mode").value; 
    var start = document.getElementById("start").value; 
    var end = document.getElementById("end").value; 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.TravelMode[selectedMode] 
    }; 
    directionsService.route(request, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(result); 
     } 
    }); 
} 

を持っています。すべては私が

alert(request.toSource()); 

を使用してvarr値を警告している場合、私はすべて正しいデータ(原点、スタートをgetingてるJS関数calcRouteで

など、初期マップのロード、正しい動作しているようです、そして最後)、次の行は失敗していますが、私のJSエラーは "directionServiceが定義されていません"です。

は、この問題を解決しようとする時間を探していますが、問題はこれがグーグルマップと同じくらい簡単であるにもかかわらずである何かを見つけることができません誰がどんな考えを持っている場合

:-(取得します私は本当にだろうGREATFUL、これは狂気私を運転しているオリジナルポスターから

+1

私はばかだよ!私は3つのバールをjQuery内のページの読み込み条件の外に移動し、今は正常に動作します...この問題は解決されました。 –

答えて

4

コメント:!

を、私は外にページの読み込みを条件に、jqueryの内側に3 VARSを移動し、それが今で正常に動作します...この質問はあります解決済み。

1
<html> 
<head> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 

<script> 

var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 


function initialize() 
{ 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 

    var myOptions = 
    { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions); 
    directionsDisplay.setMap(map); 
} 

function calcRoute() 
{ 
    var selectedMode = document.getElementById("mode").value; 
    var start = document.getElementById("start").value; 
    var end = document.getElementById("end").value; 
    google.maps.DirectionsTravelMode.DRIVING 

     if(selectedMode=="DRIVING") 
     { 
      var request = { 
      origin: start, 
      destination: end, 
      travelMode:google.maps.DirectionsTravelMode.DRIVING 
      }; 
     } 
     else if(selectedMode=="WALKING") 
     { 
      var request = { 
      origin: start, 
      destination: end, 
      travelMode:google.maps.DirectionsTravelMode.WALKING 
      }; 
     } 
     else if(selectedMode=="BICYCLING") 
     { 
      var request = { 
      origin: start, 
      destination: end, 
      travelMode:google.maps.DirectionsTravelMode.BICYCLING 
      }; 
     } 

     directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
<div> 
     <span class="bold">From:</span> <input id="start" type="text" size="60" maxlength="150" /> &nbsp;&nbsp;&nbsp; 
     <span class="bold">To:</span> <input type="text" id="end" /> 
     <span class="bold">Mode of Travel:</span> 
      <select id="mode"> 
       <option value="DRIVING">Driving</option> 
       <option value="WALKING">Walking</option> 
       <option value="BICYCLING">Bicycling</option> 
      </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <input type="button" class="submit" value="Find Directions!" onclick="calcRoute()"/> 
    </div><br class="clear" /> 
    <div class="inline"> 
     <div id="mapDiv" style="width:950px; height:550px; border:1px solid #FD5F00;"> 
      <noscript><h3 style="color:red; margin:150px 0 0 250px">Oppps. Please activate JavaScript to view this map</h3></noscript> 
     </div> 
    </div> 
</div> 
</body> 
</html> 







use this code,it will work fine. 
+0

コードに説明を入れてもらえますか?元の質問のコードとは何が違うのですか?それにはどんな利点がありますか?それがないと誰にも役立たない。 – Bowdzone