私のイオンアプリでgoogle maps apiを使用するときのトラブル

Question

誰かが私のコードをデバッグする手助けができますか？私は数日間この作業をしてきましたが、私はそれを動作させることができません。 Google Maps APIは、私のアプリではうまく動作しないようです。

のindex.html：

<link rel="manifest" href="manifest.json"> 

<!-- un-comment this code to enable service worker 
<script> 
    if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('service-worker.js') 
     .then(() => console.log('service worker installed')) 
     .catch(err => console.log('Error', err)); 
    } 
</script>--> 

<!-- compiled css output --> 
<link href="css/ionic.app.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 

<!-- ionic/angularjs js --> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 

<!--GoogleMap--> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTmfHt2k4zLB_0oZxT9JMezlauB2ycKi0&callback=initMap" 
async defer></script> 

<!-- cordova script (this will be a 404 during development) --> 
<script src="cordova.js"></script> 

<!-- your app's js --> 
<script src="js/app.js"></script> 
<script src="js/controllers.js"></script> 
<script src="js/directives.js"></script> 
<script src="js/routes.js"></script> 

app.js：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.routes', 'starter.directives']) 
.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
if(window.cordova && window.cordova.plugins.Keyboard) { 
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

    cordova.plugins.Keyboard.disableScroll(true); 
} 
if(window.StatusBar) { 
    StatusBar.styleDefault(); 
} 
    }); 
}) 

directives.js：

angular.module('starter.directives', []) 

.directive('map', function() { 
    return { 
restrict: 'E', 
scope: { 
    onCreate: '&' 
}, 
link: function ($scope, $element, $attr) { 

    function initMap() { 
    var mapOptions = { 
     center: new google.maps.LatLng(14.5896, 120.979939), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 

    var map = new google.maps.Map($element[0], mapOptions); 

    $scope.onCreate({map: map}); 

    } 

    if (document.readyState === "complete") { 
    initMap(); 
    } else { 
    google.maps.event.addDomListener(window, 'load', initMap); 
    } 
} 
    } 
}); 

controller.js：

.controller('mapCtrl', function($scope, $ionicLoading, $compile) { 

    $scope.clickTest = function() { 
alert('Example of infowindow with ng-click') 
    }; 
}) 

map.html

<ion-view title="Maps" id="mapPage" ng-controller="mapCtrl"> 
    <ion-nav-bar class="bar-positive"> 
    </ion-nav-bar> 
    <ion-content padding="true" class="has-header"> 
    <map on-create="mapCreated(map)"></map> 
    </ion-content> 
</ion-view> 

私が遭遇してきたエラーは、 'Googleが定義されていない' とinitMapは関数ではないということです。私は本当にこの1つの助けが必要です。ありがとう！

Answer 1

google is undefinedは、Google Maps Scriptが非同期に読み込まれているためです。

あなたの指示にinitMapと電話すると、Googleマップはまだ読み込まれていません。

initMap is not a functionは、initMapがGoogleマップスクリプトが読み込まれるときに呼び出すコールバックであるため、関数ではありません。しかし、それは世界的に定義され、windowに添付されたものでなければなりません。

.directive('map', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     onCreate: '&' 
    }, 
    link: function ($scope, $element, $attr) { 

     function initMap() { 
      var mapOptions = { 
      center: new google.maps.LatLng(14.5896, 120.979939), 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
     }; 

     var map = new google.maps.Map($element[0], mapOptions); 

     $scope.onCreate({map: map}); 

    } 
    window.initMap = initMap; 

}}});