5

I am having trouble solving the Challenge 7 I have the required imports as well as required functions in the JS file. Still #Trailhead giving error:

We can’t find the getLocationFromBrowser() function in the component boatsNearMe controller. Make sure the component was created according to the requirements, including the use of 'getCurrentPosition()' to get the navigator’s geolocation, the arrow notation with 'position =>', getting the coordinates from the position, and assigning them to the controller’s properties 'latitude' and 'longitude, using the proper case sensitivity.

Error

---- Removed the CODE Section in order to stay with Trailhead's Policy ----

I guess this is something which i am missing out in the code.

Somya Tiwari
  • 145
  • 3
  • 8

3 Answers3

4

Your references to the Geolocation Latititude and Longitudes are missing an "_"

You have them like this (single underscores);

rowBoat.Geolocation_Latitude_s

And this need to be like this (double underscores);

rowBoat.Geolocation__Latitude__s

I haven't gone through all the code, but at least these look wrong in your code. Also, not sure that the @track is explicitly needed in this case (anymore).

Todd Halfpenny
  • 193
  • 5
2

The verification code is extremely picky. If you remove the parentheses around the word position, I think it will work.

John Robison
  • 21
  • 1
1

You can try 2 changes to pass the challenge,

  1. remove the parentheses around position from the callback function of getCurrentPosition

  2. follow below steps to rectify mapMarkers creation code The data that is passed to the createMapMarkers is of below format,

    '[{"attributes":{"type":"Boat__c","url":"/services/data/v48.0/sobjects/Boat__c/a022w000006RA28AAG"},"Name":"Sanya","Geolocation__Latitude__s":24.8513290,"Geolocation__Longitude__s":119.4862410,"Id":"a022w000006RA28AAG"},{"attributes":{"type":"Boat__c","url":"/services/data/v48.0/sobjects/Boat__c/a022w000006RA2DAAW"},"Name":"Longxue","Geolocation__Latitude__s":22.6216820,"Geolocation__Longitude__s":113.7630620,"Id":"a022w000006RA2DAAW"}]'

So, you may parse it using JSON.parse(boatData) and then call the map() function on it,

this.mapMarkers = JSON.parse(boatData).map((rowBoat) => {
  return {
    location: {
      Latitude: rowBoat.Geolocation__Latitude__s,
      Longitude: rowBoat.Geolocation__Longitude__s
    },
    title: rowBoat.Name
  };
});

And definitely use double underscore to access Latitude and Longitude from Geolocation as shown above.

One more point, set the isLoading to true just before creating the mapMarkers and set it to false after it is created within the createMapMarkers method.

Hope this will work for you :)

Arin
  • 58
  • 2
  • 8