Loading multiple maps from the same account with different start locations

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>

Loading separate maps with different start locations

Should you wish to have different maps with different start locations (such as one map loading in Germany, one map loading in United Kingdom) on initial map load, this is now possible.

This again requires adding different embed codes in the back-end of your account in order for the two maps to rendor.

Please see an example of the code loading a map starting in Germany (highlighted part calling out the start location).

<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='2023,04,11'
        data-storemapper-id='1'
        data-storemapper-start-location="Germany">
        (function() {var script = document.createElement('script');
          script.type  = 'text/javascript';script.async = true;
          script.src = 'https://www.storemapper.co/js/widget-3.min.js';
          var entry = document.getElementsByTagName('script')[0];
          entry.parentNode.insertBefore(script, entry);}
        ());
</script>

Loading separate maps with different zoom settings

We also now allow you to change the zoom settings for each separate map. Please find the example code (please see highlighted part which needs to be added for your zoom setting). We allow settings from 1-20 with 1 being extremely zoomed out, and 20 being very zoomed in.

<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='2023,04,11'
        data-storemapper-id='1'
        data-storemapper-start-location="Germany">
data-storemapper-zoom="8"
        (function() {var script = document.createElement('script');
          script.type  = 'text/javascript';script.async = true;
          script.src = 'https://www.storemapper.co/js/widget-3.min.js';
          var entry = document.getElementsByTagName('script')[0];
          entry.parentNode.insertBefore(script, entry);}
        ());
</script>

No need to do all this by yourself! Just shoot us a message to help@storemapper.co and we’ll help you out.