Search code examples
angularjsgoogle-mapsangular-google-maps

Angular google maps giving an error

I am trying to get angular google maps to work, but I am encountering these errors.

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

The above error continues for about half a 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>

app and controller

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;
});

Can someone please help me solve this?

Solution

  • You need to correct your Markers factory implementation, factory must return an object.

    So change it like :

    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
  };
});

    Then in your gMap controller, consume factory array like:

    $scope.markers = Markers.markers;

    Update:

    You also need to import angular-simple-logger.js library since it is dependecy of googlemap api. See this fiidle