Back to column formats
Column formattingSharePoint 2019SharePoint Online

Display a Google Maps Image for a Location

This template takes advantage of Google Maps' staticmap API which generates an image using a parameterized URL.

Display a Google Maps Image for a Location formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

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": {
    "border": "2px solid #666666",
    "width": "128px",
    "height": "64px"
  },
  "children": [
    {
      "elmType": "a",
      "attributes": {
        "href": "='https://www.google.com/maps/place/' + @currentField + '/'",
        "target": "_blank"
      },
      "style": {
        "height": "100%"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "='https://maps.googleapis.com/maps/api/staticmap?center=' + @currentField + '&size=128x64&key=AIzaSyDKNauYNcs4ZOq7sQMWYDyz1x82l00ek34'"
          }
        }
      ]
    }
  ]
}

From the contributor

How to use this sample

Summary

This template takes advantage of Google Maps' staticmap API which generates an image using a parameterized URL. The template only uses the most basic features (location & image size, but the API offers deep customization including:

In this template we are just using the current field's value as the location, but you could easily make very advanced maps by combining multiple column values across your list item.

To add additional parameters, just continue to add operands in the + operation!

screenshot of the sample

API key

The key provided in the template (the ugly text after &key) should be changed to your own FREE API Key. This will ensure you don't receive errors from over usage of a shared key. Getting a key takes 2 minutes and is FREE: Get API Key

Note: Failure to switch the key to your own key leaves you open to future issues as other users use this key or if this key were to be revoked.

Column Types

This format will work with Choice and Text columns without any changes. To use Lookup columns, you'll need to change the 2 occurences of @currentField to @currentField.lookupValue.

The values are expected to be addresses such as Indianapolis, IN or Tokyo or 123 Main St. Knoxville, TN.

View requirements

  • This format can be applied to a text/choice field where the value is expected to be a location

Sample

Solution Author(s)
generic-staticmap.json Chris Kent

Version history

Version Date Comments
1.0 March 21, 2018 Initial release
1.1 August 20, 2018 Switched to Excel-style expressions

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.


Additional notes

This template is included in the Column Formatter webpart.

An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported.