Map
Map Block
The Map block displays interactive Google Maps with markers, boundaries, and labels for your content. It can show
locations from the current page (if it's a template page), linked pages, or filtered content based on tags and filters.
The map supports custom marker styling, boundary visualization, click interactions, and integrates with filter blocks
for dynamic content filtering.
Overview
Use the Map block to:
- Display interactive maps with custom markers and boundaries
- Show locations from multiple content types (regions, listings, events, itineraries)
- Link to specific pages to display their locations on the map
- Filter content by tags, regions, and listing types
- Integrate with filter blocks for dynamic, real-time filtering
- Customize marker appearance, colors, and boundary styling
- Apply custom CSS classes to markers for advanced styling
Block Features & Options
Display Toggles:
- showRecordMarkers (default: true): Show markers for the current page's location
- showRecordBoundaries (default: true): Show boundaries for the current page
- showRecordLabels (default: false): Show labels for the current page
- showListingsMarkers (default: false): Show markers for linked listing page
- showListingsBoundaries (default: false): Show boundaries for linked listing page
- showListingsLabels (default: true): Show labels for linked listing page
- showRegionsMarkers (default: true): Show markers for linked region page
- showRegionsBoundaries (default: false): Show boundaries for linked region page
- showRegionsLabels (default: true): Show labels for linked region page
- showEventsMarkers (default: false): Show markers for linked event page
- showEventsBoundaries (default: false): Show boundaries for linked event page
- showEventsLabels (default: false): Show labels for linked event page
- showItinerariesMarkers (default: false): Show markers for linked itinerary page
- showItinerariesBoundaries (default: false): Show boundaries for linked itinerary page
- showItinerariesLabels (default: true): Show labels for linked itinerary page
Marker Styling Options:
- markerFillColor (default: "#EA4335"): Background color of markers
- markerStrokeColor (default: "#fff"): Border color of markers
- markerStrokeWeight (default: 1): Border thickness of markers
- markerWidth (default: 50): Width of markers in pixels
- markerHeight (default: 50): Height of markers in pixels
- markerUrl (default: ""): Custom image URL for markers
- markerAnchor (default: "0, 0"): Anchor point for custom markers (x, y coordinates in pixels)
- markerOrigin (default: "0, 0"): Origin point for custom markers (x, y coordinates in pixels)
- markerLabelOriginHeight (default: 0): Height offset for marker labels
- markerLabelClass (default: "itinerator-map-marker-label"): CSS class for marker labels
Boundary Styling Options:
- boundaryFillColor (default: "#222"): Fill color of boundaries
- boundaryFillOpacity (default: 0.3): Opacity of boundary fill
- boundaryStrokeColor (default: "#000"): Border color of boundaries
- boundaryStrokeOpacity (default: 1): Opacity of boundary borders
- boundaryStrokeWeight (default: 1): Border thickness of boundaries
Content & Filter Options:
- linkedPageId: Link to a specific page to show its locations
- linkedRegionPageId: Link to a region page to show its locations
- linkedEventPageId: Link to an event page to show its locations
- linkedItineraryPageId: Link to an itinerary page to show its locations
- listingType: Filter listings by main type (e.g., "apres_paddle", "accommodation")
- tagFilters: Array of tag filter objects with category, ID, and location type
- pageType: Automatically set to the current page type
- recordId: Automatically set to the current page's record ID
Layout Options:
- className: Custom CSS class for additional styling
- customTemplateName: Use a custom template for the map block
How it Works
The Map block uses Google Maps API to display interactive maps with the following data flow:
1. Data Sources: The block can display locations from:
- Current page (if it's a template page with location data)
- Linked pages (via linkedPageId, linkedRegionPageId, linkedEventPageId, linkedItineraryPageId)
- Tag-filtered content (via tagFilters with type-specific targeting)
- Listing type filtering (via listingType)
2. Display Logic: The block shows markers, boundaries, and labels based on the toggle settings for each content type
(Record, Listings, Regions, Events, Itineraries)
3. Interactive Features:
- Markers can be clicked to show info windows with location details
- Boundaries can be clicked to navigate to linked pages
- Map automatically adjusts zoom and center based on visible content
- Single marker displays are properly centered with appropriate zoom level
4. Tag Filter Integration: The map supports advanced tag filtering with type-specific targeting:
- Type-Specific Tag Filters: Apply tag filters to specific location types (listings, regions, events, itineraries)
- Global Tag Filters: Apply tag filters to all location types
- Mixed Filtering: Combine global and type-specific filters for precise control
- API Integration: Filters are passed to the Rails API with proper parameter formatting
- Fallback Logic: Type-specific filters override global filters for that specific type
5. Filter Block Integration: The map integrates with filter blocks for dynamic filtering:
- Region Filters: Fetches locations from the selected region
- Tag Filters: Filters locations by selected tags
- Listing Type Filters: Filters locations by listing main type
- Map automatically re-fetches and re-renders when filters change
- Filter options are intelligently enabled/disabled based on available map data
6. Styling & CSS Classes: Markers and labels receive automatic CSS classes for advanced styling:
- Marker containers: itin-marker-container + type-specific classes
- Main type classes: itin-marker-{main_type} (e.g., itin-marker-apres-paddle)
- Location type classes: itin-marker-type-{type} (e.g., itin-marker-type-listing)
- Region slug classes: Region slug as a class (e.g., vancouver-island)
- Data attributes: data-main-type, data-location-id, data-location-type, data-location-name, data-location-slug,
data-region-slug
- Custom marker and boundary appearance can be configured through the styling options
How to Add & Configure
1. Open the block editor on any page or post
2. Click the + button to add a new block
3. Search for "Map" in the block inserter
4. Select "Itinerator Map" from the results
5. Configure settings in the block sidebar:
- Display Options: Toggle markers, boundaries, and labels for different content types (Listings, Regions, Events,
Itineraries)
- Marker Styling: Customize marker appearance, colors, and sizes
- Boundary Styling: Customize boundary appearance and colors
- Linked Pages: Select specific pages to display their locations (Listings, Regions, Events, Itineraries)
- Listing Type Filter: Filter listings by main type
- Tag Filters: Configure type-specific tag filtering for precise content control
Filter Integration
The Map block integrates seamlessly with filter blocks to provide dynamic, real-time filtering:
Setting Up Filters
1. Add Filter Blocks to your page (region, tag-category, or listing-type)
2. Add the Map Block to display locations
3. Filters automatically work together - changing a filter will update the map
How Filters Work with Maps
- Region Filter: Map fetches locations only from the selected region
- Tag Filter: Map displays only locations with the selected tag
- Listing Type Filter: Map shows only listings of the selected type
- Multiple Filters: All active filters work together to refine results
- URL Parameters: Filter selections are saved in the URL for sharing
Filter Option Management
- Map-only pages: All filter options remain enabled
- Mixed content pages: Filter options are enabled/disabled based on both searchable items and map markers
- Tag filters: Work with searchable items only (map markers don't include tag data)
- Region/Listing Type filters: Consider both searchable items and map markers
Tag Filter Configuration
The Map block includes advanced tag filtering capabilities that allow you to apply tag filters to specific location
types:
Setting Up Tag Filters
1. Add Tag Filters: In the block sidebar, scroll to the "Tag Filters" section
2. Configure Each Filter:
- Tag Category: Select the tag category (e.g., "Activities", "Amenities")
- Tag Name: Choose the specific tag from that category
- Apply to Location Type: Choose which location types this filter affects:
- Apply to All Locations: Filter affects all location types (listings, regions, events, itineraries)
- Listings Only: Filter affects only listing locations
- Regions Only: Filter affects only region locations
- Events Only: Filter affects only event locations
- Itineraries Only: Filter affects only itinerary locations
Tag Filter Examples
Example 1: Global Filtering
- Add a tag filter for "Hiking" set to "Apply to All Locations"
- This will show only locations tagged with "Hiking" across all content types
Example 2: Type-Specific Filtering
- Add a tag filter for "Accommodation" set to "Listings Only"
- Add another tag filter for "Trails" set to "Itineraries Only"
- This will show accommodation listings and trail itineraries separately
Example 3: Mixed Filtering
- Add a global tag filter for "Family-Friendly" (affects all types)
- Add a specific tag filter for "Luxury" set to "Listings Only"
- This will show family-friendly content across all types, but only luxury listings
API Integration
Tag filters are automatically converted to the appropriate API parameters:
- Global tags: Sent as tagIds=1,2,3
- Type-specific tags: Sent as filter[listing_tag_ids]=1,2, filter[event_tag_ids]=3,4, etc.
- Fallback logic: Type-specific filters override global filters for that specific type
Shortcode Usage
Basic Shortcode
[tourismo-map show_record_markers="true" show_record_boundaries="true" show_regions_markers="true"]
Shortcode with Events and Itineraries
[tourismo-map
show_listings_markers="true"
show_events_markers="true"
show_itineraries_markers="true"
linked_event_page_id="123"
linked_itinerary_page_id="456"]
Shortcode with Listing Type Filter
[tourismo-map show_listings_markers="true" listing_type="apres_paddle"]
Shortcode with Tag Filters
[tourismo-map
show_listings_markers="true"
show_itineraries_markers="true"
tag_filters='[{"category":"activities","id":"123","locationType":"all"}]']
Shortcode with Type-Specific Tag Filters
[tourismo-map
show_listings_markers="true"
show_events_markers="true"
tag_filters='[
{"category":"activities","id":"123","locationType":"listing"},
{"category":"amenities","id":"456","locationType":"event"}
]']
Shortcode with Custom Marker Styling
[tourismo-map
marker_url="https://example.com/custom-marker.png"
marker_width="64"
marker_height="64"
marker_anchor="32,64"
marker_origin="0,0"]
Note: marker_anchor and marker_origin use comma-separated coordinates (e.g., "25,50") not array notation. The format is
"x,y" where x and y are pixel values.
Shortcode Options
| Attribute | Type | Default | Description |
|----------------------------|----------|---------|------------------------------------------------| |
show_record_markers | boolean | true | Show markers for current page location | | show_record_boundaries | boolean |
true | Show boundaries for current page | | show_record_labels | boolean | false | Show labels for current page | |
show_listings_markers | boolean | false | Show markers for linked listing page | | show_listings_boundaries | boolean |
false | Show boundaries for linked listing page | | show_listings_labels | boolean | true | Show labels for linked
listing page | | show_regions_markers | boolean | true | Show markers for linked region page | | show_regions_boundaries
| boolean | false | Show boundaries for linked region page | | show_regions_labels | boolean | true | Show labels for
linked region page | | show_events_markers | boolean | false | Show markers for linked event page | |
show_events_boundaries | boolean | false | Show boundaries for linked event page | | show_events_labels | boolean |
false | Show labels for linked event page | | show_itineraries_markers | boolean | false | Show markers for linked
itinerary page | | show_itineraries_boundaries| boolean | false | Show boundaries for linked itinerary page | |
show_itineraries_labels | boolean | true | Show labels for linked itinerary page | | marker_fill_color | string |
#EA4335 | Background color of markers | | marker_stroke_color | string | #fff | Border color of markers | |
marker_stroke_weight | number | 1 | Border thickness of markers | | marker_width | number | 50 | Width of markers in
pixels | | marker_height | number | 50 | Height of markers in pixels | | marker_url | string | "" | Custom image URL for
markers | | marker_anchor | string | "0,0" | Anchor point for custom markers (comma-separated x,y coordinates, e.g.,
"25,50") | | marker_origin | string | "0,0" | Origin point for custom markers (comma-separated x,y coordinates, e.g.,
"0,0") | | marker_label_origin_height | number | 0 | Height offset for marker labels | | marker_label_class | string |
"itinerator-map-marker-label" | CSS class for marker labels | | boundary_fill_color | string | #222 | Fill color of
boundaries | | boundary_fill_opacity | number | 0.3 | Opacity of boundary fill | | boundary_stroke_color | string | #000
| Border color of boundaries | | boundary_stroke_opacity | number | 1 | Opacity of boundary borders | |
boundary_stroke_weight | number | 1 | Border thickness of boundaries | | linked_page_id | string | "" | Link to a
specific page to show its locations | | linked_region_page_id | string | "" | Link to a region page to show its
locations | | linked_event_page_id | string | "" | Link to an event page to show its locations | |
linked_itinerary_page_id | string | "" | Link to an itinerary page to show its locations| | listing_type | string | "" |
Filter listings by main type | | tag_filters | array | [] | Array of tag filter objects with category, ID, and location
type | | class_name | string | "" | Custom CSS class | | custom_template_name | string | "" | Use a custom template for
the map block |
Content Displayed
- Interactive Google Map: Full-featured map with zoom, pan, and street view
- Custom Markers: Styled markers for locations with optional labels and CSS classes
- Boundaries: Geographic boundaries (polygons) for regions or areas
- Info Windows: Click markers to see location details including:
- Location name and description
- Hero image
- Address (if available)
- Related itineraries (for events and other content)
- Link to full details page
- Linked Navigation: Click boundaries to navigate to linked pages
- Dynamic Filtering: Real-time map updates based on filter selections
Typical Usage
- Template Pages: Show the current resource's location with custom styling
- Collection Pages: Display multiple locations with filtering options
- Region Pages: Show region boundaries and contained locations
- Business Directories: Display business locations with custom markers and type filtering
- Event Maps: Show event locations with linked event pages
- Itinerary Maps: Display trail locations and routes
- Filtered Maps: Combine with filter blocks for dynamic, user-controlled filtering
Advanced Styling with CSS Classes
All map markers automatically receive CSS classes based on their data, enabling powerful styling options:
Example: Style Markers by Type
/* Target all accommodation listings */
.itin-marker-accommodation {
opacity: 0.8;
}
/* Target all après paddle listings */
.itin-marker-apres-paddle path {
fill: #FFC107 !important;
}
/* Target markers in a specific region */
.vancouver-island path {
stroke: #2196F3 !important;
}
/* Target listing type markers */
.itin-marker-type-listing {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
Available CSS Selectors
- .itin-marker-container - All marker containers
- .itin-marker-{main_type} - Specific listing types (e.g., .itin-marker-accommodation)
- .itin-marker-type-{type} - Content types (.itin-marker-type-listing, .itin-marker-type-event)
- .{region-slug} - Region-based targeting (e.g., .vancouver-island)
- [data-main-type="..."] - Data attribute selectors
- [data-region-slug="..."] - Region-based data selectors
Related Blocks
- Filter – Add dynamic filtering controls for maps and content
- Title – Display page titles and headers
- Description – Show descriptive content
- Content – Display rich content areas
- Listings – Display listing collections
- Regions – Display region collections
- Events – Display event collections
- Itineraries – Display itinerary collections