Below css not applying to my lwc map component. How to apply css to slds-coordinates?

I see it's working in aura. How to apply the same to lwc?

Scrollable Footer in lightning:map


        display: flex;
        flex-wrap: wrap;
        max-height: 41.25rem !important;
        max-width: 20rem !important;




    import { LightningElement } from 'lwc';
    export default class LightningExampleMapMultipleMarkers extends LightningElement {
        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: 'Sainte-Maxime',
                    Country: 'France',
                icon: 'custom:custom92',
                title: 'Sainte-Maxime',
        markersTitle = "Côte d'Azur";

@muenzpraeger any idea?

1 Answer 1


I've found that overriding CSS of standard components can only be done by uploading a CSS file as a Static Resource and then load the Static Resource in the component.

  • I didnt find documentation for this - can you pls put the link if there is documentation? if there is no documentation, this may break anytime in future releases Aug 23, 2019 at 3:24
  • To expand upon this a little bit, if @RavichandraSatti adds a custom CSS file for his component, because of the way different component's DOMs are isolated from one another, his parent company has no access to style the lightning-map component that is a child of his parent component. CSS on components is scoped to the component it is a part of.
    – nbrown
    Sep 14, 2020 at 12:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .