You need to sign in to do that
Don't have an account?
Bogdan 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:
Here is the component:
here is the controller:
helper:
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:
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")] } } ]); }); } })