R.E.M. Web Development

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

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

});