Canvas Map

Canvas Map adds Google Maps and OpenStreetMap components to Drupal Canvas. Site builders configure Google credentials once, and editors place maps in Canvas page layouts.

AI use: Much of this project's code, tests and documentation was written with AI coding agents. The maintainer directs the work and reviews every commit.

Features

• A Google Map component that takes an address, a place name, a Google Place ID or coordinates.
• An OpenStreetMap component that takes coordinates and needs no API key or account.
• Each provider is a separate submodule with its own component. Enable one or both.
• Per-map settings for zoom, viewport center, aspect ratio, corner radius, CSS classes and an accessible name.
• OpenStreetMap tile styles and an optional pin, or Google road map and satellite views.
• A disabled OpenStreetMap service for Klaro, and frame-src sources for the Content-Security-Policy module, when those modules are enabled.

Use it for contact, venue and office maps that belong in a Canvas page. The Google API key stays in a Key entity, out of page content.

Post-Installation

Enable canvas_map_osm, canvas_map_google_maps or both. Their components appear in the Maps folder of the Canvas editor; rebuild caches if the folder is missing.

OpenStreetMap needs no configuration. For Google Maps, create a Key entity that holds an environment-specific API key, then select it at /admin/config/system/canvas-map. Restrict the key to the Maps Embed API and to the hostnames that embed maps.

Maps load as third-party iframes. Set up consent and Content Security Policy rules before publishing if your site needs them.

Additional Requirements

• Drupal 11.3 or later.
• Drupal Canvas 1.8 or later.
• For Google Maps: the Key module, a Google Cloud project with the Maps Embed API enabled, and a restricted API key.
• For OpenStreetMap: visitors need a browser with WebGL.

Recommended modules/libraries

• Klaro or another consent manager, when maps must wait for visitor consent.
• Content-Security-Policy, when the site manages its Content Security Policy header with that module.

Similar projects

• Geofield, Geofield Map and Leaflet store locations as field data on entities, with map widgets, formatters and Views displays. Use them when a site manages geographic data.
• Map provider is for developers: a plugin type for map tile sources defined in YAML, and a map render element that draws a Leaflet map from PHP. It has no Canvas components and no Google Maps embed.

Canvas Map stores no geographic data and adds no field, widget, Views display or JavaScript map API. Each provider is a placeable Canvas component that renders the map service's own embed in an iframe, and editors add a single map to a page without writing code.