Использование Google Maps API с Meteor.js

Question

Я пытаюсь использовать 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 объект не существует

Answer 1

Если у вас нет ошибки на консоли JS, карта может быть загружена, но не показана для отсутствующего css.

Если это так, добавьте строку ниже к вашему main.css

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

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