DirectionsDisplayとサービスを追加すると「Googleは定義されていません」

Question

マップは完全に固定マーカーとユーザーの共有場所のマーカーを表示していました。しかし、今では、DirectionsDisplayとdirectionsService変数を他のコードと一緒に追加すると、マップがまったく読み込まれず、「googleが定義されていません」というコンソールエラーが表示されます。

以下に私の作業コードを掲載します。追加したすべての新しい行に注釈を付けて、どの行を区別できるようにします。

私は行をコメントアウトすると（下のように）地図は正常に動作し、コンソールのエラーが表示されます.Displayは定義されていません。明らかに期待していますが、Googleでこれらの行を追加すると嫌いです。

はまた、私は現在、試してみた：

• を非同期シークレットモードやプライベートブラウジング

EDIT

とChromeとFFでAPIキー

テストから延期削除します@Jaromanda Xのおかげで、GoogleはinitMap関数が呼び出されるまで認識されずに、calcRoute関数に変数をグローバルにする必要はなかったとにかく

私は、コードを更新します、このunfortunatleyはまだその上で作業し、正しくルート計算をしないことに注意してください：/

HTML：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=my key is here&callback=initMap"></script> 

JS：

var directionsDisplay; 

var map; 


var markers = []; 


var initMap = function() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chesters = new google.maps.LatLng(52.19147365, -2.21880075); 

    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 16, 
    center: chesters 
    }); 

    var marker = new google.maps.Marker({ 
    position: chesters, 
    title: 'Chesters Restaurant', 
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
    map: map 
    }); 


    markers.push(marker); 
    directionsDisplay.setMap(map); 

} 


var showPosition = function(position) { 
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var marker = new google.maps.Marker({ 
    position: userLatLng, 
    title: 'Your Location', 
    draggable: true, 
    map: map 
    }); 


    markers.push(marker); 


    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    bounds.extend(markers[i].getPosition()); 
    } 


    map.fitBounds(bounds); 

    calcRoute(userLatLng); 
} 

function calcRoute(userLatLng) { 
var directionsService = new google.maps.DirectionsService(); 
    var start = new google.maps.LatLng(userLatLng.lat, userLatLng.long), 
     end = new google.maps.LatLng(52.19147365, -2.21880075); 

    /*bounds.extend(start); 
    bounds.extend(end); 
    map.fitBounds(bounds);*/ 

    var request = { 
     origin: start, 
     destination: end, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 

    directionsService.route(request, function (response, status) { 
     if (status == 'OK') { 
      directionsDisplay.setDirections(result); 
     } 

    }); 
} 

function errorHandler(error) { 
    console.log('Geolocation error : code ' + error.code + ' - ' + error.message); 
} 

navigator.geolocation.getCurrentPosition(showPosition, errorHandler, { 
    enableHighAccuracy: false, 
    maximumAge: 60000, 
    timeout: 27000 
}); 

Answer 1

google maps directions apiを有効にしましたか？ https://developers.google.com/maps/documentation/javascript/directions

私はコメントとして投稿しましたが、明らかに50repの前にそれを行うことはできません。