JSで価格計算ツールを設定しようとしています。これは、設定された住所（事業所住所）と顧客の住所の間のキロメートルの金額を計算し、<input>フィールドに入力することができます。JavaScript、Google Maps API、Wordpress
このスクリプトでは、ユーロ（小数点なし）を四捨五入して価格として表示します（このサービスの料金は1ユーロ/キロメートルなので、他の計算は必要ありません）。
これまでのところ、私は以下のコードを思いついた。これをメモ帳の.html文書に入力し、Firefoxでそのファイルを開くと動作します。しかし、これはWordpressのウェブサイトに実装する必要があります。 JSコードを<head>に、残りを<body>（以下に示す）に入れました。しかし何らかの理由でWordpressで動作しません。 （Wordpressサイトとメモ帳ファイルでは、もちろん<script>タグの間にスクリプトを置く）
私は、JSを使用することに関するWordpressのドキュメントを読んでみましたが、コードを直接貼り付けることができましたヘッダーは、（特にテスト目的のために）動作させるための有効な方法であり、すべてはになるはずですが、明らかにそうではありません。私はまた、Stackoverflowの検索だけでなく、Googleを使って答えを見つけようとしましたが、明らかに失敗でした。
すべてのサポートをよろしくお願いいたします。
それがあるべきで、ウェブサイトが、ありませんが、作業は次のとおりです。http://www.aircostadskanaal.nl/haal-en-breng-service/
<head>：
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var melbourne = new google.maps.LatLng(-37.813187, 144.96298);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: melbourne
}
}
function calcRoute() {
var start = "Ceresstraat 11, Stadskanaal, Netherlands";
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
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);
distanceInput.value = Math.round(response.routes[0].legs[0].distance.value/1000);
}
});
}
<body>：
<body onload="initialize()">
<div>
<p>
<!--<label for="start">Start: </label>
//<input type="text" name="start" id="start" />-->
<label for="end">Adres: </label>
<input type="text" name="end" id="end" />
<input type="submit" value="OK" onclick="calcRoute()" />
</p>
<p>
<label for="distance">Prijs (€): </label>
<input type="text" name="distance" id="distance" readonly="true" />
</p>
</div>
編集;私はウェブサイトに地図を含めないことに決めたので、地図を設定するためにラインを削除しました。これは残念ながら問題を解決していません。
WordPressで追加するとコンソールにエラーが表示されますか？ほとんどの場合、独自のマークアップとスクリプトを含むカスタムページテンプレートを作成し、そのテンプレートをWordPressのカスタムページに適用します。 – Mohsin
カスタムページテンプレートを作成すると問題が解決するかもしれませんが、このスクリプトはウェブサイト上の複数のページから呼び出される可能性が高いため、通常のヘッダーまたはページに含めることをお勧めします。 – Tijmen