Meteor.js and Google Maps

Question

i already included maps api into my project. Now i want to show some markers on my map. I initialse my map in a startup function:

Meteor.startup(function() {         


        

Answer 1

As in my questionpost written i needed some help to integrate google maps functionality. The question was not answered until now and i want you to give a short introduction in how to solve this problem.

How to integrate maps into meteor.js/meteorite.js?

At first you have to include the maps script into your head-tag

  ....
  
  

Than you should create a maps-Template:

In the related js-File you should define a rendered function. When rendered function is invoked you create a map and show a marker on the map. (Dont forget to give you map some css)

Template.mapPostsList.rendered = function() {  
  var mapOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var p2 = Session.get('location');

  map.setCenter(new google.maps.LatLng(p2.lat, p2.lng));
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(p2.lat, p2.lng),
    title:'Meine Position',
    icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
  });
  marker.setMap(map);   

  Session.set('map', true);
};

Now the maps-Object gets recreated everytimes the template is rendered. This is not best practice, but it is working. I tried to put the creation in Template.mapPostsList.created-callback but it always fires an offset-width error. Than i set a marker with my position to the map and define a session that my map is initialised.

Well. But now my Session gets initialised on first rendering, thats why i set it to false when my template is destroyed.

Template.mapPostsList.destroyed = function() {
  Session.set('map', false);
};

If you want to fetch your posts to the map you have to define a autorun function.

Deps.autorun(function() {

  var isMap = Session.get('map');
  if(isMap) {
    var allPosts = Posts.find();
    allPosts.forEach(function (post) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(post.location.lat, post.location.lng),
        title: post.title,
        postId: post._id
      });
      marker.setMap(map);
    });    
  }
});

The Deps.autorun function is always fired if content changes. That means if i change my Session related map-variable the autorun gets invoked. If i set it to false i do nothing. Else i fetch all my posts to the map within an forEach. Because of recreating the map on rendering i dont need to check which posts are already marked on the map when my collection changes.

This solution works quite well for me.

I hope i can someone help with this!