Meteor.js Google Maps initialiser

Question

J'ai des problèmes pour initialiser ma carte google avec des marqueurs provenant de la base de données de Meteor. J'ai mis des messages console.log partout pour le tester - il semble être très incohérent - avec parfois les marqueurs créés et chargés - et à d'autres moments, il entre dans la fonction initialize, mais il ne va pas entrer dans la boucle pour créer les marqueurs. J'ai un abonnement waitOn dans le routeur pour m'assurer que les données sont chargées et sont disponibles avant d'exécuter la fonction d'initialisation.

modèle html:

<template name="mapGoogle"> 
    <div id="map-canvas" style="width:900px; height:420px;"></div> 
</template> 

js client:

Template.mapGoogle.rendered = function(){ 
    Session.set('loading', true'); 
    initialize(); 
} 

var initialize = function(){ 
console.log('inside initialize'); 

var latitude = 22.2924391; 
var longitude = 94.1967784; 

var map; var icon; var lat; var lng; var icon; 
var location = new google.maps.LatLng(latitude, longitude); 
var markers = []; 

var styles = [ 
    { 
    stylers: [ 
     { hue: '#3cff00' }, 
     { visibility: 'simplified' }, 
     { gamma: 0.5 }, 
     { weight: 0.5 } 
    ] 
    }, 
    { 
    elementType: 'labels', 
    stylers: [ 
     { visibility: 'on' } 
    ] 
    }, 
    { 
    featureType: 'water', 
    stylers: [ 
     { color: '#83bbdd' } 
    ] 
    } 
]; 

var styledMap = new google.maps.StyledMapType(styles, 
    {name: "Styled Map"}); 

// Create a map object, and include the MapTypeId to add 
// to the map type control. 
var mapOptions = { 
    zoom: 2, 
    center: new google.maps.LatLng(latitude, longitude), 
    mapTypeControlOptions: { 
    mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'map_style'] 
    } 
}; 

map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

map.mapTypes.set('map_style', styledMap); 
map.setMapTypeId('map_style'); 

    var sharkFin; 

    Sharks.find().forEach(function(shark){ 
    console.log('inside shark for loop) 
    sharkFin = '/images/fins/shark_fin.png'; 
    latShark = shark.latitude; 
    lngShark = shark.longitude; 

    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(latShark, lngShark), 
     map: map, 
    animation: google.maps.Animation.DROP, 
     icon: sharkFin, 
    }); 
    }) 

    Airlines.find().forEach(function(airline){ 

    console.log('inside airline for loop'); 

    icon = airline.iconAir; 
    lat = airline.latitude; 
    lng = airline.longitude; 
    title = airline.title; 
    content = airline.content; 
    if(airline.webLink){webLink = airline.webLink}else{webLink=""}; 

    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lat, lng), 
     map: map, 
    animation: google.maps.Animation.DROP, 
     icon: icon, 
     title: title, 
     content: content, 
     webLink: webLink 
    }); 

    var listener3 = google.maps.event.addListener(marker, 'mouseover', function(marker) { 
     console.log('inside marker listener'); 
     return function(){ 
     $('#content').find('div').remove(); 
     if(webLink==""){ 
      $('#content').append('<div><h1>'+ marker.title+'</h1><br>'+ marker.content+'<div>'); 
     }else{ 
      $('#content').append('<div><h1>'+ marker.title+'</h1><br>'+ marker.content+"<br><br>More information can be found on the airline's website <a href="+marker.webLink+'>here</a>.<div>'); 
     } 
     } 
    }(marker)); //use closure for access to variables. 
    }); 
    console.log('session variable set to false'); 
    Session.set('loading',false); 

}

Router.js -

Router.map(function() { 

    this.route('mainPage', {path:'/', 
    onBeforeAction: function(){ 
     console.log('inside router session to true'); 
     Session.set('loading',true); 
    }, 
    waitOn: function(){ 
     return [Meteor.subscribe('airlines'), 
       Meteor.subscribe('sharks')]; 
    } 
    }); 
}); 

Il semble que le premier rendu du page - les marqueurs a re créé et animé correctement sur la carte. Cependant, si je rafraîchis la page, les marqueurs sont parfois créés et d'autres fois non.

J'ai également essayé d'utiliser google.maps.event.addDomListener (window, 'load', initialize) sur le code js de mapGoogle. Mais toujours le même problème existe.

Des suggestions s'il vous plaît? Merci.

Answer 1

@Saimeunt est correct.

Je devais ajouter un crochet de chargement par défaut pour le fer-routeur en utilisant Router.onBeforeAction ("loading"). Sinon, les abonnements waitOn ne sont pas réellement appliqués et la page est chargée avant le chargement des données.