Loading a view after Google Maps load in Backbone.js - backbone.js

Question

I have the following setup:
class App.Views.Maps extends Backbone.View
el: '#map'
events:
initialize: ->
#searchModel = new App.Models.Search()
#view = new App.Views.MapBox(map: this)
#render()
render: ->
#loadMap()
$("[rel=tooltip]").tooltip()
loadMap: =>
osmMapType = new google.maps.ImageMapType(
getTileUrl: (coord, zoom) ->
"http://tile.openstreetmap.org/#{zoom}/#{coord.x}/#{coord.y}.png"
tileSize: new google.maps.Size(256, 256)
isPng: true
alt: "OpenStreetMap layer"
name: "OSM"
maxZoom: 19
)
cloudMadeMapType = new google.maps.ImageMapType(
getTileUrl: (coord, zoom) ->
"http://b.tile.cloudmade.com/111/54912/256/#{zoom}/#{coord.x}/#{coord.y}.png"
tileSize: new google.maps.Size(256, 256)
isPng: true
alt: "CloudMade layer"
name: "CMade"
maxZoom: 13
)
lat = 51.503
lng = -0.113
latlng = new google.maps.LatLng(lat, lng)
options =
zoom: 10
center: latlng
mapTypeId: 'OSM'
#gMap = new google.maps.Map(document.getElementById("map"), options)
#gMap.mapTypes.set('OSM', osmMapType)
#gMap.mapTypes.set('CloudMade', cloudMadeMapType)
#gMap.setMapTypeId('CloudMade')
allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(51.278, -0.536)
new google.maps.LatLng(51.701, 0.309)
)
lastValidCenter = new google.maps.LatLng(51.503,-0.113)
google.maps.event.addListener #gMap, "dragend", =>
if allowedBounds.contains(#gMap.getCenter())
lastValidCenter = #gMap.getCenter()
return
$('#myModal').modal(backdrop: true)
$('#myModal').on('hide', =>
origin = new google.maps.LatLng(51.438264485659836,-0.05715396179630261)
#gMap.setCenter(origin)
center = google.maps.LatLng(51.503,-0.113)
#gMap.panTo(origin)
)
#initLabel()
initLabel: =>
#rendered = view.render().el
#console.log rendered
#initLabel = new InfoBubble(
position: new google.maps.LatLng(51.44115356738888, 0.14849636779354114)
maxWidth: 240
maxHeight: 210
padding: 0
content: '<div class="tooltip_header"></div>'
tabPadding: 15
backgroundColor: 'black'
borderRadius: 0
arrowSize: 10
borderWidth: 0
borderColor: '#AB2424'
disableAutoPan: true
hideCloseButton: false
arrowPosition: 0.5
backgroundClassName: 'phoney'
tabClassName: 'tabClass'
activeTabClassName: 'activeTabClass'
arrowStyle: 2
)
#initLabel.open(#gMap)
This loads a map and then loads an InfoBubble ontop of the map. It loads it with the content <div class="tooltip_header"></div>
After this has loaded, if I append the loadMap and add
view = new App.Views.MapBox()
view.render().el
which attempts to load the view:
class App.Views.MapBox extends Backbone.View
el: '.tooltip_header'
events:
'click .testdrive' : 'loadTestDrive'
'click .test' : 'loadTestDrive'
template: JST["app/backbone/templates/mapbox"]
initialize: ->
#render()
render: ->
$(#el).html(#template())
this
loadTestDrive: ->
console.log #options.map
console.log "yessss"
#options.map.loadTestDrive()
Nothing happens... however if I go into console and do:
view = new App.Views.MapBox({map: this})
The content is rendered inside the Infobubble ontop of the map.
I think its because the load of InfoBubble is Asynchronous and I am calling the div to be rendered before it exists. But I have tried delay loading and it still happens.
What is the best way to get this view to render after the infobubble is loaded and the div is therefore available. This is why it works in console. but not on load.

Answer 1

Just use google maps events to listen to when the map is fully loaded like this
google.maps.event.addListener(map, 'tilesloaded', _.bind(function() {
this.render();
google.maps.event.clearListeners(map, 'tilesloaded');
},this));
With this you are 100% sure the map is rendered and the google.maps globals are avaliable and initialized.