+ Start a Discussion
Bogdan PascuBogdan Pascu 

Lightning map component(view in full screen, open in google map)

Hello everyone

I have implemented the below lightning map compomnent in our org. The map id displayed properly but some options are not working. 

I have in the footer the button open in google map but it is not working. There is also a button to display the map in full screen the same is not working.  Also I would like to make the Satelite option as a default instead of the map. 

Any help from you would be appreciated. 

This is how my map is being displayed at the moment: 
User-added image
​​​​​​​

Here is the component: 
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
                access="global">

    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="dsRecordId" type="Id" />
    <aura:attribute name="sObject" type="SObject" />
    <aura:attribute name="titleField" type="String" default="Name" />
    <aura:attribute name="latField" type="String" default="pba__Latitude_pb__c" />
    <aura:attribute name="longField" type="String" default="pba__Longitude_pb__c" />
    <aura:attribute name="title" type="String" />
    <aura:attribute name="fields" type="String[]" default="['Id']" />
    <aura:attribute name="mapMarkers" type="Object[]" />
    <aura:attribute name="zoomLevel" type="Integer" default="16" />
    <aura:attribute name="showFooter" type="Boolean" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <force:recordData aura:id="service" 
                         recordId="{!v.dsRecordId}" 
                         targetFields="{!v.sObject}" 
                         fields="{!v.fields}"
                         recordUpdated="{!c.onRecordUpdated}" />
    
    <aura:handler event="ltng:selectSObject" action="{!c.recordChangeHandler}" />
    
    <lightning:card title="{!v.title}" iconName="custom:custom106">
        <lightning:buttonIcon onclick="{!c.fullScreen}" size="large" iconName="utility:expand" />
        <lightning:map 
                       mapMarkers="{!v.mapMarkers}" 
                       zoomLevel="{!v.zoomLevel}" />
        <footer class="slds-modal__footer">
        <button class="slds-button slds-button_brand">Open in Google Maps</button>
      </footer>
    </lightning:card>  

</aura:component>



here is the controller:
({
    doInit : function(component, event, helper) {
        component.set("v.fields", ["Id", component.get("v.latField"), component.get("v.longField"), component.get("v.titleField")]);
        var recordId = component.get("v.recordId");
        component.set("v.dsRecordId", recordId);
        helper.reloadRecord(component);
	},

  	recordChangeHandler : function(component, event, helper) {
        console.log('recordChangeHandler');
        var id = event.getParam("recordId");
        component.set("v.dsRecordId", id);
        helper.reloadRecord(component);
	},
    
    fullScreen : function(component) {
        component.set("v.fullScreen", true);
    
    },
    
    closeDialog : function(component) {
        component.set("v.fullScreen", false);
    
    },    

  	onRecordUpdated : function(component, event) {
        console.log('onRecordUpdated');
        var sObject = component.get("v.sObject");
        if (sObject) {
	        component.set("v.title", sObject[component.get("v.titleField")]);
            component.set("v.mapMarkers", [
                {
                    location: {
                        Latitude: sObject[component.get("v.latField")],
                        Longitude: sObject[component.get("v.longField")]
                    }
                }
            ]);
        }
    }
})

helper:
({
    reloadRecord : function(component) {
        var service = component.find("service");
        service.reloadRecord(false, function() {
            var sObject = component.get("v.sObject");
            component.set("v.mapMarkers", [
                {
                    location: {
                        Latitude: sObject[component.get("v.latField")],
                        Longitude: sObject[component.get("v.longField")]
                    }
                }
            ]);
        });
	}

})