Mdg:geolocation + dburles/meteor-google-maps, Google Places library error


#1

I am using mdg:geolocation + dburles/meteor-google-maps to load a Google Map and display local results. The map works fine and the geolocation works fine, except the Google Places library.

I get the following error “Uncaught TypeError: this.j.getElementsByTagName is not a function”. I can get the Google Places to work outside of Meteor and even without the two package integrations.

This question has been asked before about 3months ago by another user. But it looks like the thread died. Here is my following code in the js file controlling the maps/geolocation

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');

	    });
  	});
});

#2

I was passing map to new google.maps.places.PlacesService(map) when I needed to pass map.instance instead new google.maps.places.PlacesService(map.instance)

See the link for reference https://github.com/dburles/meteor-google-maps#ready