Google maps api 3 无法使用google map api3在meteor应用程序上显示地图_Google Maps Api 3_Meteor

Google maps api 3 无法使用google map api3在meteor应用程序上显示地图

google-maps-api-3 meteor

Google maps api 3 无法使用google map api3在meteor应用程序上显示地图,google-maps-api-3,meteor,Google Maps Api 3,Meteor,嗨，我是meteor的新手，我正在编写教程之外的第一个应用程序。我来自一个node+express世界。我目前正在尝试将使用google maps java script api v3在Node+express上构建的应用程序转换为meteor应用程序，以便能够将其分发到特定设备。在我的试用中，我将地图代码放在html页面的head元素中，使应用程序在web上本地运行，并按预期运行。当我尝试将其导入android设备时，我收到错误： Uncaught ReferenceError: go

嗨，我是meteor的新手，我正在编写教程之外的第一个应用程序。我来自一个node+express世界。我目前正在尝试将使用google maps java script api v3在Node+express上构建的应用程序转换为meteor应用程序，以便能够将其分发到特定设备。在我的试用中，我将地图代码放在html页面的head元素中，使应用程序在web上本地运行，并按预期运行。当我尝试将其导入android设备时，我收到错误：

    Uncaught ReferenceError: google is not defined

这个错误让我告诉我将地图代码移动到Template.rendered函数中，因为meteor脚本是在加载google maps api之前运行的，这似乎是正确的。我按照那篇帖子上的说明进行了操作，现在我收到了一个新的错误，说明：

    Uncaught TypeError: Cannot set property 'rendered' of undefined

通过谷歌搜索，我发现了我的错误。它指出我加载html页面的顺序有问题。它引导您更改packages.json文件，以重新构造文件的服务顺序。这里的问题是，我的包文件的设置方式与她的不一样，我很难将它与她的文件联系起来。任何建议将不胜感激，我将包括以下代码为我目前的申请

Html:

套餐：

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

提前感谢您抽出时间。请让我知道，如果有什么我可以包括，这将是更有用的

编辑1：目前正在研究使用JavaScriptAPI v3的Google地图将发布更新。

您使用的是哪种meteor版本

运行meteor--version，如果在1.0.4下，则将渲染更改为this（），现在我们使用

此外，您不需要在这里使用

google.maps.event.adddomliste

，您可以这样做

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

但是代码没有问题。检查垃圾

更新

这就是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>

嘿，谢谢你帮我调查。我的版本是当前的1.1.0.2。我将查看您的演示并将我的地图应用到其中。我会让你了解最新情况。不应该花费太长时间。相反，呈现的模板应该可以工作，请在函数initialize中放置一个console.log，以确保函数得到初始化不会命中console.log（）。它不允许它被渲染。我仍然收到这个错误“UncaughtTypeError:无法设置未定义的属性'rendered'”，它指向第3行，即Template.maps.rendered=function（）{try with this html

{>maps}

将模板放在body标记之外，就像答案说的那样，你不能使用

template.maps.rendered

你应该更改为

template.maps.onRendered（）

它永远不会工作。嘿，谢谢你一直支持我。当我将它更改为onRendered（）时我得到了左手分配错误。如果我使用onRendered，错误就会消失。唯一的问题是初始化函数仍然没有运行。我的console.log没有启动。我相信这可能是因为现在可能没有#map canvas div来加载map。下面是我的代码，其中包含您建议的更改-onRendered（）和+onRendered不带（）。

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

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

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

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