Posts‎ > ‎

Mapping Sheets: Custom Icons on your Google Maps

posted Jun 15, 2015, 9:54 AM by Faustino Rodriguez   [ updated Apr 11, 2017, 9:38 AM ]
When building your .json data files with the Mapping Sheets add-on, by default it will use the standard icon set, with current default shape, and colors assigned in a predefined order.

However, you can choose your own custom colors and shapes, associated with each value of the column you select as Filter

In this partial screenshot there some custom color and shape, as an example



Now, let's briefly explain how you can customize the marker icons (also known as pins) in your Mapping web app page

1. No custom colors or icons, just using the defaults
This is the most common option because most people are fine with the default icon shape the add-on is using.

The default icon colors are coming from the valid HTML color name list, but sorted to provide some contrast among them, e.g. the first 23 colors the add-on will use by default are:
Blue, Brown, Aqua, Green, Magenta, Orange, Purple, Red, Yellow, Maroon, Gray, Lime, Olive, Teal, HotPink, Aquamarine, LightSteelBlue, BlueViolet, Chartreuse, Chocolate, CornflowerBlue, Crimson, DarkSlateGray

The default icon shape is a "standard" map icon as show in the image above, using sample data


2. Keeping the default icon shape, but using custom colors
If you are fine with the default icon shape, but want to have a specific color for each of your location groups, just do as follow:
- Create a new sheet with the name Icons within the spreadsheet where you want to customize your marker icons
- Then, just add the columns Group and Color, and list below the unique values of your filter / group and a valid color name for each. see a sample below, using demo data:

GroupColor
1-HintsAqua
ExtrasOrange
IssuesOlive


3. Using your own icon images
If you want to use your own icon images, you can do as follow:
- Do as point #2 above but adding instead Group and Icon, where you'd enter your icon's Url references
- Follow the format shown in the table below
- The icon image files could be .png or .svg
- The icons must be hosted under https://
- You can use Google Sites under your account for that purpose, if you don't another option
See a sample below using demo data and assuming your icon images are hosted at my-own-website.com within an icons folder:

GroupIcon
1-Hints{ "url":"https://my-own-website.com/icons/my-icon-aqua.png"}
Extras{ "url":"https://my-own-website.com/icons/my-icon-orange.png"}
Issues{ "url":"https://my-own-website.com/icons/my-icon-olive.png"}

Notes:
- You can mix custom Color and Icon as well on different lines
Comments