Your map and directory widgets can work separately or together (on one page). To create a listing layout where the map appears above the directory:

  1. Navigate to Map > Setup > Embed Code and grab the <div> code: <div id="zenlocator-map-15dmhk3g"></div> 
  2. Navigate to Directory > Setup > Embed Code and grab the <div> code: <div id="zenlocator-directory-12FmFk3g"></div> 
  3. Place them together on your website wherever you want the widgets to appear:
<div id="zenlocator-map-95dmhk3g"></div>
<div id="zenlocator-directory-12FmFk3g"></div>

That's it! Now just make sure your website footer contains the JavaScript code, by placing the <script> tag somewhere in the footer of your website.

Optionally, you can:

  • Navigate to Map > Components > Locations list and turn that setting off, since your directory will now act as a list of locations.
  • Navigate to Map > Setup > Width and make sure it's the same width as Directory > Setup > Width (so the two widgets looks nice together).
  • Navigate to Directory > Components > Search box and turn that setting off, since the search box on the map is already there and one search box is enough.
  • If you have products on your dashboard, you can turn off products either on Map > Components > Products or Directory > Components > Products (since only one selector is enough).
Did this answer your question?