Getting Google Maps To Work With RequireJS

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

baseUrl: 'js',
paths: {
'jquery': '../vendor/jquery/jquery',
'underscore': '../vendor/underscore-amd/underscore',
'backbone': '../vendor/backbone-amd/backbone'

return new Router();



Here is router.js

// Filename: router.js

], function($, Backbone, MapView){

Router = Backbone.Router.extend({

initialize: function() {

routes: {
"": "index",

index: function(){
var mapView = new MapView;

return Router;


And, finally, here is map.js

],function($, _, Backbone){

var Map = Backbone.View.extend({

_map: null,

render: function(){

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

return this;



return Map