### Configure Travel Panel and Shortcuts

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Enable and configure the travel panel, including its position and custom shortcuts for navigation. This configuration is typically used in a Home Assistant setup.

```yaml
travel_panel_enabled: true
travel_panel_position: below        # above | below
show_travel_panel_toggle_button: true
show_travel_panel_toggle_button_position: LEFT_BOTTOM
travel_shortcuts:
  - label: "Go to Work"
    icon: "mdi:office-building"
    from_entity: "person.cenk"
    to_entity: "zone.office"
  - label: "Go Home"
    icon: "mdi:home"
    from_entity: "person.cenk"
    to_entity: "zone.home"
```

--------------------------------

### Vector Mode Configuration with Camera Controls

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Example configuration for vector rendering mode, enabling free 360° rotation and tilt. This mode requires a WebGL-capable browser and supports custom camera controls.

```yaml
type: custom:google-map-card
api_key: YOUR_API_KEY
rendering_type: vector
color_scheme: dark
cameraControl: true
cameraControl_position: RIGHT_BOTTOM
rotateControl: true
map_type: roadmap
zoom: 15
```

--------------------------------

### Define Input Datetime Helpers

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Create Home Assistant input_datetime helpers for map date, history start, and history end. These helpers are used to control the date range displayed on the map card.

```yaml
input_datetime:
  map_date:
    name: Map Date
    has_date: true
    has_time: false

  history_start:
    name: History Start
    has_date: true
    has_time: true

  history_end:
    name: History End
    has_date: true
    has_time: true
```

--------------------------------

### Configure History Date Range

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Set the history date range for entities. Use presets like 'today', 'yesterday', or 'last7', or define a fixed start and end date.

```yaml
history_preset: today  # today | yesterday | last7 | last15
# history_preset: null
# history_start_date: "2026-02-20T21:00:00.000Z"
# history_end_date: "2026-02-21T20:55:00.000Z"
```

--------------------------------

### Control History with Date Range Entities

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Bind the card's history to separate input_datetime entities for explicit start and end dates, with optional time selection. This provides more granular control over the history range.

```yaml
type: custom:google-map-card
api_key: YOUR_API_KEY
history_start_entity: input_datetime.history_start
history_end_entity: input_datetime.history_end
entities:
  - person.alice
```

--------------------------------

### Configure Entities for Tracking

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Add entities to track on the map. Customize icon size, hours to show, polyline color and width, and icon/background colors.

```yaml
entities:
  - entity: device_tracker.flightradar24
    icon_size: 30
    hours_to_show: 10
    polyline_color: "#ffffff"
    polyline_width: 1
    icon_color: "#780202"
    background_color: "#ffffff"
```

--------------------------------

### Next Day Script for Datepicker

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

A Home Assistant script to set the input_datetime.map_date to the next day. This complements the previous day script for synchronized tracking dashboards.

```yaml
script:
  datepicker_next_day:
    sequence:
      - service: input_datetime.set_datetime
        target:
          entity_id: input_datetime.map_date
        data:
          date: >
            {{ (states('input_datetime.map_date') | as_datetime
                + timedelta(days=1)).strftime('%Y-%m-%d') }}
```

--------------------------------

### Standard Dashboard Layout Configuration

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Use 'aspect_ratio' to control card height in standard or masonry dashboard layouts. Supports various ratios or pixel values.

```yaml
type: custom:google-map-card
api_key: YOUR_API_KEY
aspect_ratio: "16:9"   # or 4:3, 1:1, 400px, etc.
```

--------------------------------

### Configure Map Controls and Features

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Customize various map controls and features like clustering, gesture handling, and button visibility. Set positions for controls like zoom, street view, and traffic.

```yaml
proximity_clustering: true
proximity_radius: 5
marker_clustering: false
spiderfy: true
gesture_handling: greedy
camera_control: false
zoom_control: false
zoom_control_position: RIGHT_BOTTOM
street_view_control: false
street_view_control_position: LEFT_BOTTOM
fullscreen_control: false
fullscreen_control_position: RIGHT_TOP
map_type_control: false
map_type_control_position: TOP_LEFT
map_type_control_style: DROPDOWN_MENU
rotate_control: false
pan_control: true
show_scale: false
scaleControlPosition: BOTTOM_LEFT
keyboard_shortcuts: false
show_traffic_button: true
show_traffic_button_position: TOP_RIGHT
show_weather_button: true
show_weather_button_position: TOP_RIGHT
show_recenter_button: true
show_recenter_button_position: LEFT_BOTTOM
show_datepicker_button: true
show_datepicker_button_position: TOP_CENTER
show_traffic: false
show_history_dots: true
```

--------------------------------

### Configure Travel Panel

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Enable and customize the travel panel, including its position and toggle button. Define shortcuts with labels, icons, and source/destination entities.

```yaml
travel_panel_enabled: true
travel_panel_position: below
show_travel_panel_toggle_button: true
show_travel_panel_toggle_button_position: LEFT_BOTTOM
travel_shortcuts:
  - label: "Go to Work"
    icon: "mdi:office-building"
    from_entity: "person.cenk"
    to_entity: "zone.work"
  - label: "Go Home"
    icon: "mdi:home"
    from_entity: "person.cenk"
    to_entity: "zone.home"
```

