The Google Maps mockup below is for illustration purposes only. Royal Canin markets use differing map services and therefore the assets required to build maps with Design Language assets and styling are provided here without any implementation specific instructions.

Location pin

The location pin is provided with an example tooltip. Styles and data should be replicated as closely as possible.

Trusted partner

Coffee and Beagle

Otley Old Road, Horsforth, 4.0 mi . Leeds Open now . Closes at 20:00 +44 (0) 113 258 7788

Cluster pin

The cluster pin is provided as a .png file. Please right click to simply download this. Cluster badge should only be used for integration on maps to show multiple results in a single location at wider levels of zoom. Where possible this should be used to override any default cluster styling.

Location pin

Basic map marker is provided as a .png file. Please right click to simply download this. This pin should be used to show specific location.

Default browser/map system marker

That is adefault browser marker. Used here just for presentational purpose. It can vary, depends on the browser or map system that is implemented.


If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat


If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo


  • 9th October 2018 [ui_assets/elements/maps.yml]
    Add two examples of button and link grouped
  • 1st October 2018 [ui_assets/elements/maps.yml]
    Add info about default map marker, update location details.
  • 13th September 2018 [ui_assets/elements/maps.yml]
    Spelling/ grammar
  • 12th July 2018 [ui_assets/elements/maps.yml]
    Prefixed classes throughout the portal with rc-.
  • 12th July 2018 [ui_assets/elements/maps.yml]
    add location pin docs
  • 9th July 2018 [ui_assets/elements/maps.yml]
    update selector
  • 5th July 2018 [ui_assets/elements/maps.yml]
    add keywords
  • 5th July 2018 [ui_assets/elements/maps.yml]
    add map, add pin with demo. Add cluster icon
  • 8th March 2018 [ui_assets/elements/maps.yml]
    Re-ordered nav items
  • 8th March 2018 [ui_assets/elements/maps.yml]
    Ordered elements alpabetically
  • 1st March 2018 [ui_assets/elements/maps.yml]
    Disable the maps page. Fix the language picker.
  • 19th February 2018 [ui_assets/elements/maps.yml]
    Convert all multi line text to use
  • 1st February 2018 [ui_assets/elements/maps.yml]
    Updated icon classes
  • 1st December 2017 [ui_assets/elements/maps.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/elements/maps.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/elements/maps.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 29th August 2017 [ui_assets/elements/maps.yml]
    Refactored naming convention used for levels of abstraction.
  • 19th July 2017 [ui_assets/elements/maps.yml]
    Added associated files to page config for use with git info collection.
  • 15th July 2017 [ui_assets/elements/maps.yml]
    Git commit message sync improvements. Folder restructure.
  • 11th July 2017 [ui_assets/elements/maps.yml]
    Added remaining content.