CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3google-maps-markers
LearnToday
LearnToday

Reputation: 2902

Angular google map main controller error

I am trying to get angular-google-maps on my site with 'markers'.

Here is the code I am using : controller main.js

angular.module('dashyAppApp')
    .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;
    });

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

And here is my view main.html

<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>

I keep getting this errors:

markerwithlabel.js:71 Uncaught ReferenceError: google is not defined(anonymous function) @ markerwithlabel.js:71
infobox.js:116 Uncaught ReferenceError: google is not defined(anonymous function) @ infobox.js:116
keydragzoom.js:820 Uncaught ReferenceError: google is not defined(anonymous function) @ keydragzoom.js:820(anonymous function) @ keydragzoom.js:861
richmarker.js:60 Uncaught ReferenceError: google is not defined(anonymous function) @ richmarker.js:60
main.js:37 Uncaught SyntaxError: Unexpected token .
angular.js:13708 Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
http://errors.angularjs.org/1.5.7/ng/areq?p0=MainCtrl&p1=not%20aNaNunction%2C%20got%20undefined
    at http://localhost:9000/bower_components/angular/angular.js:68:12
    at assertArg (http://localhost:9000/bower_components/angular/angular.js:1885:11)
    at assertArgFn (http://localhost:9000/bower_components/angular/angular.js:1895:3)
    at $controller (http://localhost:9000/bower_components/angular/angular.js:10210:9)
    at Object.<anonymous> (http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:4095:28)
    at http://localhost:9000/bower_components/angular/angular.js:1240:18
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:9814:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:9215:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8510:13)
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:8390:30)

I don't know why it won't work and for one the 'google is not defined error' is just out of place because the map shows well when I show just one marker without the .factory.

Upvotes: 0

Views: 388

Answers (1)

MMhunter
MMhunter

Reputation: 1441

return Markers;
    });

    .controller('MainCtrl', function ($scope,Markers) {
      $scope.map = {

take out the semicolon before .controller first. this is causing your controller not configured.

Upvotes: 1

Related Questions