Super Skin Store Locator

The Super Skin Store Locator shows a Google Map of store locations in an Expanding Overlay when the user taps the CTA in the Hero Unit. What it does is:

  1. The ad gets the user's approximate location using Google's geolocation API. This does not require user permissions to get their approximate whereabouts (through cell-phone towers and ISP locations).
  2. It will then show up to 20 of your store locations close to the location, based on a Google Maps search whcih you can customise.
  3. The map opens in the Expanding Overlay unit of the ad, with a custom pin at each location, centered on the closest location to the approximated user location. The user still scroll the map to look at other locations. They can optionally tap any of the pins to reveal a Directions link, which opens a larger map in the mobile browser or Google Maps App if installed.

Setting up an ad with this template setup is easy:

1. Design

  • Download the available Design Template (Photoshop PSD) from the Template tab of your new ad in the Playground. (This template is in beta so not yet available from the page).
  • The PSD includes design for the
    • Hero Unit (your main offer)
    • Fallback Hero Unit (if there are no Map Results available, or user is too far out of range)
    • Banner Unit
    • Map Pin - customise this for your brand
    • Map Branding - appears below map in Expanding Overlay

 2. Data

The Map Search performed by the ad will find locations that have been added to Google Maps.

Once your ad is uploaded to the Playground, email this information to us to get your map started:

  1. URL link to your created ad (eg
  2. Your search terms:
    • Name: Your store name eg "McDonald's"
    • Type: A Google Maps Type related to your business (best if this is related to data linked to your business in Google Maps for Business) (eg "restaurant")
    • Keyword: Any other single keyword which aids accuracy of the search ("hamburger")
    • Require: Add terms whose exact spelling must be contained in the place names on the map (eg "McDonald's", "McCafé"). Helps get rid of competitors who may sneak into your Map Search!
    • Exclude: List of terms to excluded from the Map (eg "Head Office")

We will also set up:

  • a unique Google API Key to track the requests and usage of the map in your ad.
  • A zoom level for the final Map
  • A Search Radius for locations which can be from 500m to 5km from user location, though map results may vary.

  3. Other features

You can make the name of the closest store appear in the hero unit. This will require some basic tweaks in the code (CSS and Javascript).

  • You will notice in the HTML there is an element <div id="location"> containing another element <p class="name"> </p>
  • You can align #location and unit safe area with CSS in the CSS panel.
  • In the Javascript Panel, set the variable HERO_STORE_NAME = true. It is false by default.



Please sign in to leave a comment.
Powered by Zendesk