加載谷歌地圖後視圖Backbone.js的

Question

加載

我有以下設置：

類App.Views.Maps擴展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) 

此加載地圖，然後加載一個InfoBubble地圖上的ontop。它與<div class="tooltip_header"></div> 在此之後已加載的內容加載它，如果我追加loadMap，並添加

view = new App.Views.MapBox() 
view.render().el 

它試圖加載視圖：

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() 

什麼也沒有發生......但是，如果我去進入控制檯並執行：

view = new App.Views.MapBox({map: this}) 

內容呈現在地圖的Infobubble ontop內。

我認爲它是因爲InfoBubble的負載是異步的，我打電話給它存在之前呈現div。但我已經嘗試延遲加載，它仍然發生。

什麼是最好的方式來獲得此視圖呈現後，infobubble加載和div因此可用。這就是它在控制檯中的原因。但不是負載。

Answer 1

只是使用谷歌地圖事件來聽時，地圖滿載這樣

google.maps.event.addListener(map, 'tilesloaded', _.bind(function() { 
     this.render(); 
     google.maps.event.clearListeners(map, 'tilesloaded'); 
    },this)); 

有了這個，你是100％肯定的地圖渲染和google.maps全局是avaliable和初始化。