Map for Web Add-on

Create your own interactive map with markers, shapes, administrative boundaries, directions, images, heat maps, customized style in your spreadsheet and easily embedded in your web page or blog. 

KML/KMZ imports make it very easy to add datasets from other sources to your map. Try our Map for Web add-on for Google Sheets today! See our Privacy Policy.

Install Map for Web add-on free and try it: menu Add-ons - Map for Web - Show Ideas.

This app is powered by Google Maps and requires a Google Maps API Key  with enabled Maps JavaScript API, Directions API, Places API. Links to obtain your own keys are available on the add-on Settings page. Get free usage quota for Maps and Routes every month. Find Google pricing for Maps, Routes, and Places here.

How to use

1. Add map objects to your spreadsheet:
   - geoMarkerToWeb, geoDirectionsToWeb, geoInfoWindow, geoImageToWeb, geoHeatmapToWeb, geoLoadKML, geoWebOptions, geoMapOptions/geoMapControls;
   - (recommended) other geoJSON objects are available with Maps for Sheets add-on: geoPoint, geoShape, geoPolygon, geoCircle, geoRectangle, geoBBox, geoIsolineFrom/geoIsolineTo with styling and coloring.

2. Share this spreadsheet with people and groups: File - Share - Change to anyone with the link - Done. If you do not want to make the spreadsheet available to everyone, then it is enough to provide access to the service account.

3. Open Add-ons - Map for Web - Settings, enter your Google Maps API Key with enabled APIs.

4. Insert the URL generator =geoToWeb() with the above mentioned arguments.

5. Follow the generated URL and check the resulting map.

6. Copy the generated URL and embed it into your page or blog. 

7. Important for published maps! Click menu Add-ons - Map for Web - Replace formulas with value - All to replace all formulas in the sheet with static values to avoid redundant API calls and missing map objects due to periodical automatic formula recalculations in Google Sheets.

Ideas for use

Click menu Add-ons - Map for Web - Show ideas to find some ideas of your maps.

Insert

Click menu Add-ons - Map for Web - Insert to insert Map for Web objects into your sheet interactively or generate an URL for your map embedding. Find relevant notes here.

Update formulas

To update formulas or refresh it after some issues

1. Click menu Add-ons - Map for Web - Update formulas - In Selection to update cells with formulas in a selected range.

2. Click menu Add-ons - Map for Web - Update Formulas - With Errors to update formulas with error status.

3. Click menu Add-ons - Map for Web - Update Formulas - All to refresh the entire sheet. It could be useful to flush cached results.

Replace formulas with values

To avoid API credits “leakage” due to formulas updates by Google Sheets and  you may replace formulas with their values.

1. Click menu Add-ons - Map for Web - Replace formulas with values - In Selection for formulas in a selected range.

2. Click menu Add-ons - Map for Web - Replace formulas with values - With Errors for formulas with error status.

3. Click menu Add-ons - Map for Web - Replace formulas with values - All for the entire sheet.

Formulas inside =IMAGE() with simple arguments only, such as a range or value, are allowed for replacement. Recurring and nested functions calls returning images can not be evaluated and replaced.

Settings

1. Click menu Add-ons - Map for Web - Settings

2. To get a Google Maps API Key click Get Google Maps API Key link.
   Paste it to the Google Maps API Key field
   
   

3. Click Save

Important security notes! 

Follow Google recommendations to protect your Google Maps API key  

- apply HTTP referrers and specify the following pages as allowed referrers:

https://n-dvso33wqzfmcutsd6vwx62nzvrkfcsoybhutiiy-0lu-script.googleusercontent.com/*
https://n-dvso33wqzfmcutsd6vwx62nzvrkfcsoybhutiiy-1lu-script.googleusercontent.com/*
https://n-dvso33wqzfmcutsd6vwx62nzvrkfcsoybhutiiy-2lu-script.googleusercontent.com/*

(if the address changes later, look for the updated URL in the web browser developer console);

- one Google Maps key allowed for one spreadsheet with Map for Web add-on data only.

Subscription

Check this add-on subscription status at Add-ons - Map for Web - Subscription.

This add-on subscription does not cover Google Maps API usage fees.

