Lightning Web Component Specialist Super badge: Challenge 7 throwing error - lwc

Question

I am facing error in LWC Specialist Superbadge Challenge:7
import { LightningElement, track, wire, api } from 'lwc';
import getBoatsByLocation from '#salesforce/apex/BoatDataService.getBoatsByLocation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
const LABEL_YOU_ARE_HERE = 'You are here!';
const ICON_STANDARD_USER = 'standard:user';
const ERROR_TITLE = 'Error loading Boats Near Me';
const ERROR_VARIANT = 'error';
export default class BoatsNearMe extends LightningElement {
#api boatTypeId;
#track mapMarkers = [];
#track isLoading = true;
#track isRendered = false;
latitude;
longitude;
#wire(getBoatsByLocation, { latitude: '$latitude', longitude: '$longitude', boatTypeId: '$boatTypeId' })
wiredBoatsJSON({ error, data }) {
if (data) {
this.createMapMarkers(data);
} else if (error) {
this.dispatchEvent(
new ShowToastEvent({
title: ERROR_TITLE,
message: error.body.message,
variant: ERROR_VARIANT
})
);
this.isLoading = false;
}
}
renderedCallback() {
if (this.isRendered == false) {
this.getLocationFromBrowser();
}
this.isRendered = true;
}
getLocationFromBrowser() {
navigator.geolocation.getCurrentPosition(
position => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
},
(e) => {
}, {
enableHighAccuracy: true
}
);
}
createMapMarkers(boatData) {
this.mapMarkers = JSON.parse(boatData).map(rowBoat => {
return {
location: {
Latitude: rowBoat.Geolocation__Latitude_s,
Longitude: rowBoat.Geolocation__Longitude_s
},
title: rowBoat.Name,
};
});
this.mapMarkers.unshift({
location: {
Latitude: this.latitude,
Longitude: this.longitude
},
title: LABEL_YOU_ARE_HERE,
icon: ICON_STANDARD_USER
});
this.isLoading = false;
}
}
<template>
<lightning-card class="slds-is-relative">
<template if:true={isLoading}>
<lightning-spinner alternative-text="Loading" size="small" variant="brand"></lightning-spinner>
</template>
<!-- The lightning-map goes here -->
<template if:true={isRendered}>
<lightning-map map-markers={mapMarkers}> </lightning-map>
</template>
<div slot="footer">Top 10 Only!</div>
</lightning-card>
</template>
Challenge Not yet complete... here's what's wrong: We can't find the correct settings for the createMapMarkers() function in the component boatsNearMe JavaScript file. Make sure the component was created according to the requirements, including the right mapMarkers, title, Latitude (Geolocation__Latitude__s), Longitude (Geolocation__Longitude__s), the correct constants, stopping the loading spinner, and using the proper case-sensitivity and consistent quotation.

Answer 1

You have to assign newMarkers to mapMarkers.
newMarkers.unshift({
location: {
Latitude: this.latitude,
Longitude: this.longitude
},
title: LABEL_YOU_ARE_HERE,
icon: ICON_STANDARD_USER
});
this.mapMarkers = newMarkers;
this.isLoading = false;

Answer 2

In createMapMarkers method Double underscore is missing. Try:
Latitude: rowBoat.Geolocation__Latitude__s,
Longitude: rowBoat.Geolocation_Longitude__s