docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Map

Map ​

A map pin from coordinates or address. MapEmbedResolver builds the iframe; default provider is Yandex Maps.

Map

Информация

Requires PageBuilder Pro.

Standalone map ​

  • Coordinates in map field, resolver builds iframe
  • Yandex Maps by default, provider swappable in package code
  • Separate from contact copy

Scenarios ​

  • Contacts: office or showroom
  • Delivery: coverage anchor point
  • Event: venue

Page examples ​

Map point ​

Location map field: coordinates and zoom. Section title is optional.

Similar sections ​

Block parameters ​

ParameterValue
keymap
LayerPro
Categorymedia (media)
Chunkpagebuilderpro_map
Requirespro

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Optional.

Map (location) ​

Type map. Required. Map pin. Site output is iframe via MapEmbedResolver.

Site output ​

Iframe inside pb-map.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "location": {
    "lat": 55.751244,
    "lng": 37.618423,
    "embed_url": "https://yandex.ru/map-widget/v1/..."
  }
}

Chunk template ​

Fenom chunk pagebuilderpro_map:

fenom
<section class="pb-section pb-section--map pb-map{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="map"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-map__inner">
    {if $title}
      <h2 class="pb-heading pb-map__title">{$title|escape}</h2>
    {/if}
    {if $map_embed_url}
      <div class="pb-map__embed">
        <iframe
          class="pb-map__frame"
          title="{$title|default:'Map'|escape}"
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"
          src="{$map_embed_url|escape}"
        ></iframe>
      </div>
    {elseif $map_watch_url}
      <p><a class="pb-button" href="{$map_watch_url|escape}">{'pagebuilder_fe_map_open' | lexicon}</a></p>
    {/if}
  </div>
</section>

See also ​