发表新帖
发表新帖

Meteor.js and Google Maps

后端 未结
关注
2 552
闹比i
闹比i 2020-12-05 06:09

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() {
相关标签:
2条回答
  • 余生分开走
    2020-12-05 06:33

    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!

    0 讨论(0)
  • 终归单人心
    2020-12-05 06:44

    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

    0 讨论(0)
 看不清?
提交回复
热议问题