Creating a custom map pin icon
It's possible to set up a custom map marker icon on your Stockist map which will replace the standard red Google Maps icon. This involves creating a custom map marker image (in PNG, GIF, or JPEG format), uploading the image to your website, and then adding the URL of the marker image in the Stockist dashboard under Settings > Appearance > Map Markers.
Here are some tips for creating a custom icon:
Image file format
We recommend you or your designer create a PNG image for your map marker, as PNG is the only supported format that offers full transparency.
GIF and JPEG images are also supported, although JPEG does not support transparency (icons will always be rectangular) and GIF does not offer smooth transparency (so the icon edges may appear jagged).
Image file size
Since your image will be shown on the web, we recommend creating your image based on a size in pixels (rather than inches, which is the default in some tools).
We recommend creating a pin that's around 80 pixels high (which is the height of the standard red Google Maps pin icon) in order to display correctly on newer high-resolution (aka Retina) devices:
However, if you only have an icon in the older 40px-high format, you can disable the use of retina-compatible icons in the app dashboard.
Once your image is created and saved, you may want to run it through a compression tool like TinyPNG to reduce the file size.
Icon tips
The bottom center of the icon will be pinned to the geographical location of each store, so if you plan to feature a pinpoint in your icon, we suggest you anchor it there.
If you intend to use a transparent punchout, you may get better results by filling the punchout with the dominant background color of your map rather than using actual transparency. This can help reduce the feeling of clutter with overlapping icons:
The image on the left uses a transparent punchout, but uses a filled-in punchout on the right.
Hosting
To display your pin icon to visitors, it'll need to be hosted online somewhere accessible. We don't currently offer image hosting, but you can upload your icon to the platform that hosts your site:
When you add the image URL to your Stockist account, be sure it starts with https:// to ensure there won't be any issues displaying your locator on a secure site.
Adding your icon to Stockist
Once you've uploaded your map icon to your website, add it in the Stockist dashboard under Settings > Appearance > Map provider by selecting Custom icon image and pasting in the image URL:
Then, save the page to update your map.