如何在Meteor中为Google Map添加新标记？

Question

I'm currently adding markers on a google map when I click on a given location. The markers are currently saved both to a Collection - Markers - and in to a more classical array. What I would like to now is to add new marker to the map as they are added by other users.

My question is: Is there any way to get notified when the collection is modified (eg another user add a marker) ?

Maybe this is not the best way to do it. Any other suggestion?

if (Meteor.isClient) {

  Template.hello.rendered = function(){

    markersArray = [];
    var latlng = new google.maps.LatLng(46.123, 8.843);
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(latlng);
      });
    }

    var opts = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), opts);

    // add a click event handler to the map object
    google.maps.event.addListener(map, "click", function(event)
    {
      placeMarker(event.latLng);
    });

    Session.set('map', true);

    function placeMarker(location) {

     var marker = new google.maps.Marker({
      position: location, 
      map: map
    });

     Markers.insert({"marker": location, "date": new Date()});
     markersArray.push(marker);
      }

}
}

Answer 1

You have to use observer

Template.hello.rendered = function(){


 Markers.find({}).observe({
  added: function (m) {

  // Add marker 

  }
 });
}

Answer 2

As per the previous answer, you should use an observe structure, but you really need to avoid leaving the observer running forever:

Template.hello.rendered = function() {
    this.markerObserve = Markers.find({}).observe({
        added: function(m) {
            placeMarker(m.location)  // obviously depends on the structure of Markers documents
        }
    });
};

Template.hello.destroyed = function() {
    this.markerObserve.stop();
}