Back to column formats
Column formattingSharePoint Online

Display Link to Google Maps

This sample demonstrates displaying a link to Google Maps. When you open that link, a map of the area around the field value location is displayed.

Display Link to Google Maps formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "row"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField"
    },
    {
      "elmType": "a",
      "style": {
        "min-width": "28px",
        "min-height": "28px",
        "border-radius": "50%",
        "display": "=if(@currentField=='','none','flex')",
        "justify-content": "center",
        "align-items": "center",
        "font-size": "16px",
        "cursor": "pointer",
        "text-decoration": "none",
        "margin-left": "10px"
      },
      "attributes": {
        "iconName": "POI",
        "class": "ms-bgColor-themeLighter ms-fontColor-neutralSecondary ms-bgColor-themePrimary--hover ms-fontColor-white--hover",
        "href": "='https://maps.google.com/maps?q='+@currentField",
        "target": "_blank"
      }
    }
  ]
}

From the contributor

How to use this sample

Summary

This sample demonstrates displaying a link to Google Maps. The URL for that link is set to the value https://maps.google.com/maps?q=[Field Value] and when the link is opened, a map around the location of the field value is displayed.

screenshot of the sample

View requirements

  • This format can be applied to any column type (but is intended for text fields)

Sample

Solution Author(s)
text-googlemaps-link.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 April 6, 2023 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.