+ Start a Discussion
prasanth sfdcprasanth sfdc 

Lightning:map tag not showing all addresses on map

I am trying to display 100 locations address from cutom object to Lightning:map tag, its showing only first 11 addresses plotting on the map.  Is there any limitation for this lightning:map tag ?

Please help to solve this. 

I have followed this link to create component. 
http://sfdcmonkey.com/2018/09/16/mark-locations-google-map-salesforce-lightning/User-added image
Best Answer chosen by prasanth sfdc
Vikash GoyalVikash Goyal
Hi Prasanth,

Yes, there is a limitation with lightning:map tag. You can specify a maximum of 10 geocoded address lookups per map while if you use longitude and latitude pair for addresses then you can draw 100 markers or more.

So if you are using following format i.e. address format to prepare list of markers for attribute 'mapMarkers' then it will be limited to 10 :
[{
    location: {
        City: 'San Francisco',
        Country: 'USA',
        PostalCode: '94105',
        State: 'CA',
        Street: 'The Landmark @ One Market, Suite 300'
    },
    title: 'The Landmark Building',
    description: 'The Landmark is considered to be one of the city's most architecturally distinct and historic properties',
    icon: 'standard:account'
}]
To display more markers you should use following format :
{
    Latitude: '37.790197',
    Longitude: '-122.396879'
}

For more details please refer the documentation :
https://developer.salesforce.com/docs/component-library/bundle/lightning:map/documentation

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks

All Answers

Vikash GoyalVikash Goyal
Hi Prasanth,

Yes, there is a limitation with lightning:map tag. You can specify a maximum of 10 geocoded address lookups per map while if you use longitude and latitude pair for addresses then you can draw 100 markers or more.

So if you are using following format i.e. address format to prepare list of markers for attribute 'mapMarkers' then it will be limited to 10 :
[{
    location: {
        City: 'San Francisco',
        Country: 'USA',
        PostalCode: '94105',
        State: 'CA',
        Street: 'The Landmark @ One Market, Suite 300'
    },
    title: 'The Landmark Building',
    description: 'The Landmark is considered to be one of the city's most architecturally distinct and historic properties',
    icon: 'standard:account'
}]
To display more markers you should use following format :
{
    Latitude: '37.790197',
    Longitude: '-122.396879'
}

For more details please refer the documentation :
https://developer.salesforce.com/docs/component-library/bundle/lightning:map/documentation

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks
This was selected as the best answer
Ajay K DubediAjay K Dubedi
Hi Prasanth,

I have understood your problem and got a solution for you.
There are no limits in showing map locations.
I have gone through this link also-
http://sfdcmonkey.com/2018/09/16/mark-locations-google-map-salesforce-lightning/
But the solution available there is for only one location.
You should check this link also.you will get the complete documentation with codes by this link.
For multiple locations, the solution also available there.

https://developer.salesforce.com/docs/component-library/bundle/lightning:map/example
Component -----

<aura:component>
    <!-- attributes -->
    <aura:attribute name="mapMarkers" type="Object"/>
    <aura:attribute name="markersTitle" type="String" />

    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <!-- the map component -->
    <lightning:map 
        mapMarkers="{! v.mapMarkers }"
        markersTitle="{!v.markersTitle}" />
</aura:component>


JS Controller -----

({
    init: function (cmp, event, helper) {
        cmp.set('v.mapMarkers', [
            {
                location: {
                    City: 'Cap-d\'Ail',
                    Country: 'France'
                },

                icon: 'custom:custom26',
                title: 'Cap-d\'Ail'
            },
            {
                location: {
                    City: 'Beaulieu-sur-Mer',
                    Country: 'France'
                },

                icon: 'custom:custom96',
                title: 'Beaulieu-sur-Mer'
            },
            {
                location: {
                    City: 'Saint-Jean-Cap-Ferrat',
                    Country: 'France'
                },

                title: 'Saint-Jean-Cap-Ferrat'
            },
            {
                location: {
                    City: 'Villefranche-sur-Mer',
                    Country: 'France'
                },

                icon: 'custom:custom92',
                title: 'Villefranche-sur-Mer'
            },
            {
                location: {
                    City: 'Antibes',
                    Country: 'France'
                },

                icon: 'custom:custom61',
                title: 'Antibes'
            },
            {
                location: {
                    City: 'Juan-les-Pins',
                    Country: 'France'
                },

                icon: 'custom:custom74',
                title: 'Juan-les-Pins'
            },
            {
                location: {
                    City: 'Cannes',
                    Country: 'France'
                },

                icon: 'custom:custom3',
                title: 'Cannes'
            },
            {
                location: {
                    City: 'Saint-Raphaël',
                    Country: 'France'
                },

                icon: 'custom:custom54',
                title: 'Saint-Raphaël'
            },
            {
                location: {
                    City: 'Fréjus',
                    Country: 'France'
                },

                icon: 'custom:custom88',
                title: 'Fréjus'
            },
            {
                location: {
                    City: 'Sainte-Maxime',
                    Country: 'France'
                },

                icon: 'custom:custom92',
                title: 'Sainte-Maxime'
            }
        ]);
        cmp.set('v.markersTitle', 'Côte d\'Azur');
    }
});

If you still have more queries, feel free to ask.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
prasanth sfdcprasanth sfdc
Hi Vikash Goyal,
  Thank you so much... 
prasanth sfdcprasanth sfdc
Hi friends,
   Could u please help me to solve this problem related lightning  map tag. not able to get the users clicked location name n JS controller. 

https://developer.salesforce.com/forums#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Lightning&criteria=OPENQUESTIONS&id=9062I000000XnQCQA0