Login/Register
Meteor.js and Google Maps
Asked Answered
Solved mapsmeteormeteorite
U

2

8

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() {
...
var mapOptions = {
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

Than i set the center of the map on rendering

Template.mapPostsList.rendered = function() {
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'
  });
marker.setMap(Map);

Till now everything works fine. Despite i have a PostCollection which contains some coordinates for me. I have a publish and subscribefunction. Now i want to show my posts via markers on the map.

My first idea was to do this in my rendered function. The problem is that on initial load no posts are displayed, because my localcollection(clientside) does not contain any posts. It takes some time until posts are loaded from server.

Thats the reason why i tried to build a helperfunction. Because the helper automatically realoads if something within my posts changes.

Template.mapPostsList.helpers({
posts: function() {
   var allPosts = Posts.find();
   allPosts.foreach(function(post) {
      create marker and attach it to the map
      ....
      marker.setMap(Map);
   })

The Problem is now, that my map variable is not defined. Is there a way to define it in global scope? Why can i use my Map variable in my rendered function? Despite i dont like my approach to inject my markers with the helperfunction or is it the usual way?

Can someone give me hint how to accomplish my problem?

Unrestrained answered 26/5, 2013 at 16:2 Comment(0)
U
19

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

<head>
  ....
  <title>Meteor and Google</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">   </script>
</head>

Than you should create a maps-Template:

<template name="mapPostsList">
  <div id="map">
    <div id="map-canvas"></div>
  </div>
</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!

Unrestrained answered 28/5, 2013 at 16:39 Comment(4)
I'm getting an google is not defined error although I've included the script tag in the header and followed your steps, any ideas? – Cullet
Maybe, if you have an example for me ;) – Unrestrained
Sorry, I've left the topic a while ago and wasn't able to catch up. My bad. – Cullet
I wrote an article on this last year. – Plump
W
2

What worked for me was the following:

  1. Include the script tag on the head to load google maps.
  2. Include another script tag that tells google maps what to do (initialize) once the window has loaded
  3. Place the function that loads the map into the div in your meteor js file

Here's the code

map.html

<head>
  <title>cls</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}&sensor=false"></script>
  <script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  {{> map}}
</body>

<template name="map">
  <!-- Make the div#map-canvas have a height through css or it won't be shown -->
  <div id="map-canvas"/>
</template>

map.js

initialize = function() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

Hope it helps

Wether answered 31/8, 2013 at 20:57 Comment(1)
Hey I tried this and I'm not sure if it worked because the map doesn't show up. When I open up the console it says Uncaught TypeError: Cannot read property 'offsetWidth' of null and points to line 7 of the javascript file (map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);). Do you have any idea how to fix it? – Squirmy

© 2022 - 2024 — McMap. All rights reserved.