Canvas Map
Canvas Map allows editors to easily embed interactive Google Maps and OpenStreetMap components directly into Drupal Canvas page layouts. It provides configurable options for map appearance, accessibility, and provider choice, while keeping sensitive API credentials managed centrally.
Canvas Map adds Google Maps and OpenStreetMap components to Drupal Canvas. Configure Google credentials once, then let editors place accessible maps in page layouts. It gives page builders a focused way to add a single map wherever Canvas can place a component.
AI Development Disclosure: This project integrates AI coding agents into its core development lifecycle. Although extensive portions of the code are AI-generated, every commit is subjected to rigorous human review and directed by professional developers to ensure strict adherence to Drupal coding and security standards.
Features
- Add a Google Map component that accepts addresses, place names, Google Place IDs, or coordinates.
- Add an OpenStreetMap component that accepts coordinates without requiring an API key or account.
- Enable either provider or both, then let editors choose the provider for each map placement.
- Set zoom, viewport center, aspect ratio, corner radius, custom CSS classes, and an accessible map name per placement.
- Use OpenStreetMap tile styles and optional pins, or Google road-map and satellite views.
- Integrate with Klaro and the Content-Security-Policy module when those modules are enabled.
Use Canvas Map for contact, location, venue, office, and other editorial maps that belong directly in a Canvas page layout. It keeps the provider choice visible to editors while keeping site-wide Google credentials out of page content.
Post-Installation
Install the project with Composer, then enable canvas_map_osm, canvas_map_google_maps, or both. The provider components appear in the Maps folder in the Canvas editor. Rebuild caches if the folder does not appear after enabling a provider.
OpenStreetMap needs no additional configuration. For Google Maps, create a Key entity, configure it to resolve an environment-specific API key, and select it at /admin/config/system/canvas-map. Restrict the key to the Maps Embed API and to the hostnames that embed maps. Editors should give every placed map a specific accessible name.
Maps load as third-party iframes. Configure consent and Content Security Policy rules before publishing where your site requires them.
Additional Requirements
- Drupal 11.3 or later.
- Drupal Canvas 1.8 or later.
- For Google Maps: the Key module, a Google Cloud project, the Maps Embed API, and a restricted API key.
- For OpenStreetMap: no API credentials are required, but visitors need a browser with WebGL support.
Recommended modules/libraries
- Klaro, or another consent manager, when maps must wait for visitor consent.
- Content-Security-Policy, when the site uses that module to manage its Content Security Policy header.
Similar projects
Geofield, Geofield Map, and Leaflet are better choices when a site needs to store geographic data on entities, edit points or geometries, display Views results, or build advanced map layers.
Canvas Map does not add a geospatial field, mapping widget, Views display, or a general-purpose JavaScript map API. It provides lightweight, provider-specific map components for editorial placement in Drupal Canvas pages.