googleMaps appears in grey after refresh page

Question

i am a beginner in backbone and node js, i have added google maps to my template using these commands:

script(src='/lib/google-maps/lib/Google.js')
script(src='http://maps.googleapis.com/maps/api/js')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')
div.googleMap( style='width: 250px; height: 250px;')

and in my views :

mod.mapTemplate = Marionette.ItemView.extend({
template: '#actors-map-template',
initialize: function () {
  var mapProp = this.model.get('mapProp');
  map = new google.maps.Map(this.$el[0], this.model.get('mapProp'));
  }
});

i have added many unction like:

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

or

 google.maps.event.addDomListener(window, 'resize', function () {
    map.setCenter(mapProp.center);
  });

bu in vain, the same thing: google Maps appears for the second time but in grey. The problem is the variable rmiURL of map is undefined for the second time, while in the first time it contains this URLttps://www.google.com/maps/@38.9891271,1.2130107,6z/data=!10m1!1e1!12b1?source=apiv3&rapsrc=apiv3 and for the HTML : after my div it generates another div with class 'gm-style' and in the second time he doesn't

Answer 1

for those having the same problem here is the solution i found :

initMap: function () {
  this.$el.addClass('temp');
  $('body')
    .append(this.$el);
  var mapProp = this.model.get('mapProp');
  this.map = new google.maps.Map(this.$el.find('.map-canvas')[0],
    mapProp);
  this.$el.remove();
  this.$el.removeClass('temp');
},
render: function () {
  this.$el.html(_.template($('#actors-map-template')
    .html()));
  this.initMap();
},

and in the view :

.map-canvas(style='width: 250px; height: 250px;') .temp(style='position: absolute; visibility:hidden;')