Meteor.js에서 Google Maps API 사용하기

Question

Meteor 1.3 및 dburles : google-maps 패키지와 함께 Google Maps API를 사용하려고합니다.

로드하는 데 여러 가지 방법을 시도했지만로드하는 데 너무 오래 걸리므로 사용할 수 없습니다. 이전에 내 페이지가 렌더링되었습니다.

이 방법으로 내 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%; 
}