私はバックボーンを使い始めたばかりで、実際にGoogleマップを表示するタスクにこだわっています。コードは次のとおりです
<!DOCTYPE html>
<html>
<head>
<title>wePadel!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#map_container {
margin: 0;
padding: 0;
height: 100%;
background-color: #e2a1c6;
}
</style>
</head>
<body>
<a href="#map">Map</a>
<div id="wrapper">
<div id="map_container"></div>
<ul id="matchlisting"></ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/backbone-min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.8.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="routers/router.js" type="text/javascript"></script>
<script src="models/match-model.js" type="text/javascript"></script>
<script src="views/match-view.js" type="text/javascript"></script>
<script src="views/map-view.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="helpers/helpers.js" type="text/javascript"></script>
</body>
Routers.js
app = {
helpers: {},
models : {},
views : {},
routers: {},
init: function(){
mainView = new app.views.Matches();
appRouter = new app.routers.Router();
Backbone.history.start();
}
}
app.routers.Router = Backbone.Router.extend({
routes: {
"": "mainView", //#main
"map": "mapView"
},
mainView: function(){
new app.views.Matches();
},
mapView: function(){
new app.views.Map();
}
});
そしてmapView
app = app || {};
app.views.Map = Backbone.View.extend({
initialize: function(){
self = this;
self.configMap();
self.render();
},
configMap: function(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(document.getElementById('map_container'),
mapOptions);
},
render: function(){
return this;
}
});
デバッグ時にマップ オブジェクトを表示できますが、map_container div 内には何も表示されません。