A ‘lightning: map’ Component displays a map of one or more locations, using geocoding data and mapping imagery from Google Maps. It can be used to set multiple, dynamic Location Pins. Further, clicking Location Pins would display widgets with the Account Name, Description, and a link to its Record Details.
This makes the Winter 19 introduced, lightning-map Component especially valuable to business owners for accessing customer heatmaps by demographics. We’ve taken the liberty to illustrate this with an implementation of our own.
Firstly, a button-click calls an Apex Controller. The Controller then queries Location data through SOQL in Salesforce from the Object (here, the Account Object), which then gets converted to a usable JSON format. Then, within the ‘lightning: map’ Component, the JSON file is passed to the Standard ‘Map Marker’ attribute of the ‘lightning: map’ Component. The attribute accepts location data as both addresses and geospatial coordinates.
Finally, a map image comes up in a container within the component with a list of Locations. Dynamic Pointer(or Location Pins) triangulate all coordinates retrieved. Also, the list-panel is visible by default when there’re multiple locations specified. When you select a location title in the list, its map marker is activated. Depending on the width of the Container, the list pulls up beside or under the map.
For Live Demo Click here
For Reference Click here
Now that you’ve got a fair idea of what the Component’s about, here’s a look at the source code:
Lightning Web Component HTML
Lightning Web Component JS
Lightning Web Component Apex
Conclusion
The above implementation of the ‘lightning: map’ Component places multiple location pins on locations pulled from Account Records, the only customization in this example.
We’re hoping this spurs you to go on and create demographic views of your Org’s own customer base to understand your company’s patrons and inform segmentation strategies. For further assistance in setting up Lightning Components for productivity, do reach out to us at sales@hicglobalsolutions.com.
Blaze Onward!
