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.