Adding Google Maps to angular using RequireJS

You would think that as angular has been made by Google it will just fit with Google Maps… well, not totally. But at least there are a couple of nice plugins out there that do the trick. That said, angular has also some difficulties on fitting with RequireJS, but both technologies are so good they can work together in an isolated way, this is: RequireJS takes control over file loading and Angular about the Front End application. Though Angular also has its own routing and lazy loading system.

But when trying to add Google Maps to all that receipt you may find a loading problem:

• Google Maps API prefers to be written into the page on document load, so it can use the document.write. Else, it will require the DOM to be ready to be added.
• Angular Google Maps plugin requires Google Maps API to be loaded, as it’s an extension of that other and expects its parent to be there to instantiate a map object.
• You angular app will probably need the plugin to be loaded as it is a dependency.

So this all means that your angular app will need to wait for the DOM to be ready, then for GMaps to be ready, then for the plugin to be ready, and then it can start loading the app. This can be a bit too much and even worse if your maps are just optional on your application.

Loading GMaps asynchronously

To help loading all this stuff, we are going to bootstrap it as it is the require-style creating a module that defines all of what our GMaps module will need. Let’s create a GMapsPlugin.js:

requirejs.config({
    paths: {
        GMaps: "//maps.googleapis.com/maps/api/js?sensor=false",
        lodash: "lodash",
        async: 'requirePlugins/async',
        angularGoogleMaps: "angular-google-maps-1.2.0.min"
    }
});

define(['async!http://maps.google.com/maps/api/js?sensor=false', 'lodash'], function () {
    // Google Maps API and all its dependencies will be loaded here.
    require(['angularGoogleMaps']);
});

When calling that file on requireJS, ti will load its dependencies and make it work, though it needs some plugins to help:

• Lodash
• RequireJS plugins (you only need the async one for this example)
• Angular GMaps plugin

Now that we have defined our GMapsPlugin, let’s make require get it for our application, as easy as calling our file from the main bootstrap:

requirejs.config({
    paths: {
        controllers: "myApp/controllers/_index"
        , services: "myApp/services/_index"
        , models: "myApp/models/_index"
        , directives: "myApp/directives/_index"
        , filters: "myApp/filters/_index"
        , GMapsPlugin: "myApp/GMapsPlugin" // I dont really load it this way, but just as an example
    }

    , shim: {
        "myApp": {
            deps: [
                "angular", "angular-route", "ui_bootstrap", "jquery"
                , "controllers"
                , "services"
                , "models"
                , "directives"
                , "filters"
                , "GMapsPlugin"  // Dependency added!!
            ]
        }
    }
});

// Just bootstrapping myApp:
require(["scriptsConfig.js"], function () {
    require(["jquery", "angular", "lodash", "myApp"], function ($, ng) {

        $(function () {
            ng.bootstrap(document.getElementsByTagName("messaging-center")[0], ["myApp"]);
        });

    });
});

And finally, myApp has google-maps as a dependency:

var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'google-maps']);