TypeError: Cannot create property 'mapTypeId' on string 'Unable to load the map' Error in meteor

Question

I'm trying to understand and debug an error I keep getting on the console. I'm implementing Google maps on a meteor project. I'm using dburles:google-maps & mdg:geolocation

I keep seeing the TypeError: Cannot create property 'mapTypeId' on string error at Object.create google-maps This is the offending line of code coming from dburles:google-maps package

  create: function(options) {
    // default to Map
    var type = options.type ? options.type : 'Map';
    if (! _.include(supportedTypes, type)) {
      throw new Meteor.Error("GoogleMaps - Invalid type argument: " + type);
    }

    this._create(options.name, {
      type: type,
      instance: new google.maps[type](options.element, options.options), //<= [ERROR] here
      options: options.options
    });

Is the error related to how I'm creating my map on my template? I can see the map, I just would like to understand the error.

My code:

map.tpl.jade

section.section--map 
    .section--map__bgImage
    .section--map__content
        h1.section--map__title Frit.kots available right now
        .section--map__container
            unless geolocationError
                +googleMap(type='Map' name='map' options=mapOptions)
            else
                | Geolocation failed: {{geolocationError}}
+footer

map.js

import './map.tpl.jade';


// [FIX-ME]: This part of the code must be fixed

Meteor.startup( () => {
    GoogleMaps.load({
        v: '3',
        key: 'MY_API_KEY'
        // libraries: 'places'
    });
})


// onCreated
Template.map.onCreated( function() {

    let self = this;
    let MAP_ZOOM =  15;
    let loadedMap = GoogleMaps.loaded();

    console.log('Creating the map');
    console.log(`These are the map vars: ${MAP_ZOOM} && ${loadedMap}`);

    GoogleMaps.ready('map', (map) => {

        let marker;

        // Create and move marker when latLng changes
        self.autorun( () => {
            let latLng = Geolocation.latLng;

            if (!latLng) {
                return;
            }

            // if marker doesn't exist, create one
            if (! marker) {
                marker = new google.maps.Marker({
                    // position: new google.maps.LatLng(latLng.lat, latLng.lng),
                    position: map.options.center,
                    map: map.instance
                });
            // if marker already exists, change its position
            } else {
                marker.setPosition(latLng);
            }
            // Center and zoom the map view into
            map.instance.setCenter(marker.getPosition());
            map.instance.setZoom(MAP_ZOOM);
        })
    })
});


// Helpers
Template.map.helpers({
    geolocationError: () => {

        let error = Geolocation.error();
        console.log(`This is the error message: ${error}.message`);
        return error && error.message;
    },
    mapOptions: () => {
        let latLng = Geolocation.latLng();
        let loadedMap = GoogleMaps.loaded();
        let MAP_ZOOM = 15;

        // Initialize the map once 
        if (loadedMap && latLng) {
            return {
                center: new google.maps.LatLng(latLng.lat, latLng.lng),
                zoom: MAP_ZOOM
            }
        } else {
            return 'Unable to load the map';
        }
    }
});

Answer 1

  instance: new google.maps[type](options.element, options.options)

I assume there's an error in the data structure. Double check the documentation on google.maps and make sure you are constructing the call right and also that type is the right argument on the right way.