Geek Answers Handbook

Google card not displaying correctly after first view with Backbone.js

We create a mobile application using Phonegap, Backbone.js, Require.js and PageSlider ( https://github.com/ccoenraets/PageSlider ).

I want to display a simple Google map using a marker. The template looks like this:

<div class='main-content' id='map-container'>

    <a href="geo:51.903679,-8.468274">
        <div id="map-canvas"></div>
    </a>

</div>

Here is a view:

define(function (require) {

"use strict";

var $                   = require('jquery'),
    _                   = require('underscore'),
    Backbone            = require('backbone'),
    tpl                 = require('text!tpl/Map.html'),
    side_nav                = require('text!tpl/SideNav.html'),
    template = _.template(tpl),
    map, myLatlng, mapOptions, marker;


return Backbone.View.extend({

    initialize: function () {          
        this.render();      
    },

    initMap: function () {

         myLatlng = new google.maps.LatLng(51.903679, -8.468274);

         mapOptions = {
            center: myLatlng,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

            map = new google.maps.Map(this.$el.find('#map-canvas')[0],
                                      mapOptions);


         marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Christians Brothers College Cork'
        });

    },

    render: function () {
        this.$el.html(template({side_nav:side_nav}));
        this.initMap();       
    },


});

});

There is a link to the application. When you click "location", the map is displayed perfectly. But when you move to another place and then return to the location, in the upper left corner you can see only a tiny part of the map.

I tried to do what was suggested here :

google.maps.event.trigger(map, 'resize').

but to no avail. Any ideas?

+4
1

node DOM, , Google Map . PageSlider, node . : http://jsfiddle.net/3C7g3/

:

  • google.maps.event.trigger(map, 'resize') node DOM ( )

    // assuming you stored the map object in your view
require(["app/views/Map"], function (Map) {
    var view = new Map();
    slider.slidePage(view.$el);
    google.maps.event.trigger(view.map, 'resize');
 });

    http://jsfiddle.net/3C7g3/1/

  • node DOM render. , , view.initialize view.render container.append(page); slidePageFrom.

    http://jsfiddle.net/3C7g3/2/

  • DOM, Google, DOM

    initMap: function () {
    // assuming a temp class that hides the element. For example,
   // .temp {position: absolute; visibility:hidden; }
    this.$el.addClass('temp');
    $('body').append(this.$el);
    // ...
    this.$el.remove();
    this.$el.removeClass('temp');
}

    http://jsfiddle.net/3C7g3/3/

+6

More articles:


All Articles