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


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


lightning:map component with multiple markers


  • 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 Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 15 Comments

  1. 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. 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. Hi,
    I want to show only india Map.Were should i do changes?

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

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


  5. Hi,

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

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

  6. Hi Manish,

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

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

  8. Hi Manish,

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


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

  9. Hi Manish,

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


  10. Hi Manish,

    I have tried implementing the same, It does destroy the div component. but not creating a new component for lightning:map.

    Can you please help me with the same?


    getMarkers : function(component, event, helper) {
    var action = component.get(‘c.getJobMarkers’);
    action.setCallback(this, function (response) {
    var state = response.getState();

    if (state === “SUCCESS”) {
    var data = response.getReturnValue();

    new Promise(function(resolve, reject){

    var mapComponent = component.find(‘mapComponent’);

    var mapContainer = component.find(‘mapContainer’);
    mapContainer.set(“v.body”, []);
    var mapBody = mapContainer.get(“v.body”);

    “aura:id” : ‘mapComponent’,
    “mapMarkers” : data,
    “zoomLevel” : 4,
    “markersTitle” : ‘Jobs marked on map’,
    “showFooter” : ‘false’
    mapContainer.set(“v.body”, mapBody);

Leave a Reply

Close Menu