I'm having trouble rendering Google Maps (V3) with Backbone.js.
It fails to load when I navigate to map view (/#/map); however, the map somehow loads perfectly fine when I hit refresh in that map view url.
Relevant Code Below:
<body>
Home
<div id="content"></div>
<script type="text/template" id="home_template">
Go !
</script>
<script type="text/template" id="map_template">
<div id="map"></div>
</script>
</body>
var MapView = Backbone.View.extend({
el: '#content',
render: function() {
var template = _.template($('#map_template').html());
var init = function() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', init);
this.$el.html(template);
}
});
var Router = Backbone.Router.extend({
routes: {
"" : "home",
"map" : "map"
}
});
var router = new Router;
var homeView = new HomeView();
router.on('route:home', function() {
homeView.render();
});
var mapView = new MapView();
router.on('route:map', function() {
mapView.render();
});
Backbone.history.start();
It seems that 'something' is missing when I'm switching views between home and map, but I'm not sure what that 'something' is. I believe I have combed through relevant questions, but cannot find the missing point.
Any help would be much appreciated.
Thank you!
(P.S The Mapview part is taken from : https://developers.google.com/maps/documentation/javascript/tutorial
)
Problem is here I guess
google.maps.event.addDomListener(window, 'load', init);
you are calling init on window.load, but when you switch between view, it will not refresh the page, and window.load never get triggered. I guess you need to change the way init happening, I could be able to suggest better if I have more information about DOM structure of the page.
Related
I am trying to show a google map on my AngularJs app. I used below code and when run, map not displayed. Just a blank page. No errors on browser console.
Here is the Fiddle
HTML Code
<div class="row">
<div id="google-maps"></div>
</div>
Controller Code
function initialize() {
var mapCanvas = document.getElementById('google-maps');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
$timeout(function(){
initialize();
}, 100);
Also I have this code in index.html file
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&libraries=places"></script>
Try calling initialize() inside document.ready:
$(initialize);
Also give a width and height to your container div.
Working Fiddle
Hi guys i have problems trying to run a google map example into a routed view, map is not displayed and no errors are displayed, i read some thing about initialize in a directive, i don't know how to do it, any help will be very apreciated:
app.conf
app.controller( 'viewCtrl', function( $http, $location ) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
} );
In my view i have:
<div id="map-canvas"></div>
It worked into my view adding a size to div:
<div id="map-canvas" style="height:200px;width:200px;"></div>
Sry for this questión and hoppe thiscan help to others
I am trying to figure out how to use a router and controller in my Marionette.js application. I am able to start the initial page in my App's start handler, but I can't seem to figure out how to handle other routes. This SPA isn't complex, where I only have three pages for my users. One is a leads table view, a vehicle table view, and a view of a single vehicle. I'm not worried about the single vehicle view until I figure out how this routing works.
// my app
var App = new Marionette.Application({});
// my lead and vehicle model rows
App.vehicleRowView = Marionette.ItemView.extend({
tagName: 'tr',
template: '#vehicle-row-tpl'
});
App.leadRowView = Marionette.ItemView.extend({
tagName: 'tr',
template: '#lead-row-tpl'
});
// composite views for the tables
App.vehicleTableView = Marionette.CompositeView.extend({
tagName: 'div',
className: 'row',
template: '#vehicles-table',
childViewContainer: 'tbody',
childView: App.vehicleRowView
});
App.leadsTableView = Marionette.CompositeView.extend({
tagName: 'div',
className: 'row',
template: '#leads-table',
childViewContainer: 'tbody',
childView: App.leadRowView
});
// controller
var Controller = Marionette.Object.extend({
leads: function() {
var leadstable = new App.leadsTableView({
collection: this.leads
});
App.regions.leads.show(leadstable);
},
vehicles: function() {
console.log('vehicles...');
}
});
// router
var AppRouter = Marionette.AppRouter.extend({
controller: new Controller,
appRoutes: {
'leads': 'leads',
'vehicles': 'vehicles'
}
});
App.router = new AppRouter;
App.vehicles = [];
App.leads = [];
// Start handlers
App.on('before:start', function() {
this.vehicles = new Vehicles();
this.vehicles.fetch();
this.leads = new Leads();
this.leads.fetch();
var appContainerLayoutView = Marionette.LayoutView.extend({
el: '#app-container',
regions: {
vehicles: '#vehicles-content',
leads: '#leads-content'
}
});
this.regions = new appContainerLayoutView();
});
App.on('start', function() {
Backbone.history.start({pushState: true});
var vehiclesLayoutView = new this.vehicleTableView({
collection: this.vehicles
});
App.regions.vehicles.show(vehiclesLayoutView);
});
App.start();
On start, the front page is fine. However, when I go to #leads, my leads table doesn't render. Actually, the route doesn't happen, and the URL changes to /#leads. If I then go to that URL, the table skeleton renders, but not the data. The collections are loaded fine on before:start, and the templates are fine. I have to go to the URL twice, but the table has no data, even though my App.leads collection is loaded fine. My console.log output confirms I am hitting the route, though.
I want to hide the vehicles region when the user goes to the #leads route. When the user goes to #vehicles, I then want to hide my leads table and display the vehicles (same view from my start handler).
I feel like I'm right there, but missing something basic.
By looking at your vehicles and leads regions, I have a suspicion you've misunderstood the role of regions. If you expect them to swap one another, then you would create just one region and have that region .show( new VehiclesView() ); when you want to show vehicles, and .show( new LeadsView() ); when you want the leads to replace the vehicles.
And here's a working example:
var app = new Mn.Application();
var Controller = Mn.Object.extend({
leads: function(){
app.regions.setActive('leads').getRegion('main').show( new LeadsView() );
},
vehicles: function(){
app.regions.setActive('vehicles').getRegion('main').show( new VehiclesView() );
}
});
var VehiclesView = Mn.ItemView.extend({
template: _.template('،°. ˘Ô≈ôﺣ » » »')
});
var LeadsView = Mn.ItemView.extend({
template: _.template("( /.__.)/ (.__.)")
});
var AppLayoutView = Mn.LayoutView.extend({
el: '#app',
regions: { main: 'main' },
events: { 'click nav a': 'onClick' },
onClick: function(evt){
evt.preventDefault();
var viewName = evt.currentTarget.dataset.view;
app.controller[viewName]();
app.router.navigate(viewName);
},
setActive: function(viewName){
/** it might seem that it is easier to just
make the link bold on click, but you would have
to handle it if you want to make it active on page load */
this.$('nav a').
removeClass('active').
filter('[data-view="'+viewName+'"]').
addClass('active');
return this;
}
});
app.on('start',function(){
app.regions = new AppLayoutView();
app.controller = new Controller();
app.router = new Mn.AppRouter({
controller: app.controller
});
Backbone.history.start({pushState: true});
/** show initial content */
app.controller.leads();
app.router.navigate('leads');
});
app.start();
.active { font-weight :bold ;}
<script src='http://code.jquery.com/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.js'></script>
<div id="app">
<nav>
Vehicles
Leads
</nav>
<main></main>
</div>
In spite of reading the marionette docs several times over, I am still not able to fully comprehend some aspects of it correctly.
I am creating a layout view 'AppLayout' as below:
var AppLayoutView = Marionette.LayoutView.extend({
regions: {
headerRegion: "#ecp_header",
bodyRegion: "#ecp_layout_region"
},
...
The html snippet for my app is having the two dom nodes for above defined regions:
<div id="ecp_header"></div>
<div class="container" id="ecp_layout_region">
<div class="row" id="ecp_body">
...
in app.js, my calling code is like this..
ECPApp.on('start', function() {
require(['controller_cp', 'header_view'], function(ControllerCP, HeaderView) {
console.log("On start event executing...");
// create a event aggregator vent object and attach to app.
ECPApp.vent = new Backbone.Wreqr.EventAggregator();
var appLayoutView = new AppLayoutView();
appLayoutView.render();
//appLayoutView.showLayout();
//$('div.toolbar > ul > li:first > a').tab('show');
if (Backbone.history) Backbone.history.start();
});
This gives me error Cannot render the template since it is null or undefined.
I thought that the default render() behavior of layout always looks for a template, so I rolled out my own version of render, as below:
render: function() {
var $self = this;
/* if no session exists, show welcome page */
var promise = ECPApp.request('entities:session');
promise.done(function(data) {
if (data.result==0) {
console.log('Valid session exists. Showing home page...!');
$self.showHome();
} else {
console.log('No session exists. Showing welcome page...!');
$self.showWelcome();
}
}).fail(function(status) {
console.log('No session exists. Showing welcome page...!');
$self.showWelcome();
});
return $self;
},
showWelcome: function() {
var self = this;
require(['header_view', 'welcome_view'],
function(HeaderView, WelcomeView) {
var headerView = new HeaderView();
var welcomeView = new WelcomeView();
self.bodyRegion.show(welcomeView);
});
}
This time, I get another error saying, An "el" #ecp_layout_region must exist in DOM. However I am sure that the element is existing in the DOM, as I can see it by checking in the debug console window. Running $('#ecp_layout_region') shows a valid element.
Marionette layout view is pretty confusing. Going forward I need multiple nested views. I am stuck here.
How is your template located? Is your template wrapped by <script type = “text/template”> tag?
It may look like this:
Inside your html, in head section:
<script type = “text/template” id="yourLayout">
<div id="ecp_header"></div>
<div class="container" id="ecp_layout_region">...</div>
</script>
And in Layout definition:
var AppLayoutView = Marionette.LayoutView.extend({
template: '#yourLayout'
...
});
In my backbone function, i am navigating a id to routers, but the function not calling... as well i have given the different sample navigate urls to my links, those are not calling the functions..
mycode :
(function($){
var myRouter = Backbone.Router.extend({
routes:{
"":"defaultRoute", //onload it works
'#/name/:id':"nameData",
// i am calling this function on default Router
'#/project/:id':"projectData"
},
defaultRoute:function(){
console.log('default')
startRoute.navigate("#/name/3"); // i am redirecting
},
nameData:function(id){
console.log(id); // id not consoling not called this func.
},
projectData:function(project){
console.log(project);
}
});
var startRoute = new myRouter();
Backbone.history.start();
})(jQuery);
my url : http://localhost:85/router/web/#/name/3
my html :
<ul class="name">
<li>name1</li>
<li>name2</li>
<li>name3</li>
<li>name4</li>
<li>name5</li>
</ul>
any one find me the wrong this what i do here.. please
All my functions are correct, by mistrake i added the hash on the routes prams.
update function here:
(function($){
var myRouter = Backbone.Router.extend({
routes:{
"":"defaultRoute",
'name/:id':"nameData",
'product/:id':"projectData"
},
defaultRoute:function(){
console.log('i am default');
},
nameData:function(e,id){
console.log(id);
},
projectData:function(project){
console.log(project);
}
});
var startRoute = new myRouter();
Backbone.history.start();
})(jQuery);