无法使用谷歌地图 api3 在流星应用程序上显示地图答案

【问题标题】：Cannot get map to display on meteor app using google map api3无法使用谷歌地图 api3 在流星应用程序上显示地图
【发布时间】：2015-04-20 16:13:36
【问题描述】：

您好，我是流星新手，我正在编写教程之外的第一个应用程序。我来自节点 + 快递世界。我目前正在尝试将使用 google maps java script api v3 在 Node+express 上构建的应用程序转换为流星应用程序，以便我可以将其分发到特定设备。在我的试验中，我通过将我的地图代码放入我的 html 页面的 head 元素中，让该应用程序在网络上本地运行，并且它按预期运行。一旦我尝试将其导入到 android 设备上，我就会收到错误消息：

    Uncaught ReferenceError: google is not defined

从那个错误导致我到 this post 告诉我将我的地图代码移动到 Template.rendered 函数中，因为在加载谷歌地图 api 之前正在运行流星脚本，这似乎是正确的。我按照该帖子上的说明进行操作，现在收到一条新错误消息：

    Uncaught TypeError: Cannot set property 'rendered' of undefined

通过谷歌搜索将我带到this blog post 以提及我的错误。它指出我加载我的 html 页面的顺序存在问题。它指导您更改 packages.json 文件以重新构建文件服务的顺序。这里的问题是我的包文件不相似设置她的方式，我无法将其与她的档案联系起来。任何建议都将不胜感激，我将在下面包含我当前应用程序的代码。

HTML：

    <head>

    <title>Google Maps App</title>

    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&sensor=true">

    </script>


    </head>

    <body>


       <template name="maps">

          <div id="map-canvas"></div>

       </template>
    </body>

js:

    if (Meteor.isClient) {

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

    google.maps.event.addDomListener(window, 'load', initialize);

    }




    }

    if (Meteor.isServer) {
      Meteor.startup(function () {

      });
    }

包：

    meteor-platform
    autopublish
    insecure
    twbs:bootstrap
    fortawesome:fontawesome
    jquery

提前感谢您的宝贵时间。如果有什么我可以包含的内容会更有帮助，请告诉我。

编辑 1：目前正在研究将 this meteor package 用于带有 javascript api v3 的 googlemaps 将发布更新。

【问题讨论】：

标签： google-maps-api-3 meteor

【解决方案1】：

你用的是哪个流星版本？

运行meteor --version，如果低于1.0.4，将渲染更改为this(rendered = function() was depurated)，现在我们使用onRendered。

Template.maps.onRendered(function(){
   //map code here
 });

另外你在这里不需要google.maps.event.addDomListene，你可以这样做。

//appName/client/helpers.

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

//appName/client/views/map/map.js

Template.maps.onRendered(function(){
       initMap
     });

但代码没问题。检查this垃圾DEMO

更新

这就是 html 的外观。

<head>
    <title>Google Maps App</title>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDG1mocxosoC9cq-ucFO3vdZCcUxyKa6B4&sensor=true">
    </script>  
</head>
  <body>
    {{> maps}}
  </body>
<template name="maps">
<div id="map-canvas"></div>
 </template>

还有 Javascript。

  Template.maps.onRendered(function(){
     initMap();
    })
initMap = function(){
    var map;
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

【讨论】：

嘿，感谢您为我调查。我的当前版本是 1.1.0.2。我将研究您的演示并将我的地图应用到其中。我会及时通知你的。应该不会花太长时间。
模板渲染应该可以工作，在函数初始化中放置一个console.log以确保函数被初始化
console.log() 没有被命中。它不允许它被渲染。我仍然收到此错误“Uncaught TypeError: Cannot set property 'rendered' of undefined”，它指向第 3 行，即 Template.maps.rendered = function() {
尝试使用这个 html <body>{{> maps}}</body> 将模板放在正文标签之外，就像答案说你不能使用template.maps.rendered 你应该改为template.maps.onRendered() 它永远不会工作。
嘿，谢谢你一直陪着我。当我将其更改为 onRendered() 时，我遇到左手分配错误。如果我只使用 onRendered 错误就会消失。唯一的问题是初始化函数仍未运行。我的 console.log 没有触发。我相信这可能是因为现在可能没有#map-canvas div 来加载地图。这是我的github，它当前所在的代码包含您建议的更改 - onRendered() 和不带 () 的 + onRendered。