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
});