You need to sign in to do that
Don't have an account?
Anand Kumbhar
after creating a lwc component in visual studios and deploying i was trying to drag drop it on the page it is showing "Sorry to interrupt This page has an error. You might just need to refresh it. First, would you give us some details?"
Here is the code for Js File:
import {LightningElement ,api,wire} from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
const NAME = 'Pokemon__c.Name';
const LATITUDE = 'Pokemon__c.Location__Latitude__s';
const LONGITUDE = 'Pokemon__c.Location__Longitude__s';
const pokemonField = [NEME,LATITUDE,LONGITUDE];
export default class PokemonLocation extends LightningElement {
@api recordId;
mapMarkers= [];
name;
cardTitle;
@wire (getRecord, {recordId: '$recordId', fields :pokemonField})
getPokemons({ error, data}) {
if(error) {
console.error('erro: '+JSON.stringify (error))
}else if(data){
this.name = getFieldValue(data, NAME);
this.cardTitle = this.name;
const Latitude = getFieldValue(data, LATITUDE);
const Longitude = getFieldValue(data, LONGITUDE);
this.mapMarkers = [ {
location: {Latitude, Longitude},
title : thin.name,
description: 'Coords : ${Latitude}, ${Longitude}'
}]
console.log("this.mapMakers:"+JSON.stringify(this.mapMakers))
}
}
}
HTML :
<template>
<lightning-card title={cardTitle} icon-name="standard:address">
<lightning-map map-markers={mapMakers} zoom-level="12">
</lightning-map>
</lightning-card>
</template>
It is a Lightning-Map Component
There is no error in the code but when i try to insert it on the page it is showing this:
import {LightningElement ,api,wire} from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
const NAME = 'Pokemon__c.Name';
const LATITUDE = 'Pokemon__c.Location__Latitude__s';
const LONGITUDE = 'Pokemon__c.Location__Longitude__s';
const pokemonField = [NEME,LATITUDE,LONGITUDE];
export default class PokemonLocation extends LightningElement {
@api recordId;
mapMarkers= [];
name;
cardTitle;
@wire (getRecord, {recordId: '$recordId', fields :pokemonField})
getPokemons({ error, data}) {
if(error) {
console.error('erro: '+JSON.stringify (error))
}else if(data){
this.name = getFieldValue(data, NAME);
this.cardTitle = this.name;
const Latitude = getFieldValue(data, LATITUDE);
const Longitude = getFieldValue(data, LONGITUDE);
this.mapMarkers = [ {
location: {Latitude, Longitude},
title : thin.name,
description: 'Coords : ${Latitude}, ${Longitude}'
}]
console.log("this.mapMakers:"+JSON.stringify(this.mapMakers))
}
}
}
HTML :
<template>
<lightning-card title={cardTitle} icon-name="standard:address">
<lightning-map map-markers={mapMakers} zoom-level="12">
</lightning-map>
</lightning-card>
</template>
It is a Lightning-Map Component
There is no error in the code but when i try to insert it on the page it is showing this:
Hi Anand,
I have checked your code and I found the issue, you need to change this line like this:-
before
after
Hope this will help you, please mark this as best answer.Thanks