JavaScript

Getting Google Maps To Work With RequireJS

By Niall Kader1 min read

I ran into some confusion when I tried to get Google Maps to work with RequireJS. I discovered that there are a few different modules for loading javascript files asynchronously. And there were a few that I couldn't get to work. But the one that did work for me was the requirejs-plugins module. Here are the main files involved. Note that I didn't include the index.html file. Other than script tag for requirejs, it really only consists of a single div with and id of 'content'. You'll see where that's referenced router.js below.

I have been using Bower to install external libraries, here is the package.json file:

{
  "name": "RequireJS Starter",
  "version": "1.0.0",
  "dependencies": {
    "requirejs": null,
    "requirejs-plugins": null,
    "jquery": null,
    "backbone-amd": null,
    "underscore-amd": null,
  }
}

Here is main.js

require.config({
  baseUrl: 'js',
  paths: {
    'jquery': '../vendor/jquery/jquery',
    'underscore': '../vendor/underscore-amd/underscore',
    'backbone': '../vendor/backbone-amd/backbone'
    'async':'../vendor/requirejs-plugins/src/async'
  }
});

require(["router"],
  return new Router();
});

Here is router.js

// Filename: router.js
define([
  'jquery',
  'backbone',
  'views/map'
  
], function($, Backbone, MapView){

  Router = Backbone.Router.extend({
    
    initialize: function() {
      Backbone.history.start();
    },

    routes: {
      "": "index",
    },

    index: function(){
        var mapView = new MapView;
        $("#content").append(mapView.render().el);
    }
  });

  return Router;
});

And, finally, here is map.js

define([
  'jquery',
  'underscore',
  'backbone',
  'async!http://maps.google.com/maps/api/js?sensor=false'
],function($, _, Backbone){

  var Map = Backbone.View.extend({
  
    _map: null,

    render: function(){
    
      this.$el.css({width:600, height:400});
      this.map = new google.maps.Map(this.el,{
        zoom:16,
        center: new google.maps.LatLng(43.81451767218152, -91.25057458877563),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });  
      
      return this;
    
    }
  
  });
  
  return Map

});