Gray page appears instead of the map

help
1

I’m using dburles google-maps and I followed exactly what the example says but for some reason the page appears gray, also when i scrolled an error appears.

Here’s my client-side code

GoogleMaps.load({
    v: '3',
    key: '-----------------------------', //I've deleted the key for obvious reasons
    libraries: 'geometry,places'
});

Template.Maps.onRendered(function () {
    GoogleMaps.load({});
})

Template.Maps.helpers({
    MapOptions: function () {
        if (GoogleMaps.loaded()) {
            console.log("funciona");
            return {
                center: new google.maps.LatLng(18.470931, -69.9232547),
                zoom: 12
            }
        }
    }
});


Template.Maps.onCreated(function () {
    GoogleMaps.ready('Map', function () {
        var marker = new google.maps.Marker({
            position: map.options.center,
            map: map.instance
        });
    });
});

Here’s my HTML code

<template name="Maps">
    <div id="map-container">

        {{> googleMap name="Map" options="MapOptions"}}

    </div>

</template>

And here’s the css just in case

#map-container {
    width: 100%;
    max-width: 100%;
    height: 300px;
}

And here’s the error that shows up when I scrolled down or up
image

2 
GoogleMaps.load({
    v: '3',
    key: '-----------------------------', //I've deleted the key for obvious reasons
    libraries: 'geometry,places'
});

Template.Maps.onRendered(function () {
    GoogleMaps.load({});
})

I notice that you are loading the map twice. One without options, so that might be the reason. Can you try it and if it doesnt work share the error?

3

I’ve tried it, it doesn’t work either but thanks for pointing that out, I was confused as to where should I place the key and all of that