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