Trial and 1 sheet subscriptions are assigned to 1 spreadsheet only. Unassign it under subscription management to reuse in another spreadsheet.

Function List

geoToWeb(objects;...) G

geoWebOptions([center_on_geolocation]; [marker_cluster]; [marker_icon]; [show_location_input]; [show_nearby_markers]; [geolocation_icon])

geoMapOptions([width]; [height]; [mapType]; [language]; [zoom]; [center_lat]; [center_lng]; [style]; [tilt])

geoMapControls([gestureHandling]; [disableDefaultUI]; [mapTypeControl]; [mapTypeIds]; [fullscreenControl]; [streetViewControl]; [zoomControl]; [rotateControl]; [clickableIcons]; [showTags]; [showTagsCount])

geoTagGroups(groups; ...)

geoLoadKML(url; [zIndex]; [preserveViewport]; [clickable])

geoInfoWindow(content; [disableAutoPan]; [maxWidth]; [minWidth]; [pixelOffset]; [position])

geoHeatmapToWeb(latitudes; [longitudes]; [weights]; [gradient]; [radius]; [opacity]; [maxIntensity]; [dissipating])

geoImageToWeb(url; south; [west]; [north]; [east]; [opacity]; [clickable]; [fitBounds])

geoMarkerToWeb(points; [properties])

geoMarkerOptions([title]; [icon]; [visible]; [opacity]; [label]; [anchorPoint])

geoMapIcon(url, size, origin, scaledSize, anchor, labelOrigin)

geoMapSymbol(path; [fillColor]; [strokeColor]; [strokeWeight]; [fillOpacity]; [strokeOpacity]; [scale]; [anchor]; [labelOrigin]; [rotation])

geoMarkerLabel(text; [color]; [fontFamily]; [fontSize]; [fontWeight])

geoDirectionsToWeb(origins; destinations; [waypoints]; [optimizeWaypoints]; [travelMode]; [trafficModel]; [departureTime]; [showInfoWindow]; [hideDirectionsPolyline]; [hideDirectionsUrl])

geoLoadJSON(url)

geoSetProperty(geo; [key]; [property])

geoSetProperties(geo; properties; ...)

G Google API key required

Reference

geoToWeb(objects;...)

EXAMPLE

geoToWeb(geojson)

ABOUT

Plots GeoGSON objects and returns the URL to the interactive map. Holes in polygons are not supported by geoToWeb.

objects

Input GeoJSON object(s). Allowed: geoMarkerToWeb, geoDirectionsToWeb, geoInfoWindow, geoImageToWeb, geoHeatmapToWeb, geoLoadKML,geoWebOptions, geoMapOptions/geoMapControls. Other geoJSON objects are available with Maps for Sheets add-on: geoPoint, geoShape, geoPolygon, geoCircle, geoRectangle, geoBBox with styling and coloring.

geoWebOptions([center_on_geolocation]; [marker_cluster]; [marker_icon]; [show_location_input]; [show_nearby_markers]; [geolocation_icon])

EXAMPLE

geoWebOptions(value, value_or_string, value_or_string, value, value, value)

ABOUT

Creates options for GeoJSON objects plotting by geoToMap() function.

center_on_geolocation

(optional) Center the map at the user's current location.

marker_cluster

(optional) Use marker clustering to display a large number of markers on a map. Pass URL string instead of a value to set custom cluster images, like "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"

marker_icon

(optional) Apply this icon to all markers on the map. Allowed values: string url, geoMapIcon, geoMapSymbol. If an individual icon is defined for a marker, then it has a higher priority and will be applied.

show_location_input

(optional) Show control for entering the current location. Pass a string to replace the default directions text.

show_nearby_markers

(optional) Show N markers closest to the entered/current location.

geolocation_icon

(optional) Show geolocation marker. Allowed values: boolean, string url, geoMapIcon, geoMapSymbol.

geoMapOptions([width]; [height]; [mapType]; [language]; [zoom]; [center_lat]; [center_lng]; [style];[tilt])

EXAMPLE

geoMapOptions(number, number, string, string, number, string, string, array_of_strings, number)

ABOUT

