docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Contact with map

Contact with map ​

Combines Contact and Map: contacts and CTA beside the map iframe.

Contact with map

Информация

Requires PageBuilder Pro.

Why combine contacts and map ​

  • Phone, email, and map in one viewport
  • Fewer sections than Contact + Map separately
  • One chunk for a standard contact page

Where to place ​

  • Contact page: full block
  • Landing footer with address
  • Branch page

Page examples ​

Contacts and map point ​

Fill contact fields and Location on the map. One block instead of two sections.

Similar sections ​

Block parameters ​

ParameterValue
keycontact_map
LayerPro
Categoryconversion (conversion)
Chunkpagebuilderpro_contact_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.

Text (text) ​

Type textarea. Optional.

Phone (phone) ​

Type text. Optional.

Email (email) ​

Type text. Optional.

Map (location) ​

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

Button label (button_label) ​

Type text. Optional.

Button URL (button_url) ​

Type url. Optional.

Site output ​

pb-contact-map: contacts + map iframe.

Section data ​

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

json
{
  "title": "Section title",
  "text": "Supporting text under the title.",
  "phone": "+7 (999) 123-45-67",
  "email": "hello@example.com",
  "location": {
    "lat": 55.751244,
    "lng": 37.618423,
    "embed_url": "https://yandex.ru/map-widget/v1/..."
  },
  "button_label": "Learn more",
  "button_url": "https://example.com/action"
}

Chunk template ​

Fenom chunk pagebuilderpro_contact_map:

fenom
<section class="pb-section pb-section--contact-map pb-contact-map{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="contact_map"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-contact-map__inner">
    {if $title}
      <h2 class="pb-heading pb-contact-map__title">{$title|escape}</h2>
    {/if}
    <div class="pb-contact-map__layout">
      <div class="pb-contact-map__details">
        {if $text}
          <p class="pb-contact-map__text">{$text|escape}</p>
        {/if}
        {if $phone}
          <p class="pb-contact-map__phone"><a href="tel:{$phone|escape:'url'}">{$phone|escape}</a></p>
        {/if}
        {if $email}
          <p class="pb-contact-map__email"><a href="mailto:{$email|escape:'url'}">{$email|escape}</a></p>
        {/if}
        {if $button_label && $button_url}
          <a class="pb-contact-map__button pb-button" href="{$button_url|pb_href|escape}">{$button_label|escape}</a>
        {/if}
      </div>
      {if $map_embed_url}
        <div class="pb-contact-map__map">
          <iframe
            class="pb-contact-map__frame"
            title="{$title|default:'Map'|escape}"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            src="{$map_embed_url|escape}"
          ></iframe>
        </div>
      {/if}
    </div>
  </div>
</section>

See also ​