将 Google Maps API 与 Meteor.js 一起使用答案

【问题标题】：Using Google Maps API with Meteor.js将 Google Maps API 与 Meteor.js 一起使用
【发布时间】：2016-11-06 03:58:00
【问题描述】：

我正在尝试将 Google Maps API 与 Meteor 1.3 和 dburles:google-maps 包一起使用。

我尝试了各种方式来加载它，但问题是我无法使用它，因为我认为加载时间太长，而且我的页面之前已经渲染过。

我以这种方式在我的main.js 中加载它以确保首先加载它。

import { GoogleMaps } from 'meteor/dburles:google-maps';
import { Meteor } from 'meteor/meteor';

Meteor.startup(function () {
  GoogleMaps.load({ key: 'myKey' });
});

然后我在模板中包含帮助器以显示地图。

<template name="home">
    <h1>Home</h1>

    <div class="map-container">
        {{> googleMap name="exampleMap" options=exampleMapOptions}}
    </div>

</template>

终于有了我的帮手来设置模板的选项。

import { Template } from 'meteor/templating';
import { GoogleMaps } from 'meteor/dburles:google-maps';

import './home_page.html';

Template.home.helpers({
  exampleMapOptions() {
    // Make sure the maps API has loaded
    if (GoogleMaps.loaded()) {
      // Map initialization options
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8,
      };
    }
  },
});

Template.home.onCreated(function() {
  GoogleMaps.ready('exampleMap', function(map) {
    console.log("I'm ready!");
  });
});

我认为条件if (GoogleMaps.loaded()) 是什么都不显示的原因，但如果我不说，我会收到错误，因为google 对象不存在。

【问题讨论】：

控制台JS有错误吗？
您是否也尝试从包中导入 google？
@GUISSOUMAIssam 不，我没有。
@JanJoukeTjalsma 我不知道是否有可用的 Google 软件包。 Google Maps 包的文档从未指定任何依赖项。
尝试在我的答案中添加 css。

标签： javascript google-maps meteor meteor-blaze

【解决方案1】：

如果您的 JS 控制台上没有错误，则地图可能已加载但未显示缺少 css。

如果是这样，请将下面的行添加到您的main.css

body, html {
    height: 100%;
    width: 100%;
}

.map-container {
    width: 100%;
    height: 100%;
}

【讨论】：