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