Geek Answers Handbook

Meteor.js and Google Maps

I already included api maps in my project. Now I want to show some markers on my map. I initialize my card in the start function:

Meteor.startup(function() { ... var mapOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; Map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

How do I set the center of the map when 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);

So far, everything is working fine. Despite the fact that I have a PostCollection that contains some coordinates for me. I have a publish and subscribe function. Now I want to show my posts using markers on the map.

My first idea was to do this in my processed function. The problem is that the message is not displayed during the initial loading, because my localcollection (clientside) does not contain messages. It takes some time until messages are downloaded from the server.

That is why I tried to create a helper function. Since the helper automatically loads if something inside 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 that my map variable is not defined. Is there a way to define it globally? Why can I use the Map variable in my rendered function? Despite the fact that I do not like my approach, to enter my tokens using a helper function, or is this the usual way?

Can someone give me a hint how to solve my problem?

+8
maps meteor meteorite
source share
2 answers

As in my posed question, I needed some help to integrate the functions of Google Maps. The question has not been given so far, and I want you to briefly describe how to solve this problem.

How to integrate cards in meteor.js / meteorite.js?

First you must include the map script in your header

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

How should you create a template card:

 <template name="mapPostsList"> <div id="map"> <div id="map-canvas"></div> </div> </template>

In the associated js file, you must define a render function. When the rendered function is called, you create a map and display a marker on the map. (Remember to give you a css map)

 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, object cards are recreated every time a template is displayed. This is not the best practice, but it works. I tried putting the creation in Template.mapPostsList.created-callback, but it always causes an offset width error. How do I set a marker with my position on the map and determine the session that is initialized by my map.

Well. But now my session is initializing on the first rendering, so I set it to false when my template is destroyed.

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

If you want to receive your messages on the card, you need to define the 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 always runs if the content changes. This means that if I change my session map variable, autostart is called. If I set it to false, I do nothing. Else I take all my messages to the map within forEach. Due to the recreation of the map during rendering, I don’t need to check which messages are already marked on the map when changing my collection.

This solution works well for me.

Hope I can help with this!

+19
source share

What worked for me was the following:

  • Include a script tag on your head to load Google maps.
  • Include another script tag that tells Google maps what to do (initialize) after loading the window
  • Put a function that loads a map in a div in your meteor js file

Here is 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 this helps

+2
source share

More articles:


All Articles