The Maps component is used on certain vertical search pages to display a map alongside your results. The component can be configured with specific settings for the Map itself (including the provider) as well as with specific settings for things like the height of the results container.

Map Config

To enable a map on a vertical page, you'll need to add a mapConfig to the vertical in verticalsToConfig.

"verticalsToConfig": {
  "Locations": {
    "cardType": "location-standard",
    "mapConfig": {
      "mapProvider": "MapBox",
      "apiKey": "<your-api-key>"
    }
  }
}

Map Providers

The Hitchhikers Theme supports the following map providers: Mapbox and Google.

To use Mapbox, set the mapProvider to "MapBox" and include your Mapbox API key:

"mapConfig": {
  "mapProvider": "MapBox",
  "apiKey": "<mapbox-api-key>"
}

To use Google Maps, set the mapProvider to "Google" and include your Google Maps API key:

"mapConfig": {
  "mapProvider": "Google",
  "apiKey": "<google-maps-api-key>"
}

Map Height, Card Height, and Results Container Width

You can control the dimensions of the map and results container via SCSS variables in answers.scss:

$answers-map-height: 100vh; // height of the map
$answers-card-height: 200px; // height of each result card in the sidebar
$answers-results-width: 40%; // width of the results container

Default Initial Search

You can configure the map to run a default initial search by enabling defaultInitialSearch in your config.json:

{
  "defaultInitialSearch": "locations near me"
}

No Results

When a vertical returns no results, you can control whether the map remains visible and whether all results are displayed:

"mapConfig": {
  "mapProvider": "MapBox",
  "noResults": {
    "visible": true,
    "displayAllResults": true
  }
}

enablePinClustering

Pin clustering groups nearby pins together into a single cluster pin when zoomed out. To enable pin clustering, add enablePinClustering to the mapConfig:

"mapConfig": {
  "mapProvider": "MapBox",
  "enablePinClustering": true
}

disableSearchOnMapMove

By default, moving the map triggers a new search. To disable this behavior, set disableSearchOnMapMove to true:

"mapConfig": {
  "mapProvider": "MapBox",
  "disableSearchOnMapMove": true
}

Provider Options

Both Mapbox and Google support additional provider-specific options that can be passed through providerOptions:

"mapConfig": {
  "mapProvider": "MapBox",
  "providerOptions": {
    "style": "mapbox://styles/mapbox/streets-v11"
  }
}

Map Color and Style

You can control the style of the map by passing a style URL (Mapbox) or a map ID (Google) via providerOptions.

For Mapbox, the style can be a URL to a Mapbox style:

"providerOptions": {
  "style": "mapbox://styles/mapbox/light-v10"
}

Zoom Level

The default zoom level for the map can be configured for both Google and Mapbox. Here are the approximate zoom levels and corresponding coverage areas:

Google Maps Zoom Levels

Mapbox Zoom Levels

To set the zoom level, use providerOptions:

"mapConfig": {
  "mapProvider": "MapBox",
  "providerOptions": {
    "zoom": 12
  }
}

scrollToZoom

By default, scrolling on the map will zoom in and out. If the map takes up a large portion of the page, this can cause accessibility issues. To disable scroll-to-zoom, pass scrollZoom: false in providerOptions for Mapbox:

"mapConfig": {
  "mapProvider": "MapBox",
  "providerOptions": {
    "scrollZoom": false
  }
}

For Google Maps, use scrollwheel: false:

"mapConfig": {
  "mapProvider": "Google",
  "providerOptions": {
    "scrollwheel": false
  }
}