Registering Google Maps API Key with Meteor 1.3 & React

Hey all,

I’m having some problems with the integration of Google Maps with my Meteor 1.3 app using React and the suggested application structure from the 1.3 version of the Guide.

I suspect the solution is very simple; I’ve just been at this problem too long to see what’s right in front of me.

I’ve trialled pretty much every package to bring in Google Maps (and Mapbox) both as just a straight API and wrapped in either a React package (NPM) or Meteor package (Atmosphere).

The best of the bunch, and one of the few that worked without massive headaches, was ‘react-gmaps’ from NPM, which has a nice API and works reactively as the component rendering it changes state (and subsequently view).

However, it doesn’t allow me to register my Google Maps API key from within the package (prompting a console warning) and requires me to place a <script> tag in the <head> of my HTML. Obviously that’s not ideal! :slight_smile:

So, first question; is there any way is insert my key as a variable in that <script> tag (using Meteor.settings…)? I assume that would require me to switch from the static-html package, back to that HTML file being a Blaze template?

Or, second question: any way to load the Google Maps API and register a key without that script tag at all? i.e. using a separate package that registers the API key, but doesn’t interfere with the loading of maps from the ‘react-gmaps’ package?

Really for the life of me can’t see the wood for the trees on this one! :grin:

Cheers!

1 Like

All right well I have done what you are doing but with an atmosphere package and you can have it react Maps Package.

They also have a section for inserting you api key with the load area. If you would like to see the actual code I use to load a map I can post it on here.

1 Like