Angular google maps donnant une erreur

J'essaie d'obtenir des google maps angulaires au travail, mais je rencontre ces erreurs.Angular google maps donnant une erreur

angular.js:88 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.5/ $injector/modulerr?

L'erreur ci-dessus persiste pendant environ une demi-page.

https://csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=29.10&action=apiboot2&e=10_1_0,10_2_0&rt=main.31 net::ERR_BLOCKED_BY_CLIENT

index.html

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
    html, 
    body { 
     height: 100%; 
    } 

    .angular-google-map-container { 
     height: 100vh; 
    } 
</style> 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/ 
angular.min.js"></script> 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"> 
</script> 
<script src="./node_modules/angular-google-maps/dist/angular-google- 
maps.js"></script> 
<script src="./map.controller.js"></script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBL3uzNfWSpztGvmqhBLf- 
gYdfdxrCSOQo"> 
</script> 
</head> 

<body> 
<div ng-app="myApp" ng-controller="gMap"> 
    <ui-gmap-google-map center='map.center' zoom='map.zoom' aria- 
    label="Google map"> 

     <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" 
     options="marker.options" events="marker.events" idkey="marker.id"> 
      <ui-gmap-window> 
       <div>{{marker.window.title}}</div> 
      </ui-gmap-window> 
     </ui-gmap-marker> 

    </ui-gmap-google-map> 
</div> 
</body> 

</html>

application et contrôleur

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']); 

myApp.factory("Markers", function(){ 
    var Markers = [ 
    { 
    "id": "0", 
    "coords": { 
    "latitude": "45.5200", 
    "longitude": "-122.6819" 
    }, 
    "window": { 
    "title": "Portland, OR" 
    } 
}, 
{ 
    "id": "1", 
    "coords": { 
    "latitude": "40.7903", 
    "longitude": "-73.9597" 
    }, 
    "window" : { 
    "title": "Manhattan New York, NY" 
    } 
} 
]; 
return Markers; 
}); 

myApp.controller("gMap",function($scope,Markers){ 
    $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
}; 
$scope.markers = Markers; 
});

Quelqu'un peut-il me aider s'il vous plaît résoudre ce problème?

Source

2017-07-12 kashif roshen

Il vous manque un module, quel module il devrait être présent dans l'URL d'erreur qu'angular génère, ce qui n'est pas clair dans ce cas. Vous pourriez vouloir poster l'erreur d'enitre. –

Vous devez corriger votre implémentation Markers factory, factory doit renvoyer un objet.

changer donc comme:

myApp.factory("Markers", function(){ 
    var Markers = [ 
    { 
    "id": "0", 
    "coords": { 
    "latitude": "45.5200", 
    "longitude": "-122.6819" 
    }, 
    "window": { 
    "title": "Portland, OR" 
    } 
}, 
{ 
    "id": "1", 
    "coords": { 
    "latitude": "40.7903", 
    "longitude": "-73.9597" 
    }, 
    "window" : { 
    "title": "Manhattan New York, NY" 
    } 
} 
]; 
return { 
    markers: Markers 
    }; 
});

Ensuite, dans votre gMap controller, consommer tableau d'usine comme:

$scope.markers = Markers.markers;

Mise à jour:

Vous devez également importer angular-simple-logger.js bibliothèque puisqu'il est dépendance de googlemap api. Voir ce fiidle

Source

2017-07-12 09:13:08 anoop

J'ai essayé ce que vous avez dit mais je reçois toujours la même erreur:/Je ne sais pas quel code j'essaie Je reçois cette énorme erreur injector.moduler .. Je suis complètement perdu sur ce qu'il faut faire –

@kashifroshen: googlemap api dépend de ' La bibliothèque angular-simple-logger.js', qui doit également être importée. Voir ce [violon] (http://jsfiddle.net/k5nrf4eb/) et j'ai mis à jour ma réponse. – anoop

Vous êtes un sauveteur..Merci un million..il se charge maintenant..J'ai une question..Quand j'inclus la balise google map api script avec ma clé api il est dit "Vous avez inclus l'API Google Maps plusieurs fois sur cette page.Cela peut provoquer des erreurs inattendues. " Dois-je l'inclure ou les tags de script sont-ils inclus? –

Angular google maps donnant une erreur

Répondre

Questions connexes