1

I created an Account Locator application similar to the one found in the Trailhead example. I altered min slightly as I am using a custom object instead of the account object.

I was able to successfully create the Account Search, and List, with successful queries showing for the Search and the return list.

My issue is that the map appears on the right, but it doesn't show the markers, nor does it show the list to the right of it. Any help in understanding what I might have missed? I have included sample code for the Map component and controller below:

<aura:component>
    <aura:handler event="c:AccountsLoaded" action="{!c.onAccountsLoaded}"/>
    <aura:attribute name="mapMarkers" type="Map[]"/>
    <lightning:card title="Retail Account Map" iconName="action:map">
        <lightning:map mapMarkers="{!v.mapMarkers}"

                center="{! v.center }"
                zoomLevel="{! v.zoomLevel }"
                markersTitle="{! v.markersTitle }"
                showFooter="{ !v.showFooter }">
        </lightning:map>
    </lightning:card>
</aura:component>

Controller I used is:

({
    onAccountsLoaded: function( component, event, helper ) {
        var mapMarkers = [];
        var accounts = event.getParam( 'accounts' );
        for ( var i = 0; i < accounts.length; i++ ) {
            var retail_account__c = accounts[i];
            var marker = {
                'location': {
                    'Street': retail_account__c.address__c,
                    'City': retail_account__c.City__c,
                    'PostalCode': account__c.Zip_Code__c
                },
                'title': retail_account__c.Name,
                'description': (
                    'Phone: ' + retail_account__c.Phone__c +
                    '<br/>' +
                    'Website: ' + account.Website
                ),
                'icon': 'standard:location'
            };
            mapMarkers.push( marker );
        }
        component.set( 'v.mapMarkers', mapMarkers );
    }
})

The Accounts Loaded Event is:

<aura:event type="APPLICATION">
    <aura:attribute name="accounts" type="Retail_Account__c[]"/>
</aura:event>
  • I figured out how to get the map to at least render by updating the <br/> tag found in the controller above. So, when I perform a search and get return results (limit 5), the records appear in the list as well as in the map list. But, only one marker is displayed for the first item in the list. How can I get all of the items in the list to show on the map with marker? – RMC Sep 30 '19 at 1:01
  • I don't see any error in your code. Are you sure, you are getting more than one Account in this event.getParam( 'accounts' )? – Saroj Bera Sep 30 '19 at 8:26
  • Yes. I have the limit set to 5. So each time there are 5 records that appear in both lists. – RMC Oct 1 '19 at 10:32
  • What I did notice, after reading through the Google maps documentation, is that the more info I put in my search string the more pins appear. For example, if i search by zip code only, I'll get 5 items returned in the list but only one pin placed in the center of the map. That's exactly what the documentation says should happen. But if i enter the street name, city with a , at the end, I get 5 pins, unless street name is very common. So seems to be more map behavior. – RMC Oct 1 '19 at 10:40
  • Glad you found the issue. You can post your findings as an answer for benefit of others. – Saroj Bera Oct 1 '19 at 10:46
0

The solution to this particular issue was the search strings. This drives the bahavior of the maps. If you search by zip code alone, Google will place a pin in the center of that zip code area but will return list items. Same is true if you enter just city or state.

However, a combination of those entries tends to populate the map with multiple pins. I hope this helps anyone else who experienced similar difficulty.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.