在 Meteor 中显示 Google 地图问题？

Question

我需要了解如何在 Meteor.I 中显示 google 地图做了一个示例，如下所示。

Html代码：

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

</head>

<body>

  {{> maps }}

</body>

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

JS代码：

if (Meteor.isClient)
{

  Template.maps.rendered = function() {

    console.log("*** Map  Start ********")
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    console.log("*** Map  end ********")

    //return map;




  }

  }//End is Meteor

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

问题是我运行时没有显示地图我的 code.I 对 this.So 没有任何想法请建议我为此做什么？

Answer 1

Lets put the map on a initialize function like this.



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


        //return map;

现在开始渲染函数。

Template.maps.rendered = function(){
       Meteor.setTimeout(function(){
        initMapa();
         },2500)
       }

还要确保您拥有这样的 .css 文件。

#map-canvas { 
width: 100%; 
height: 300px; 
}

它应该有效，测试它并告诉我是否有效

在 Meteor 中显示 Google 地图问题？

Show Google Map Issue in Meteor?

google-maps

meteor