Meteor.js et Google Maps

j'ai déjà inclus maps api dans mon projet. Maintenant, je veux vous montrer quelques repères sur ma carte.
Je initialse ma carte dans une fonction de démarrage:

Meteor.startup(function() {
...
var mapOptions = {
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

Que j'ai mis au centre de la carte sur le rendu

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);

Jusqu'à maintenant tout fonctionne très bien.
Malgré que j'ai un PostCollection qui contient des coordonnées pour moi.
J'ai un publier et subscribefunction. Maintenant je veux montrer à mes postes par le biais de marqueurs sur la carte.

Ma première idée était de le faire dans mon rendu de la fonction. Le problème est que sur le chargement initial: pas de messages sont affichés, parce que mon localcollection(côté client) ne contiennent pas de messages. Il faut un certain temps jusqu'à ce que des postes sont chargés à partir du serveur.

C'est la raison pourquoi j'ai essayé de construire un helperfunction. Parce que le helper automatiquement realoads si quelque chose dans mes messages changements.

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

Le Problème est maintenant, que ma carte variable n'est pas définie. Est-il un moyen de le définir dans la portée globale? Pourquoi puis-je utiliser ma Carte de variable dans ma rendu la fonction?
Malgré que je n'aime pas mon approche à injecter mes repères avec la helperfunction ou est-ce la façon habituelle?

Quelqu'un peut-il me donner des astuce comment accomplir mon problème?

OriginalL'auteur chaosbohne | 2013-05-26

19

Comme dans mon questionpost écrit j'ai besoin d'aide pour intégrer google maps fonctionnalité.
La question n'a pas été répondu jusqu'à maintenant et je tiens à vous donner une brève introduction à la façon de résoudre ce problème.

Comment intégrer des cartes dans meteor.js/meteorite.js?

Au premier abord, vous devez inclure les cartes de script dans votre tête-tag
```
<head>
  ....
  <title>Meteor and Google</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">   </script>
</head>
```
Que vous devez créer un cartes-Modèle:
```
<template name="mapPostsList">
  <div id="map">
    <div id="map-canvas"></div>
  </div>
</template>
```
Dans le js-Fichier, vous devez définir une fonction. Lors du rendu de la fonction est invoquée la création d'une carte et d'afficher un marqueur sur la carte. (N'oubliez pas de vous donner une carte un peu de 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);
};
```
Maintenant les cartes-Objet soit recréé everytimes le modèle est rendu. Ce n'est pas le plus pratique, mais il est de travail. J'ai essayé de mettre la création de Modèle.mapPostsList.créé-rappel mais il se déclenche toujours un décalage de la largeur d'erreur. Que je mettre un marqueur avec ma position à la carte et définir une session que ma carte est initialisée.

Bien. Mais maintenant, ma Session obtient initialisé sur le premier rendu, c'est pourquoi je l'ai mis à false lorsque mon modèle est détruit.
```
Template.mapPostsList.destroyed = function() {
  Session.set('map', false);
};
```
Si vous voulez vous procurer vos billets à la carte, vous devez définir une fonction autorun.
```
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);
    });    
  }
});
```
Le Deps.l'exécution automatique de la fonction est toujours déclenché si des modifications de contenu. Cela signifie que si je change de Session liés à la carte-variable de la fonction démarrage automatique est exécutée. Si je l'ai mis à faux je ne fais rien. Autre chose que je récupère tous mes posts à la carte dans un forEach. En raison de recréer la carte sur le rendu je n'ai pas besoin de vérifier quels sont les postes sont déjà marqués sur la carte lors de ma collection de changements.

Cette solution fonctionne très bien pour moi.

J'espère que je peux aider quelqu'un avec cette!

Je suis un google n'est pas définie erreur bien que j'ai inclus la balise script dans l'en-tête et le suivi de vos étapes, des idées?
Peut-être, si vous avez un exemple pour moi 😉
Désolé, j'ai laissé le sujet il y a un moment et n'a pas pu le rattraper. Mon mauvais.
j'ai écrit un article sur cette dernière année.

OriginalL'auteur chaosbohne

Ce qui a fonctionné pour moi a été la suivante:

Inclure la balise de script sur la tête à la charge de google maps.
Inclure un autre tag script qui indique à google maps quoi faire (initialiser) une fois que la fenêtre a chargé
Place de la fonction de chargement de la carte dans le div dans votre meteor js fichier

Voici le 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);
}

Espère que cela aide

Hey j'ai essayé et je ne suis pas sûr si cela a fonctionné parce que la carte ne s'affiche pas. Quand j'ouvre la console, il dit Uncaught TypeError: Cannot read property 'offsetWidth' of null et des points à la ligne 7 du fichier javascript (map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);). Avez-vous une idée de comment résoudre ce problème?
Nevermind, j'ai juste eu une faute de frappe dans le code HTML désolé

OriginalL'auteur Jonathan Morales Vélez

Vous devez vous connecter pour publier un commentaire.