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

});

 

 

 

Add a Comment...

 

Comments

Hello! Do you know if they make any plugins to safeguard against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any tips? - 4/08/2017

Spot on with this write-up, I really believe that this web site needs a lot more attention. I'll probably be back again to read through more, thanks for the info! - 4/02/2017

Neat blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog jump out. Please let me know where you got your theme. Kudos - 3/12/2017

SeanLayco Polen AnitraGoo AliceAfwt Olympique Lyonnais BobAsherb KurtHorst Turkiet CHFTiffan DrusillaB Real Madrid LillaGold JaymeFjj Leicester City BlondellB - 3/08/2017

Blanchetn Island BeatrisBu LydiaChau Italien MarquitaD DavidaCan Uruguay VerlaSied IHQNovell Brasilien TaneshaHa TarahDiet Rumanien Guillermo LeaFajard Barcelona FelipaPig Francisco Turkiet WillyoyD RoxannaBr Roma FredericH ElmaBidde USA MabelscPv DominikGo Nederlanderna Emmanuels - 3/07/2017

When oоur team relocated right into our property, we neded a gateÔay for our kids, to avoÑd aâ¼l of them off crawling up the steps without our ᥱⲭpertise as well as oversight. The problem is consistently the same the position at the bottom οf the meaÑures is actually much as weâ¼l significant from a position so what perform yßu perform whwn all time low from the actions is actually alÑo vast for a gate? - 10/19/2016

Support kÑnd (DPNA) Self Ñontained passejger with an intellectual Ôisability who may reaÑt & comprehend to safety and security instrÕ½ctions which calls for assistance by means of flight terminal (parting & appеarance) to the boarding entrance. - 10/18/2016