Canvas Docs

Google Map

Embed a Google Map with custom markers, map type, zoom level, and style overrides. It is shown in the block inserter as Canvas Google Map and registered as canvas-core/google-map.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Google Map settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Location

  • Location SourceDefaultAddress below

    On a single event, read the venue address from the event itself. Falls back to the address below when the event has none.

    ChoicesAddress belowThis event's location

  • AddressDefaultNew York, USA

    The place the map centres on. A street address, a postcode or a place name all work.

    Shown when Location Source is "Address below"

  • LatitudeDefaultEmpty

    When set, overrides address for geocoding.

  • LongitudeDefaultEmpty

    Required when Latitude is set.

Map Settings

  • Zoom LevelDefault12

    How close the map starts. A higher number is closer in.

  • Height (px)Default450

    How tall the map is drawn, in pixels. 0 leaves the height to classes of your own.

  • Map TypeDefaultRoadmap

    Which base map is shown, from the plain road map to satellite imagery.

    ChoicesRoadmapSatelliteHybridTerrain

  • Scroll Wheel ZoomDefaultOff

    Let a visitor zoom the map with the mouse wheel. Off keeps a scrolling page from being caught by the map.

  • Info Window ContentDefaultEmpty

    HTML content shown in the default map marker info window.

  • HTML ElementDefaultdiv

    Use section when the map is a full-width band of the page rather than a figure inside a column.

    Choicesdivsectionaside

Markers

  • MarkersDefaultEmpty

    Extra pins to place on the map. Leave it empty to show one pin at the address above.

    Each row of Markers takes:

    • AddressDefaultEmpty

      Where this pin sits. Leave it empty and give a latitude and longitude instead.

    • LatitudeDefaultEmpty

      Exact north to south position of this pin, used instead of the address.

    • LongitudeDefaultEmpty

      Exact east to west position of this pin. It is needed whenever a latitude is given.

    • Info Window From Element IDDefaultEmpty

      Take the info window from an element on the page (its HTML Anchor), so the content stays editable as blocks. Overrides the Info Window HTML below.

    • Info Window ContentDefaultEmpty

      What the bubble shows when this pin is clicked. Basic formatting is allowed.

  • Marker IconDefault0

    Pin image from the media library. Takes precedence over the URL below.

    Shown when Marker Icon is "Custom Image"

Marker Icon

  • Marker IconDefaultDefault Pin

    Whether the pins use the standard map pin or a picture of your own.

    ChoicesDefault PinCustom Image

  • Custom Icon URLDefaultEmpty

    Address of the pin image, used when no image is chosen above.

    Shown when Marker Icon is "Custom Image"

  • Icon Width (px)Default32

    Width the pin image is drawn at, in pixels.

  • Icon Height (px)Default32

    Height the pin image is drawn at, in pixels.

  • Custom Anchor PointDefaultOff

    By default the icon is anchored bottom-centre. Turn this on for a pin whose tip is off-centre or hangs below the artwork.

    Shown when Marker Icon is "Custom Image"

  • Anchor X (px)Default16

    How far across the pin image the point sits, measured from its left edge in pixels.

    Shown when Custom Anchor Point is on

  • Anchor Y (px)Default32

    How far down the pin image the point sits, measured from its top edge in pixels.

    Shown when Custom Anchor Point is on

Controls

  • Zoom ControlDefaultOff

    Show the plus and minus buttons for zooming.

  • Map Type ControlDefaultOff

    Show the buttons for switching between the map and satellite views.

  • Street View ControlDefaultOff

    Show the Street View figure a visitor can drop onto the map.

  • Scale ControlDefaultOff

    Show the distance scale in the corner of the map.

Styles

  • Custom Map Styles (JSON)DefaultEmpty

    Paste a Google Maps style JSON array to customise the map appearance.

Settings

  • PlacementDefaultIn the content

    A map used as a page banner has to span the window, which it cannot do two containers deep inside the content column. Above the content area it prints between the page title and the content, full width.

    ChoicesIn the contentFull widthabove the content area

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.

Was this page helpful?