Angular google map main controller error

Question

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.

you didn't use $scope in your controller method. Use like this .controller('MainCtrl', function ($scope) { // }); — Durgpal Singh
– Durgpal Singh, Commented Jul 16, 2016 at 9:03
@DurgpalSingh there is scope .controller('MainCtrl', function ($scope,Markers) — LearnToday
– LearnToday, Commented Jul 16, 2016 at 9:07

MMhunter · Accepted Answer · 2016-07-16 09:09:56Z

1

return Markers;
    });

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

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

answered Jul 16, 2016 at 9:09

MMhunter

1,4511 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LearnToday Over a year ago

Thanks for the sharp eyes. That was the problem. Except the google is not defined output

markerwithlabel.js:71 Uncaught ReferenceError: google is not defined infobox.js:116 Uncaught ReferenceError: google is not defined keydragzoom.js:820 Uncaught ReferenceError: google is not defined richmarker.js:60 Uncaught ReferenceError: google is not defined

MMhunter Over a year ago

have u imported these libraries? like

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>

?

LearnToday Over a year ago

I have this added when I installed it using bower

<script src="bower_components/markerclustererplus/src/markerclusterer.js"></script>     <script src="bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js"></script>

MMhunter Over a year ago

it actually says that google is not defined which means that either u didn't add the google api itself or you put it after the utilities.

Collectives™ on Stack Overflow

Angular google map main controller error

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related