Google Places "Uncaught TypeError: this.j.getElementsByTagName is not a function"

[NicholasEli]

Hello @dburles I am using this with mdg:geolocation and everything seems to be working great. However when I try to use the Google Places library I get the following error "Uncaught TypeError: this.j.getElementsByTagName is not a function".

I can get Places to work outside of Meteor but it seems to stop working inside the "GoogleMaps.ready" instance. It stops specifically at "new google.maps.places.PlacesService" instance. I found the same issue on Stack Overflow but there was no accepted solution.

Any ideas on how to get the library to work within your package?

[dburles]

Hey @NicholasEli do you have a reproduction I can check out?

[NicholasEli]

Hello @dburles , here is what I have written.

Meteor.startup(function() {  
  GoogleMaps.load({
    v : '3',
    key: 'mYKeyinHereBLAHABLAHBLAH',
    libraries: 'places'
  });
});

Template.map.helpers({ 
    //get current lat & lng and create map 
    geolocationError: function() {
        let error = Geolocation.error();
        return error && error.message;
    },
    mapOptions: function() {
        let latLng = Geolocation.latLng();
        // Initialize the map once we have the latLng.
        if (GoogleMaps.loaded() && latLng) {
            return {
                center: new google.maps.LatLng(latLng.lat, latLng.lng),
                zoom: 15
            };
        }
    }
});

Template.map.onRendered(function() { 
    let self = this; 

    GoogleMaps.ready('map', function(map) {
        let latLng = Geolocation.latLng();

        let marker;
        self.autorun(function() {
            //set user location
            let marker = new google.maps.Marker({
                position: new google.maps.LatLng(latLng.lat, latLng.lng),
                map: map.instance
            });
            marker.setPosition(latLng);
            map.instance.setCenter(marker.getPosition());
            map.instance.setZoom(15);

            //google places
            let Places = function(locationType){
                this.locationType = locationType;

                let place = new google.maps.places.PlacesService(map);
                place.nearbySearch({
                    location: latLng,
                    radius: 16100, //10 mile radius
                    keyword: [locationType]
                }, getPlace);

                function getPlace(results, status) {
                    if (status === google.maps.places.PlacesServiceStatus.OK) {
                        for (let i = 0; i < results.length; i++) {
                            console.log(results[i]);
                            createPlaceMarkers(results[i]);
                        }
                    }
                }

                function createPlaceMarkers(place) {
                    let placeLocation   = place.geometry.location,
                        placeMaker  = new google.maps.Marker({
                            map: map,
                            position: place.geometry.location,
                        draggable:false,
                        zIndex: 9997
                        });
                }
            }

            let bars = new Places('Bar'),
                    club = new Places('Night Club');

        });
    });
});

[dburles]

Sorry I mean like a simple Meteor app I can run

[dburles]

If you're able to reproduce the bug in as simplistic manner as possible e.g. in an isolated Meteor app, that would make it much easier for me to check out

[NicholasEli]

Hello @dburles here is a repo https://github.com/NicholasEli/meteor-google-places with a simple form of the app. You'll just need to create a new Meteor project and add the two dependencies geolocation and gmaps.

[dburles]

Hey @NicholasEli sorry but there's too much code there that's not directly related to causing this specific error, try and reproduce the bug with as little code as possible.

[NicholasEli]

Ok @dburles I reduced it down as far as it can go to the Places() function. Please try the same repo and let me know if that works.

[dburles]

Thanks @NicholasEli your problem is that you're passing in the map object to new google.maps.places.PlacesService(map); when you should pass in map.instance. That solves your issue. See here https://github.com/dburles/meteor-google-maps#ready

[NicholasEli]

Thank you sir!, I owe you a coffee.

[dburles]

No prob!