Creates options for GeoJSON objects plotting by geoToMap() function.

width

(optional) The width of the image in pixels.

height

(optional) The height of the image in pixels.

mapType

(optional) A constant value: ROADMAP(default), SATELLITE, TERRAIN, HYBRID.

language

(optional) A BCP-47 language identifier.

zoom

(optional) A value from zero to 21, inclusive.

center_lat

(optional) The address of the center or the latitude of the center.

center_lng

(optional) The longitude of the center.

style

(optional) One or more map style parameters. See https://developers.google.com/maps/documentation/maps-static/styling

tilt

(optional) Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45.

geoMapControls([gestureHandling]; [disableDefaultUI]; [mapTypeControl]; [mapTypeIds]; [fullscreenControl]; [streetViewControl]; [zoomControl]; [rotateControl]; [clickableIcons]; [showTags]; [showTagsCount])

EXAMPLE

geoMapControls(string, value, string_or_value, string, value, value, value, value, value)

ABOUT

Creates object used to define the controls that can be set on a Map.

gestureHandling

(optional) This setting controls how the API handles gestures on the map. Allowed values: "auto": (default), "cooperative", "greedy", "none"

disableDefaultUI

(optional) Enables/disables all default UI buttons. May be overridden individually.

mapTypeControl

(optional) Used to select what style of map type control to display: 0 or false to disable, DEFAULT default map type control, DROPDOWN_MENU, HORIZONTAL_BAR.

mapTypeIds

(optional) String with comma separated values: ROADMAP, SATELLITE, TERRAIN, HYBRID.

fullscreenControl

(optional) The enabled/disabled state of the Fullscreen control.

streetViewControl

(optional) The initial enabled/disabled state of the Street View Pegman control.

zoomControl

(optional) The enabled/disabled state of the Zoom control.

rotateControl

(optional) enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery.

clickableIcons

(optional) When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable.

showTags

(optional) Show or hide tags panel to filter markers and shapes: 0 or false to disable, true to show panel, > 49 to set max-height of the panel.

showTagsCount

(optional) Show or hide tags counter for every tag.

geoTagGroups(groups; ...)

EXAMPLE

geoTagGroups(string)

ABOUT

Creates tag groups for filtering logic.

groups

(optional) Tag groups with comma separated tags: "tag11,tag12,tag13","tag21,tag22","tagN1"

geoLoadKML(url; [zIndex]; [preserveViewport]; [clickable])

EXAMPLE

geoLoadKML(string, number, value, value)

ABOUT

Loads KML/KMZ objects from the URL.

url

(required) The URL of the KML document to display.

zIndex

(optional) The z-index of the layer.

preserveViewport

(optional) By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.

clickable

(optional) If true, the layer receives mouse events. Default value is true.

geoInfoWindow(content; [disableAutoPan]; [maxWidth]; [minWidth]; [pixelOffset]; [position])

EXAMPLE

geoInfoWindow(string, value, number, number, string, string)

ABOUT

Creates the infoWindow.

content

(required) Content to display in the InfoWindow. This can be an HTML element, a plain-text string, or a string containing HTML.

disableAutoPan

(optional) Disable auto-pan on open. By default, the InfoWindow will pan the map so that it is fully visible when it opens.

maxWidth

(optional) Maximum width of the InfoWindow, regardless of content's width.

minWidth

(optional) Minimum width of the InfoWindow, regardless of the content's width. When using this property, it is strongly recommended to set the minWidth to a value less than the width of the map (in pixels).

pixelOffset

(optional) The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored.

position

(optional) The LatLng at which to display this InfoWindow. If the InfoWindow is opened with an anchor, the anchor's position will be used instead.

geoHeatmapToWeb(latitudes; [longitudes]; [weights]; [gradient]; [radius]; [opacity]; [maxIntensity]; [dissipating])

EXAMPLE

geoHeatmapToWeb(array_of_numbers, Object, array_of_numbers, array_of_colors, number, number, number, boolean)

ABOUT

Plots the heatmap image.

latitudes

(required) Latitudes/longitudes or geoPoint objects of the points for the heatmap.

longitudes

weights

(optional) Weights of the points for the heatmap.

