My first map block for the Mobirise Website builder.

Project Download:

https://www.dropbox.com/s/9ey4lu9kfwy6ma4/project.mobirise?dl=1

HTML Code Snippet:

<section class="map1" group="Maps">
    <mbr-parameters>   
    <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="map" title="Map" name="googleMap">   
    <!-- End block parameters -->
    </mbr-parameters> 
    <div class="google-map" mbr-map="googleMap" style="-webkit-filter: grayscale(30%);
filter: grayscale(30%);">
    </div>
</section>

CSS Code Snippet:

.google-map {
  height: 25rem;
  position: relative;
  iframe {
    height: 100%;
    width: 100%;
  }
  [data-state-details] {
    color: #6b6763;
    font-family: Montserrat;
    height: 1.5em;
    margin-top: -0.75em;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
  }
  &[data-state] {
    background: #e9e5dc;
  }
  &[data-state="loading"] {
    [data-state-details] {
      display: none;
    }
    &::after {
    }
  }
}