Symbiostock Maps is an optional, powerful addon that uses the Google Maps API to display your media in a clickable, interactive world map. It is highly customizable, and allows you to change the size, colors, location, number of results and more to seamlessly integrate it as many times as you want on your WordPress site.
It uses the GPS field in your product edit pages to determine the location of the media. This is automatically populated if your media has GPS metadata already embedded.
There are two ways of adding Symbiostock Maps to your WordPress site – as a widget or shortcode. The widget method is easier, but is dependent on your theme’s implementation of widget areas. Shortcodes can require a bit more if you want it customized, but are more dynamic and can be placed in any post and on any page.
The Widget
The widget can be accessed by navigating to Appearance > Widgets. It will appear in the list of available widgets as Symbiostock Maps. You can then add this to any widget area. Once added, you can open it to access all the settings.
The Shortcode
The shortcode is a snippet of text you can stick anywhere in WordPress and it will automatically replace it with the Symbiostock Maps widget. The shortcode for Symbiostock Maps is:
[ss-maps-widget]
If you add this anywhere, the widget will show up with all the default settings. If this works for you, great. If you want to change stuff in it, such as the map color or size, you need to then add some custom settings to the shortcode.
Optional shortcode settings
Here is a list of the available options:
title – An optional title that will appear above your widget. Use single quotations around multiple word titles, for example ‘Interactive Map’.
max – The maximum number of images to display
w – The width of the widget (if no unit is specified defaults to px)
h – The height of the widget
bright – the brightness of the maps display
color – the color overlay of the maps display
start – the location to start search for images from
mtype – the type of map to display – (ROADMAP, SATELLITE, HYBRID, or TERRAIN)
thumbs – set to 0 if you do not want thumbnails to be used
thumbw – the maximum thumbnail width
thumbh – the maximum thumbnail height
popimgw – the maximum popup image width
popimgh – the maximum popup image height
popicocolor – the media type icon color
popicosize – the media type icon size
poptitlecolor – the title color
poptitlefontsize – the title font size
id – a custom CSS class to attach to this instance of the widget
An example of a shortcode where you want to change the icon size and color:
[ss-maps-widget popicosize=25 popicocolor=#J98J8]
Tips:
- If you traveled to a specific location and want to showcase that in a blog post, throw in the shortcode and just change the ‘start’ option to the travel destination. This way the maps module will search first for media that is closest to that location.
- The maps zoom level will automatically adjust to include all the images Symbiostock finds based on your start location. So if you put a start location in Brazil, but you only have images in New York, the map will automatically move to New York and zoom to fit all the nearest media there.
- The maximum number of images to display is an important variable if you want to target specific locations – if you put this too high, the map will keep looking for media closest to your target location, even if it ends up being thousands of miles away. If you only have 5 images in Egypt, and you want to focus only on Egypt, change the ‘max’ option to 5, and the ‘start’ option to Egypt.
- You can override a majority of the style options available both via shortcode and the widget by using CSS to manipulate the class names embedded in the plugin itself. You can find these by right clicking on the popup box and inspecting the elements.
- If you just want to use the maps module to show a map without images, change the ‘max’ to 0 and set your ‘start’ location.
- All the variables in the shortcode are also available via the widget, and it’s better to formulate how you want your map to look via the widget first then manually convert it to a shortcode if you want to do some heavy customization.
- For a responsive map, use percentages for the width.