Posts‎ > ‎

Mapping Sheets: Custom Icons on your Google Maps

posted Jun 15, 2015, 9:54 AM by Faustino Rodriguez   [ updated Aug 17, 2016, 7:48 AM ]
On this Mapping Sheets add-on update (v.1.201sv29 June 16, 2015), we are introducing some changes around marker icons, default and custom definitions

We have learnt the hard way that browsers don't cache icons when they are defined as SVG paths instead of standard image files (SVG, PNG, etc), producing an excessive delay loading a map with more than a few hundreds locations.

The add-on is keeping and improving the custom icons definitions, but changing the default icons from SVG paths to SVG files.

This change will affect a few users that are using custom icon colors with Hexadecimal patterns instead of color names (e.g. #0000FF instead of Blue), but not using a custom icon shape. In those cases, they will have to change the Hex pattern # to a valid color name as listed in this link.

Now, let's briefly explain how you can customize the marker icons (also known as pins) in your Google Map

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

The default icon colors are coming from the valid color names list mentioned about, 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 with 16x32 pixels size as show in the image below, 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:


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 and just add a third column with header Icon, where you'd enter your icon's references
- Your icon images could be any valid image file type (like PNG, SVG, etc) and they can be within your own xsMapping folder in your Google Drive or any other web page Url (if possible with https access).
- You might want to select a color (under Color column) that matches the corresponding icon image color
See a sample below using demo data and assuming your icon images are hosted at within an icons folder:
(since version 1.301sv32 images cannot longer hosted in Google Drive (see this post for details) and the icon Url should have a full path

1-HintsAqua{ "url":""}
AccessoriesOrange{ "url":""}
AerospaceOlive{ "url":""}

3a. Advance notes on icon definitions
Under the Icon column you can use any valid map icon definition as explained in these pages: icons and shapes. However we discourage using path definition when there too many location because they are not cached by the browser.

Just as a reference, all these would be valid:
{ "url":""}
{ "url":"","size":{"width":64,"height":64},"anchor":{"x":32,"y":64}}
{ "url":"","size":{"width":20,"height":20},"anchor":{"x":10,"y":20}}
{ "url":"","size":{"width":20,"height":20},"origin":{"x":0,"y":21},"anchor":{"x":10,"y":20}}
{ "url":"","size":{"width":40,"height":40},"scaledSize":{"width":40,"height":2182},"origin":{"x":0,"y":42},"anchor":{"x":20,"y":40}}
{"path":"M19,50 a25,25 0 1,1 12,0 l-6,50z","anchor":{"x":25,"y":100},"scale":0.4,"fillOpacity":1,"strokeColor":"#000","strokeWeight":1}
{"path":"M0 100 Q10,10 40,30 L0 0 Z","anchor":{"x":0,"y":100},"scale":0.4,"fillColor":"#008","fillOpacity":1,"strokeColor":"#000","strokeWeight":1}