CODEWITHSUNDEEP
javascriptgoogle-mapsmeteormeteor-blaze
Hugo
Hugo

Reputation: 163

Using Google Maps API with Meteor.js

I'm trying to use the Google Maps API with Meteor 1.3 and with the dburles:google-maps package.

I tried various way to load it but the thing is that I can't use it because it takes too long to load I think and my page is rendered before.

I load it this way in my main.js to be sure that is loaded first.

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

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

Then I include the helper in my template to display the map.

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

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

</template>

Finally there is my helper to set the options for the 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!");
  });
});

I think that the condition if (GoogleMaps.loaded()) is the reason why nothing is displayed but if I dont put it I got an error because the google object doesn't exist.

Upvotes: 0

Views: 1913

Answers (1)

GUISSOUMA Issam
GUISSOUMA Issam

Reputation: 2582

If you don't have an error on your JS console, the map could be loaded but not shown for missing css.

If it's so, Add the line below to your main.css

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

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

Upvotes: 2

Related Questions