0

So, I was just trying to get current location by using navigator.getlocation.getCurrentLocation method in Lightning Web Components. When I check if(navigator.getlocation), this returns true.

But when use the method, it always gives me an error like

"afterRender threw an error in 'c:sampleMapComponent' [Cannot read property 'length' of undefined]".

Below is my code of JS file.

/* eslint-disable no-console */
import { LightningElement, track } from 'lwc';

export default class SampleMapComponent extends LightningElement {
    @track mapMarkers;

    get findMe() {
        navigator.geolocation.getCurrentPosition(this.success, this.error);
        return this.mapMarkers;
    }

    success(position) {
        if (position) {
            console.log('position -> ' + position);
            this.mapMarkers = [
                {
                    location: {
                        'Latitude': position.coords.latitude,
                        'Longitude': position.coords.longitude
                    },
                    title: "My Location",
                },
            ]
        }

    }

    error() {
        console.log('Failed');
    }
}

Template:

<template>
<h1>Current Location</h1>
<template if:true={mapMarkers}>
    <lightning-map map-markers={mapMarkers}></lightning-map>
</template>

Error:

enter image description here

Please let me know what am I doing wrong..I am calling findMe() method from template (from map-markers of lightning-map)

  • Are you sure this is your complete code? I don't see the if condition that you have mentioned and length being used anywhere in the code. – Jayant Das May 24 at 20:45
  • Hi Jayant, I've removed the if condition. I just wanted to check if navigator... is allowed in lwc or not. It returned true. And I didnt put length nowhere in my code either. I've edited my question with screenshot of error and template. – Lokesh Sagi May 24 at 21:50
0

findMe is returning a null value, because the code to get the geocode is asynchronous. Without seeing your template, I can't advise a perfect fix, but you might start with this:

/* eslint-disable no-console */
import { LightningElement, track } from 'lwc';

export default class SampleMapComponent extends LightningElement {
    // Default is no markers
    @track mapMarkers = [];

    // Called when component is displayed
    connectedCallback() {
        navigator.geolocation.getCurrentPosition(this.success, this.error);
    }

    // Update the map marker
    success(position) {
        if (position) {
            console.log('position -> ' + position);
            this.mapMarkers = [
                {
                    location: {
                        'Latitude': position.coords.latitude,
                        'Longitude': position.coords.longitude
                    },
                    title: "My Location",
                },
            ]
        }

    }

    error() {
        console.log('Failed');
    }
}
  • I've changed the JS file as you said. Now, the 'length of undefined....' error is gone (probably cause we have initialised mapMarkers to be []) but it just displays a map without any markers...can you please comment where am I going wrong...(I've also added the template file in the question) – Lokesh Sagi May 24 at 22:20
0

Extra comma , is found in your mapMarkers list. Remove and try it again.

},

this.mapMarkers = [
            {
                location: {
                    'Latitude': position.coords.latitude,
                    'Longitude': position.coords.longitude
                },
                title: "My Location",
            },
        ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.