Map

<!-- Basic Salla Map component Usage -->
<salla-map
  api-key="gPAnYXyivuAtzOiE2tYXGpaxxxx"
  theme="light"
  searchable="false">
</salla-map>

<!-- Using the readonly attribute in the Single Order Page -->
<salla-map
  api-key="gPAnYXyivuAtzOiE2tYXGpaxxxx"
  theme="light"
  readonly="false">
</salla-map>

This JS web component can be targeted for styling by its .s-map-modal-wrapper class. Following is a complete source code for customizing this component:

.s-map-wrapper {
  .s-map-location-button {
    .s-map-location-icon {
      margin-right: 10px;
    }
  }
}
.s-map-modal-wrapper {
  .s-map-modal-body {
    padding: 0;
  }

  .s-map-title {
    position: relative;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .s-map-modal-body {
    overflow: hidden;
    position: relative;
    .s-map-element {
      height: 400px;
      width: 100%;
    }
    .s-map-search-wrapper {
      position: absolute;
      top: 0px;
      z-index: 11;
      z-index: 1;
      margin: 20px;
      width: -webkit-fill-available;
      input {
        width: 100%;
        height: 40px;
        padding: 10px;
      }
      .s-map-search-results {
        height: 100px;
        padding: 10px;
        margin-top: 1px;
        display: flex;
        flex-direction: column;
      }
    }
    .s-loading-container {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 5rem;
    }
    .s-map-my-location-icon {
      position: absolute;
      bottom: 1.5rem;
      margin: 10px;
    }
  }
}