As #Winter19 is here, its time to say goodbye to Leaflet.js library as we have a got a powerful base lightning component to generate google maps very easily.
Read complete #Winter19 Lightning features here.
What you will learn from this post?
- Implementation of lightning:map base component
- Dynamic component creation and destruction
- Implementation of lightning:datatable component. Detailed explaination here
This base lightning component is capable of rendering google maps along with single/multiple markers. It accepts both type of location:
- Latitude & Longitude
- Complete address components like Street, City, State etc.
There are 5 different address components which are- Street, City, State, Country, Pin Code.
For customizing the component, we have several attributes. Like:
- zoomlevel – Setting a specific zoom level.
- mapmarkers – Required attibute which holds a list of location data
- markerstitle – Title for each marker
- showfooter – Show footer with google map link
Component – LightningMapDemo.cmp
Controller – LightningMapDemoController.js
Helper – LightningMapDemoHelper.js
Apex Controller – LightningMapDemoController.apxc
- If you pass both latitude/longitude and address components, latitude/longitude will take preference.
- If you don’t specify a certain zoom level, the framework will automatically set appropriate zoom level for map component.
- Only mapMarkers attribute is required, other attributes are optional.
- It is available in all lightning experiences like lightning out, salesforce mobile, communities etc.
- You can pass multiple or single marker to map component.
Reference: Lightning Component Library
lightning:map definetely is a powerful component and very easy to implement. I have used dynamic component creation and destruction in this post as I had to generate these map components everytime a user clicks on a car tile.