You need to sign in to do that
Don't have an account?
Krizia Buck
Lightning-Map: How do you enable opening records upon clicking on markers and the list items?
Hi there,
I am trying to utilize the lightning-map Lightning Web Component for the standard Account object. It works beautifully when displaying the data on the map and in the built in list view. My issue though is that it does not open up the record when I click on either the map marker or the item in the list view, instead it just refreshes the page. Has anyone else seen this issue?
My LWC is using Lightning Out in an Aura App within a Visualforce page. As I mentioned before, everything is properly displaying as expected, but all that is wrong is that the page refreshes upon clicking what look like hyperlinks to the Account records.
Any help is much appreciated! Thank you!
I am trying to utilize the lightning-map Lightning Web Component for the standard Account object. It works beautifully when displaying the data on the map and in the built in list view. My issue though is that it does not open up the record when I click on either the map marker or the item in the list view, instead it just refreshes the page. Has anyone else seen this issue?
My LWC is using Lightning Out in an Aura App within a Visualforce page. As I mentioned before, everything is properly displaying as expected, but all that is wrong is that the page refreshes upon clicking what look like hyperlinks to the Account records.
Any help is much appreciated! Thank you!
It is a problem I'm currently trying to resolve as well
Finally found a solution by working on a similar problem. I am displaying buildings related to a specific city object on google maps by using lightning maps in aura components. I am using a trick to make the maps' records or icons clickable. I am storing the Id of the record in the value field of the map markers and getting the id by the event.getParam("selectedMarkerValue") in the handleMarkerSelect function. Then make a URL using the Id and open it using a javascript window.open(URL, '_blank') function. And it's working for me.
See my below code for a better understanding.
Component.cmp
<aura:component controller="CityMapController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="recordId" type="String" />
<aura:attribute name="mapMarkers" type="Object"/>
<aura:attribute name="center" type="Object" />
<aura:attribute name="zoomLevel" type="Integer" />
<aura:attribute name="markersTitle" type="String" />
<aura:attribute name="showFooter" type="Boolean" />
<aura:attribute name="showMaps" type="Boolean" default="false"/>
<aura:attribute name="selectedMarkerValue" type="String" default="" />
<aura:if isTrue="{!v.showMaps}">
<lightning:map
mapMarkers="{! v.mapMarkers }"
center="{! v.center }"
selectedMarkerValue="{!v.selectedMarkerValue}"
onmarkerselect="{!c.handleMarkerSelect}"
zoomLevel="{! v.zoomLevel }"
markersTitle="{! v.markersTitle }"
showFooter="{ !v.showFooter }"
listView="visible"
>
</lightning:map>
</aura:if>
</aura:component>
Controller.js
({
doInit : function(component, event, helper) {
let recordId = component.get('v.recordId');
let values =[];
let city;
if(recordId)
{
let actionGetBuildings = component.get("c.buildingsRelatedCity");
actionGetBuildings.setParams({
recordId : recordId
});
actionGetBuildings.setCallback(this, function(response){
let state = response.getState();
if (state === "SUCCESS" ) {
let buildingsrecords = response.getReturnValue();
if(buildingsrecords.length > 0)
{
component.set("v.showMaps", true);
city = buildingsrecords[0].City__c;
component.set('v.mapMarkers',buildingsrecords.map( function(mapItem) {
return {
location: {
Latitude: mapItem.Latitude__c,
Longitude: mapItem.Longitude__c
},
value: mapItem.Id,
icon: 'custom:custom24',
title: mapItem.Name,
description: mapItem.City__c + ', ' + mapItem.ZIP__c + ' ' + mapItem.StatePK__c + ', ' + mapItem.Country__c
};
})
);
component.set('v.center', {
location: {
City: city
}
});
component.set('v.zoomLevel', 12);
component.set('v.markersTitle', city + ' Buildings');
component.set('v.showFooter', true);
}
}
});
$A.enqueueAction(actionGetBuildings);
}
},
handleMarkerSelect: function (cmp, event, helper) {
let Id = event.getParam("selectedMarkerValue");
let url = '/lightning/r/Building__c/' + Id +'/view';
window.open(url, '_blank');
}
})