2017-09-20 24 views
0

私はGoogle Maps Directions APIを提供するGoogleから提供されたコードを使用しています。私は原点と目的地の値を手動で変更し、それは完全に動作します。しかし、元と目的地の値をPHP変数に置き換えようとすると、マップはロードされません。Google Maps Directions APIでのPHP変数の使用

ここに私のコードは、任意のアドバイスをいただければ幸いです。

<body> 

    <?php 
    $start = "Leeds"; 
    $end = "Nottingham"; 
    ?> 

 <div id="right-panel"></div> 


    <script type="text/javascript"> 

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

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom:7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('right-panel')); 


    var request = { 
     origin: <?php echo $start; ?>, 
     destination: <?php echo $end; ?> , 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     } 
    }); 
    </script> 
</body> 
</html> 

答えて

2

私はあなたがPHPの前後に引用符を逃していると信じています。これを試して。いただきました!引用符の内側にあなたがPHPでエコーを使用 、

$Example = "hey"; 

は、PHPはエコーのみになります。 は、だからあなたはJavaScriptにそれらを手動で追加する必要がありますか、あなたの結果は、それが

origin: 'Start', 
    destination: 'End' 
<script type="text/javascript"> 

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

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom:7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('right-panel')); 


    var request = { 
     origin:'<?php echo $start; ?>', 
     destination:'<?php echo $end; ?>' , 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     } 
    }); 
    </script> 
</body> 
</html> 
+1

引用はここに正しい答えのように見えるにする必要がある

origin: Start, destination: End 

です。 '<?=" leeds "; ?>は 'leeds'を出力し、JavaScriptはオブジェクト配列の値が' 'leeds''のように引用されることを期待しています。引用符はJavaScriptでもスペースを理解するのに役立ちます。例えば、 'origin:New York'はJavaScriptを破るでしょうが、' origin: 'New York''は有効です。 – Matthew

+1

ちょうどそれが –

+0

を追加しました。PHPに引用符を追加しようとしましたが、まだマップをロードしていないようです。 –

関連する問題