Let’s say you have specific product pages and want a map on each page showing stores that carry a specific product or brand. Storemapper now supports loading multiple maps from one account using our embedded category feature.
How do I do this?
You just need to add a specific parameter in your embed code, define a category or list of categories you want to load on that particular map and you’re done.
Please, check Using Category Filters to know how to assign your stores to categories.
Let’s look at how it works. Let’s say you have a Storemapper account with the list of stores carrying two products: ‘Guitar’ and ‘Piano’. You want to show them separately on two maps. First take your embed code from the dashboard, clone it and add each product into the embed code under data-storemapper-categories parameter.
Lets look at an example –
<div id='storemapper' style='width:100%;'><p>Store Locator is loading from <a href='https://www.storemapper.co'>Storemapper store locator</a>...</p>
</div><script data-storemapper-start='2012,08,07' data-storemapper-id='1' data-storemapper-categories='Guitar'>(function() {var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = document.location.protocol + '//www.storemapper.co/js/widget.js'; var entry = document.getElementsByTagName('script')[0];entry.parentNode.insertBefore(script, entry);}());</script>
And for Piano
<div id='storemapper' style='width:100%;'><p>Store Locator is loading from <a href='https://www.storemapper.co'>Storemapper store locator</a>...</p></div><script data-storemapper-start='2012,08,07' data-storemapper-id='1' data-storemapper-categories='Piano'>(function() {var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = document.location.protocol + '//www.storemapper.co/js/widget.js'; var entry = document.getElementsByTagName('script')[0];entry.parentNode.insertBefore(script, entry);}());</script>
The data-storemapper-categories parameter needs to be added after data-storemapper-id
If you want to load multiple categories just list them using comma. E.g
<div id='storemapper' style='width:100%;'><p>Store Locator is loading from <a href='https://www.storemapper.co'>Storemapper store locator</a>...</p></div><script data-storemapper-start='2012,08,07' data-storemapper-id='1' data-storemapper-categories='Guitar,Piano'>(function() {var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = document.location.protocol + '//www.storemapper.co/js/widget.js'; var entry = document.getElementsByTagName('script')[0];entry.parentNode.insertBefore(script, entry);}());</script>
This works great if you have multiple brands and want to have a separate map for each of them. One important downside is that these maps will be linked to one account, which means the same settings will apply to all maps (such as start location, zoom settings etc). If you need to have different settings, then your best way would be to create multiple Storemapper accounts.
No need to do all this by yourself! Just shoot us a message to help@storemapper.co and we’ll help you out.