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

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