gradient

(optional) The color gradient of the heatmap, specified as an array of CSS color strings. All CSS3 colors — including RGBA — are supported except for extended named colors and HSL(A) values.

radius

(optional) The radius of influence for each data point, in pixels.

opacity

(optional) The opacity of the heatmap, expressed as a number between 0 and 1.

maxIntensity

(optional) The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum. Setting the maximum intensity can be helpful when your dataset contains a few outliers with an unusually high intensity.

dissipating

(optional) Specifies whether heatmaps dissipate on zoom. When dissipating is false the radius of influence increases with zoom level to ensure that the color intensity is preserved at any given geographic location. Defaults to true.

geoImageToWeb(url; south; [west]; [north]; [east]; [opacity]; [clickable]; [fitBounds])

EXAMPLE

geoImageToWeb(string, number_or_geopoint, number, number_or_geopoint, number, number, boolean, boolean)

ABOUT

Creates a ground overlay from the provided image URL and its bounds.

url

(required) image URL

south

(required) South latitude in degrees or southwest geopoint

west

(optional) West longitude in degrees.

north

(required) North latitude in degrees or northeast geopoint

east

(optional) East longitude in degrees.

opacity

(optional) The opacity of the overlay, expressed as a number between 0 and 1. Optional. Defaults to 1.

clickable

(optional) If true, the ground overlay can receive mouse events.

fitBounds

(optional) If true, then fit bounds.

geoMarkerToWeb(points; [properties])

EXAMPLE

geoMarkerToWeb(array_of_points, JSON_string)

ABOUT

Creates a marker with the options specified.

points

(required) Latitude/longitude pair or geoPoints

properties

(optional) optional properties as geoMarkerOptions

geoMarkerOptions([title]; [icon]; [visible]; [opacity]; [label]; [anchorPoint])

EXAMPLE

geoMarkerOptions(string, string, value, number, string, string)

ABOUT

Creates the marker properties.

title

(optional) Rollover text.

icon

(optional) Icon for the foreground: string|Icon|Symbol.

visible

(optional) If true, the marker is visible.

opacity

(optional) The marker's opacity between 0.0 and 1.0.

label

(optional) Adds a label to the marker.

anchorPoint

(optional) The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor.

geoMapIcon(url, size, origin, scaledSize, anchor, labelOrigin)

EXAMPLE

geoMapIcon(string; [string]; [string]; [string]; [string]; [string])

ABOUT

Creates the marker icon.

url

(required) The URL of the image or sprite sheet.

size

(optional) The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads.

origin

(optional) The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image (0, 0).

scaledSize

(optional) The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.

anchor

(optional) The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.

labelOrigin

(optional) The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image.

geoMapSymbol(path; [fillColor]; [strokeColor]; [strokeWeight]; [fillOpacity]; [strokeOpacity]; [scale]; [anchor]; [labelOrigin]; [rotation])

EXAMPLE

geoMapSymbol(string, string, string, number, number, number, number, string, string, number)

ABOUT

Creates the marker symbol.

path

(required) The symbol's path, which is a built-in symbol path, or a custom path expressed using SVG path notation.

fillColor

(optional) The symbol's fill color. All CSS3 colors are supported except for extended named colors. For symbol markers, this defaults to 'black'. For symbols on polylines, this defaults to the stroke color of the corresponding polyline.

strokeColor

(optional) The symbol's stroke color. All CSS3 colors are supported except for extended named colors. For symbol markers, this defaults to 'black'. For symbols on a polyline, this defaults to the stroke color of the polyline.

strokeWeight

(optional) The symbol's stroke weight. Defaults to the scale of the symbol.

fillOpacity

(optional) The symbol's fill opacity. Defaults to 0.

strokeOpacity

(optional) The symbol's stroke opacity. For symbol markers, this defaults to 1. For symbols on a polyline, this defaults to the stroke opacity of the polyline.

scale

(optional) The amount by which the symbol is scaled in size. For symbol markers, this defaults to 1; after scaling, the symbol may be of any size. For symbols on a polyline, this defaults to the stroke weight of the polyline; after scaling, the symbol must lie inside a square 22 pixels in size centered at the symbol's anchor.

