Tengo una clase muy simple,

 class LocationSearch extends BaseComponent { constructor(element) { super(element); this.initializeSearch(); } initializeSearch() { this.service = new window.google.maps.places.AutocompleteService(); this.service.getPlacePredictions({ input: 'The Black Bull' }, this.displayResults); } displayResults(predictions, status) { if(status !== window.google.maps.places.PlacesServiceStatus.OK) { this.searchResults = []; return false; } const results = predictions.map((prediction) => prediction.structured_formatting); const resultsWrapper = SelectorEngine.findOne('.location-search-results-list'); results.forEach((result) => { const item = this.createItemMarkup(result); resultsWrapper.append(item); }); } createItemMarkup(item) { const { main_text, secondary_text} = item; const listElement = document.createElement('li'); const buttonElement = document.createElement('button'); const firstLine = document.createTextNode(main_text); const lineBreak = document.createElement('br'); const secondLine = document.createTextNode(secondary_text); buttonElement.setAttribute('class', 'location-search-results-list__item'); buttonElement.setAttribute('type', 'button'); buttonElement.setAttribute('role', 'option'); buttonElement.append(firstLine) .append(lineBreak) .append(secondLine); listElement.append(buttonElement); return listElement; } }

Al ingresar la parte forEach del método displayResults , aparece el siguiente error:

No se pueden leer las propiedades de undefined (leyendo 'createItemMarkup')

No puedo entender lo que está pasando para que sea indefinido?