Standard lightning:map Component

0
603

Salesforce has introduced new Lightning:map standard component in Winter’19 release. We are writing this post to show how can we use this component instead of using any complex solutions for integrating Google Maps in Salesforce Lightning Experience.

Component Type: Standard Component

First Release: Winter’19

Syntax: < lightning:map />

Attributes: lightning:map
mapMarkers="[address elements or lat-lon]*"
center="[location]"
zoomLevel="[INTEGER VALUE]"
markersTitle="[String literal]"
showFooter="[TRUE|FALSE]" >

</lightning:map >

  1. mapMarkers are the array of map locations, provide either latitude and longitude coordinates or address elements(City, Country, PostalCode, State, and Street). If you specify both in a single marker, latitude, and longitude get precedence.
  2. markersTitle Title of the map
  3. center location for map center
  4. zoomLevel  Zoom levels defined in Google Maps API.
  5. showFooter shows the currently selected location to ‘Open in Google Maps’ link.

Description: A lightning:map component securely displays a map of one or more locations. This component requires API version 44.0 and later.

Q. Why to use <lightning:map> component?

Reason: lightning-map component securely displays a map of one or more locations.

Demo:

Code:

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="map_markers" type="object[]"/>
    <aura:attribute name="map_markersCoordinates" type="object[]"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="isOpen2" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.myAction}" />
    <div class="container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="12" class="center">
                <strong>Lightning Map Component Showcase</strong>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <lightning:button onclick="{!c.openModel2}">Open Map with Single Address</lightning:button>
                <lightning:button onclick="{!c.openModel}">Open Maps with Mutiple Addresses</lightning:button>
                <aura:if isTrue="{!v.isOpen}">
                    <!-- MULTIPLE MAP WITH FOOTER -->
                    <lightning:map mapMarkers ="{!v.map_markers}" 
                                   markersTitle="Lightning *MultiAddress MAP 🗺* Component Showcase by BierNuage.com"
                                   showFooter="true"
                                   onclick="{! c.closeModel2 }"
                                   class="border"
                                   
                                   />
                </aura:if>
                <aura:if isTrue="{!v.isOpen2}">
                    <!-- SINGLE MAP -->
                    <lightning:map mapMarkers ="{!v.map_markersCoordinates}" 
                                   markersTitle="Lightning *Single MAP 🗺* Component Showcase by BierNuage.com"
                                   onclick="{! c.closeModel2 }"
                                   class="border"
                                   style="width:70%"
                                   /> 
                </aura:if>
            </lightning:layoutItem >
            <lightning:layoutItem flexibility="auto" padding="around-small" size="12" class="center">
                <img src ="https://biernuage.com/wp-content/uploads/2018/08/logo_transparent_background-743x1024.png" style="max-height:200px"/>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>
({
    myAction : function(component, event, helper) {
        var map_markers = [
            {
                location: {
                    // Location Information
                    City: 'Melbourne',
                    Country: 'Australia',
                    PostalCode: '3000',
                    State: 'VIC',
                    Street: '201 Spencer St',
                },
                
                // Extra info for tile in sidebar %26 infoWindow
                icon: 'utility:food_and_drink',
                title: 'Liquorland Melbourne Spencer St', // e.g. Account.Name
                description: 'Spencer Outlet Centre'
            },
            {
                location: {
                    // Location Information
                    City: 'Melbourne',
                    Country: 'Australia',
                    PostalCode: '3000',
                    State: 'VIC',
                    Street: '621 Lonsdale St',
                },
                
                // Extra info for tile in sidebar
                icon: 'utility:animal_and_nature',
                title: 'The Bottle-O Lonsdale Cellars', // e.g. Account.Name
            },
            {
                location: {
                    // Location Information
                    City: 'Melbourne',
                    Country: 'Australia',
                    PostalCode: '3000',
                    State: 'VIC',
                    Street: '1 Lonsdale St, Queen Victoria',
                },
                
                // Extra info for tile in sidebar
                icon: 'utility:einstein',
                title: 'Dan Murphy\'s',
                description: '<img src="https://biernuage.com/wp-content/uploads/2018/08/logo_transparent_background-743x1024.png" style="max-height: 80px; padding: 5px;float: left;"><br/><b>Best Blog Post Guarantee*</b><br/><p style="text-align:justify">We beat all my competitors every month, every week, every day, every hour, on every price, on every product, on every post..." - Bier Nuage</p>'
            }
            
            
        ];
        component.set('v.map_markers',map_markers);
        var map_markersCoordinates = [
            {
                location : {
                    'Latitude': '37.790197',
                    'Longitude': '-122.396879'
                },
                icon: 'utility:animal_and_nature',
                title: 'BierNuage.com',
                description: '<img src="https://biernuage.com/wp-content/uploads/2018/08/logo_transparent_background-743x1024.png" style="max-height: 80px; padding: 5px;float: left;"><br/><b>Best Blog Post Guarantee*</b><br/><p style="text-align:justify">We beat all my competitors every month, every week, every day, every hour, on every price, on every product, on every post..." - Bier Nuage</p>'
            }
        ];
        component.set('v.map_markersCoordinates',map_markersCoordinates);
        
    },
    
    openModel: function(component, event, helper) {
        // for Display Model,set the "isOpen" attribute to "true"
        component.set("v.isOpen", true);
        component.set("v.isOpen2", false);
        
    },
    
    openModel2: function(component, event, helper) {
        // for Display Model,set the "isOpen" attribute to "true"
        component.set("v.isOpen2", true);
        component.set("v.isOpen", false);
        
    },
)}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.