anchor

(optional) The position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively. By default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the symbol's path.

labelOrigin

(optional) The origin of the label relative to the origin of the path, if label is supplied by the marker. By default, the origin is located at (0, 0). The origin is expressed in the same coordinate system as the symbol's path. This property is unused for symbols on polylines.

rotation

(optional) The angle by which to rotate the symbol, expressed clockwise in degrees. Defaults to 0. A symbol in an IconSequence where fixedRotation is false is rotated relative to the angle of the edge on which it lies.

geoMarkerLabel(text; [color]; [fontFamily]; [fontSize]; [fontWeight])

EXAMPLE

geoMarkerLabel(string, string, string, string, string)

ABOUT

Creates the marker label.

text

(required) The text to be displayed in the label.

color

(optional) The color of the label text. Default color is black.

fontFamily

(optional) The font family of the label text (equivalent to the CSS font-family property).

fontSize

(optional) The font size of the label text (equivalent to the CSS font-size property). Default size is 14px.

fontWeight

(optional) The font weight of the label text (equivalent to the CSS font-weight property).

geoDirectionsToWeb(origins; destinations; [waypoints]; [optimizeWaypoints]; [travelMode]; [trafficModel]; [departureTime]; [showInfoWindow]; [hideDirectionsPolyline]; [hideDirectionsUrl])

EXAMPLE

geoDirectionsToWeb(string_or_array, string_or_array, string_or_array, boolean, string, string, string, number, boolean, boolean)

ABOUT

Computing and plotting directions between two or more places.

origins

(required) Location of origin. This can be specified as either geo-object, or a string to be geocoded, or a LatLng, or a Place. Use negative numbers for markers closest to geo- or selected location, or positive numbers as indexes of markers. If no points are defined, use the current geolocation or a user-defined location in the location control.

destinations

(required) Location of destination. This can be specified as either geo-object, or a string to be geocoded, or a LatLng, or a Place. Use negative numbers for markers closest to geo- or selected location, or positive numbers as indexes of markers. If no points are defined, use the current geolocation or a user-defined location in the location control.

waypoints

(optional) Array of intermediate waypoints. Directions are calculated from the origin to the destination by way of each waypoint in this array. Customers are allowed 25 waypoints, plus the origin, and destination.

optimizeWaypoints

(optional) If set to true, the DirectionsService will attempt to re-order the supplied intermediate waypoints to minimize overall cost of the route.

travelMode

(optional) Type of routing requested. Valid travel modes: "BICYCLING", "DRIVING" (default), "TRANSIT", "WALKING".

trafficModel

(optional) Valid models: "bestguess", "optimistic", "pessemistic". The preferred assumption to use when predicting duration in traffic. The default is BEST_GUESS. Settings that apply only to requests where travelMode is DRIVING.

departureTime

(optional) The desired departure time for the route. The departure time must be set to the current time or some time in the future. It cannot be in the past.

showInfoWindow

(optional) Display information about the route: 0 (default) - not show, 1 - show infoWindow @ destination, 2 - standalone route infoWindow, "Directions to" - show infoWindow at existing marker with only directions URL based on your string, no Directions API call

hideDirectionsPolyline

(optional) Do not render directions polyline: false (default), true

hideDirectionsUrl

(optional) Do not embed directions URL indo destination marker: false (default), true

geoLoadJSON(url)

EXAMPLE

geoLoadJSON(string)

ABOUT

Loads GeoJSON object from the URL. Holes in polygons are not supported.

url

The URL of the GeoJSON object.

geoSetProperty(geo; [key]; [property])

EXAMPLE

geoSetProperty(array_of_geo, string, string)

ABOUT

Sets the geo-object property.

geo

(required) geo-objects.

key

(optional) Key for geo-object property.

property

(optional) Value for geo-object property. Use empty string to cleanup property.

geoSetProperties(geo; properties; ...)

EXAMPLE

geoSetProperties(array_of_geo, json_string)

ABOUT

Sets the geo-object properties.

geo

(required) geo-objects.

properties

(optional) Add JSON object to geo-object properties. Use empty objects {} to cleanup properties.