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

Question

Я пытаюсь использовать API Карт Google с 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%; 
}