--------------------------------

### Configure Zones

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Define zones on the map with customizable colors and labels. Set whether zones are displayed, followed, or have specific label colors.

```yaml
zones:
  zone.work:
    show: false
    color: "#3498db"
    follow: false
    label_color: "#c4dbf9"
  zone.work_2:
    show: false
    color: "#3498db"
    follow: false
    label_color: "#c4dbf9"
  zone.home:
    show: true
    color: "#3498db"
    follow: false
    label_color: "#c4dbf9"
```

--------------------------------

### Configure Google Map Card

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Basic configuration for the Google Map Card. Requires API keys for Google Maps and OpenWeatherMap. Customize map type, zoom, and theme.

```yaml
type: custom:google-map-card
api_key: <<GOOGLE API KEY>>
owm_api_key: <<OPEN WEATHER API KEY>>
theme_mode: Dark_Blueish_Night
map_type: roadmap
zoom: 16
aspect_ratio: 1.53:1
weather_layer: clouds_new
weather_layer_opacity: 0.5
```

--------------------------------

### Previous Day Script for Datepicker

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

A Home Assistant script to set the input_datetime.map_date to the previous day. This is useful for creating synchronized tracking dashboards.

```yaml
script:
  datepicker_previous_day:
    sequence:
      - service: input_datetime.set_datetime
        target:
          entity_id: input_datetime.map_date
        data:
          date: >
            {{ (states('input_datetime.map_date') | as_datetime
                - timedelta(days=1)).strftime('%Y-%m-%d') }}
```

--------------------------------

### Sections Dashboard Layout Configuration

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

For Sections dashboards, use 'aspect_ratio' with 'rows: auto' to determine card height. 'grid_options' with 'columns: full' is also recommended.

```yaml
type: custom:google-map-card
api_key: YOUR_API_KEY
grid_options:
  columns: full
  rows: auto
```

--------------------------------

### Configure Weather Layer Appearance

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Adjust the visual properties of the weather layer to fine-tune its appearance and visibility on the map. Set these in the visual editor under the Layers section.

```yaml
weather_layer: temp_new
weather_layer_opacity: 0.4       # more transparent so the map stays visible
weather_layer_brightness: 0.9    # slightly dimmed
weather_layer_contrast: 1.4      # sharper weather patterns
weather_layer_saturation: 0.6    # softer colors
```

--------------------------------

### Raster Mode Rotate Control Configuration

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Recommended configuration for optimal results with the rotate control in raster mode. Ensure map type is satellite or hybrid and zoom level is 15 or higher.

```yaml
map_type: satellite
zoom: 17
rotateControl: true
rotateControl_position: LEFT_BOTTOM
```

--------------------------------

### Configure Person Entity Tracking with History Dots

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Track person entities, showing history with customizable dot shapes, fill, and GPS accuracy ranges. Define color and opacity for different accuracy levels.

```yaml
  - entity: person.cenk
    icon_size: 30
    hours_to_show: 0
    use_date_range: true
    polyline_color: "#ffffff"
    polyline_width: 1
    icon_color: "#780202"
    background_color: "#ffffff"
    history_dot_shape: diamond
    show_gps_accuracy_radius_line: true
    gps_accuracy_ranges:
      - min: 0
        max: 15
        label: Excellent (0-15m)
        color: "#15cb1b"
        opacity: 0.6
      - min: 16
        max: 100
        label: Good (16-100m)
        color: "#0dccf2"
        opacity: 1
      - min: 101
        max: 250
        label: Fair (101-250m)
        color: "#ffeb3b"
        opacity: 1
      - min: 251
        max: 500
        label: Poor (251-500m)
        color: "#ff9800"
        opacity: 1
      - min: 501
        max: 99999
        label: Very Poor (501m+)
        color: "#f44336"
        opacity: 1
```

```yaml
  - entity: person.derya
    icon_size: 30
    hours_to_show: 0
    use_date_range: true
    polyline_color: "#ffffff"
    polyline_width: 1
    icon_color: "#780202"
    background_color: "#ffffff"
    history_dot_shape: triangle
    history_dot_filled: false
```

--------------------------------

### Control History with Single Day Entity

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Bind the card's history date to a single input_datetime entity for automatic full-day range selection. This allows one date picker to control multiple cards.

```yaml
type: custom:google-map-card
api_key: YOUR_API_KEY
history_date_entity: input_datetime.map_date
entities:
  - person.alice
  - person.bob
```

--------------------------------

### Set Map Language

Source: https://github.com/cataseven/google-map-card/blob/main/README.md

Configure the card to display map labels in a specific language using a BCP-47 tag. Reload the page after changing this setting for labels to update.

```yaml
type: custom:google-map-card
api_key: YOUR_API_KEY
language: ja          # BCP-47 tag: en, tr, de, ja, ru, he, ar, etc.
entities:
  - person.alice
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.