lightning:map #Winter19 – An Easy Solution To Generate Google Map

lightning:map #Winter19 – An Easy Solution To Generate Google Map

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

lightning:map 

This base lightning component is capable of rendering google maps along with single/multiple markers. It accepts both type of location:

  1. Latitude & Longitude
  2. 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

Demo Use Case
SFDCFacts owns a Car Rent company. They have many different cars which can be rented. Each car can be rented from many different locations across the country. A sales rep wants to see location of a car as soon as he clicks on that car. Let’s see how you can create a lightning component to help the sales rep with his requirements:

Component – LightningMapDemo.cmp



Controller – LightningMapDemoController.js



Helper – LightningMapDemoHelper.js



Apex Controller – LightningMapDemoController.apxc



Output

lightning:map component with multiple markers

SFDCFacts:

  • 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.

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 14 Comments

  1. Avatar

    Hi Manish,

    I tried only map functionality but I am getting an error on a load of the map.
    Error is = No COMPONENT named markup://lightning:map found

    1. Avatar

      Hi Sanjay,

      You need to create winter19 developer org in order to run this demo as this component works of api 44(winter19) or higher.

  2. Avatar

    Hi,
    I want to show only india Map.Were should i do changes?

    1. Avatar

      You can center map location to India and then disable zoom. This way you will only show India’s map.

  3. Avatar

    Hi,

    Is there a possibility to differentiate the locations by it’s color or different icon?
    For example, I have 5 addresses and within those 5 I need to mark one address in blue color (or any other color). Is this possible?

    1. Avatar

      Hi Krishna,
      It is not possible to use a different color or different icon for the marker, but it is possible to use a different icon for the right-hand side panel. To do that, set a different icon for each location array, in my example of this blog, you need to change icon name at line 26 of LightningMapDemoController.apxc file.

  4. Avatar

    Hi Manish,

    Do you if there is any limit on the number of mapmarkers shown on the page. Like using apex map we can’t show more than 10 markers.

    Thanks
    Bhisham

  5. Avatar

    Hi,

    Is there a posibility to click on the map to get the coordinates (lat/long) ??

    1. Avatar

      For now, its not possible. However you can use custom JavaScript library like leaflet to achieve it.

  6. Avatar

    Hi Manish,

    Is it possible to show a link to the directions with google maps when you click a marker?

  7. Avatar

    Hi Manish,
    Is it possible to hide the address details from the list,need to display only car name not its location.

  8. Avatar

    Hi Manish,

    Is it possible to show the directions between two locations? Or any javascript libraries that would help?

    Thanks

    1. Avatar

      Not with base lightning:map component. You can try leaflet JS library for the same.

  9. Avatar

    Hi Manish,

    I have a requirement to disable map for specific location(china) not for others, is it possible through coding. Please let know.

    Regards,
    Manoj

Leave a Reply

Close Menu