function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Krizia BuckKrizia 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! 
Ravi Dutt SharmaRavi Dutt Sharma
I think that is not possible using the lightning-maps component. When you click on a marker, the max you can do is display an info window next to the marker. The info window comes through value defined in the description attribute of the maps. Sample code below:
 
import { LightningElement } from 'lwc';

export default class LightningExampleMapSingleMarker extends LightningElement {
    mapMarkers = [
        {
            location: {
                Street: '1600 Pennsylvania Ave NW',
                City: 'Washington',
                State: 'DC',
            },

            title: 'The White House',
            description:
                'Landmark, historic home & office of the United States president, with tours for visitors.',
        },
    ];
}
Krizia BuckKrizia Buck
Really? It just seems like it must be possible. Otherwise what is the use of showing all of the data in the map if you cannot actually pick the record you want and go to its detail page? Is there a way to find out if there are more options I can send in for the mapMarkers? My wrapper currently takes everything that I know exists for the Lightning-Map. 
 
public inherited sharing class MapMarkerWrapper {
        public LocationWrapper location { get; set; }
        public String icon { get; set; }
        public String title { get; set; }
        public String description { get; set; } 

        public MapMarkerWrapper(LocationWrapper location, String icon, String title, String description) {
            this.location = location; 
            this.icon = icon; 
            this.title = title; 
            this.description = description; 
        }
    }

    
    public inherited sharing class LocationWrapper {
        public String Street { get; set; } 
        public String City { get; set; } 
        public String PostalCode { get; set; } 
        public String State { get; set; } 
        public String Country { get; set; } 
        public Decimal Latitude { get; set; } 
        public Decimal Longitude { get; set; }

        public LocationWrapper(String street, String city, String postalCode, String state, String country, Decimal latitude, Decimal longitude) {
            this.Street = street; 
            this.City = city; 
            this.PostalCode = postalCode; 
            this.State = state; 
            this.Country = country; 
            this.Latitude = latitude; 
            this.Longitude = longitude; 
        }
    }

 
Tom O WardTom O Ward
Did you ever have any luck with this?
It is a problem I'm currently trying to resolve as well
Sufyan AshrafSufyan Ashraf

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');
    }

})

Khaqan MahmoodKhaqan Mahmood
Thank you so much Sufyan, finally a working solution.