Google Map JS V3 Async Load - Uncaught TypeError: undefined is not a function

Question

Have searched for a solution and tried most of what I've found so far. I'm a bit of a newbie wrt both Google Maps and Javascript. Hopefully someone can see what I'm missing here (and thank you in advance!).

I'm using the example directly from the Google Maps Tutorial. I'm following the instructions for Asynchronously Loading the API that are about half-way down the page.

I've coped the code as specified. Created the div element on the page, made sure there was a height and width for body as well as the div. In stepping through the code with the debugger, it goes through the loadScript successfully setting the script on the DOM. Then it fails immediately (so it seems) after that completes. As best I can tell, it kinda looks like the initialize function is undefined?? Not sure what I need to do.

Again, help/insight would be greatly appreciated. My forehead is getting bruised ;)

bower.json

{ "name": "movin-there", "private": true, "dependencies": { "angular": "~1.2.28", "json3": "^3.3.0", "angular-bootstrap": "~0.12.0", "bootstrap": "~3.2.0", "angular-animate": "~1.2.28", "angular-cookies": "~1.2.28", "angular-resource": "~1.2.28", "angular-route": "~1.2.28", "angular-sanitize": "~1.2.28", "angular-touch": "~1.2.28", "lodash": "~2.4.1" }, "devDependencies": { "angular-mocks": "~1.2.28", "angular-scenario": "~1.2.28" }, "appPath": "app", "resolutions": { "angular": "1.2.28" } }

log console output ###

Uncaught TypeError: undefined is not a function VM23109:1
(anonymous function) main.js:13
(anonymous function) main.js:26
(anonymous function) main.js:25
Jf main.js:26
Zf main.js:54
(anonymous function) main.js:54
google.maps.Load js?v=3.exp&callback=initialize:21
(anonymous function) main.js:55
(anonymous function)

app.js

//app.js
//
angular.module('MovnThereUI',[
    'ui.bootstrap',
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ]).run([
        '$rootScope',
        '$location',
        '$http',
        '$window',
        'AuthFactory',
        'UserFactory',
        'TypeAheadFactory',
        function(
            $rootScope,
            $location,
            $http,
            $window,
            AuthFactory,
            UserFactory,
            TypeAheadFactory
        ) {
            'use strict';
            $rootScope.$on('$routeChangeStart', function(event, next) {

                if (AuthFactory.isAuthenticated()) {
                    if (AuthFactory.isAuthenticated()) {
                        $http.defaults.headers.common['Authorization'] = 'Token token=' + $window.sessionStorage.getItem('movnThereUI.user');
                    }

                    UserFactory.fetch();
                } else {
                    if (($location.path() !== '/login') && ($location.path() !== '/signup')) {
                        $location.path('/login');
                    }
                }
            });



            function initialize() {
                debugger;
              var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
              };

              var map = new google.maps.Map(document.getElementById('map-canvas'),
                  mapOptions);
            }

            function loadScript() {
              var script = document.createElement('script');
              script.type = 'text/javascript';
              script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
                  'callback=initialize';
              document.body.appendChild(script);
            }

            window.onload = loadScript;



        }
    ]
);

/* app.css */
html, body, #map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.nav, .pagination, .carousel, .panel-title a {
  cursor: pointer;
}

<!-- index.html -->
</head>
  <body ng-app="MovnThereUI">

    <ng-include src="'views/partials/navbar.html'"></ng-include>

    <ng-view></ng-view>
    <div id="map-canvas"></div>
    
    .......snip

First thanks for the response. The load script is also a local variable right? But it runs fine. What would you suggest I do for initialize then?? — Holly
try the google-loader (the maps-API isn't listed there as a supported API, but it works too) — Dr.Molle

semuzaboi semuzaboi · Accepted Answer · 2015-08-14T08:48:04

Just my two cents, the intitialize should be bound to the window object, irrespective of the context where the gmap script is being loaded.

So i guess to fix this problem, you can try using window.initialize = function(){..} . But some may not want this !

Google Map JS V3 Async Load - Uncaught TypeError: undefined is not a function

bower.json

log console output ###

app.js

1 Answers