Top 20 Store Locator Design

homedepot
Store Locator

Everyone who is trying to buy something online or tried to find direction to store, noticed a small link on a store website like: “Where to buy”, “Locate a ..”, “Find a store”, “Find us” and many others interpretation of the same simple concept of getting customer to buy from your business.

This is simple but at the same time very powerful way to engage with potential customer and getting them though all steps to buy from you, starting from finding your website, find a product in specific category and finally getting direction to supplier location.

Maps are everywhere

I remember the time when I was trying to buy power bank while traveling to Berlin. I typed in search box things I needed to buy and follow a web site with list of products I was searching for. Then I clicked on a store locator and there was just a plain list with street names and zip codes of store locations.

Guess what? I closed browser tab and headed to another website with the similar products and then I saw the same plain dump of addresses which I needed copy-past to map search box and try to figure out what store location is the closest to my location. Iterating over the next couple websiteі I found the one which provides detailed map of where to buy, how to get over there from my location and even delivery to hotel. That’s was the place I bought product even their website was not in top 10 on Google search results.

What can you learn from this? Attention to small details like this can benefit your business in significant way. You see all those stores that were sorted out even they were first in the list? And the choice fell to the one with best customer user experience.

I like maps and want to show you how well known companies use “store locator” to drive customers to there stores and what can you learn from them.

#1 Store Locator: Apple

apple
Apple Store Locator

Apple store locator page is lightweight in terms of user experience. There are three key elements on page: search box, store list and map view. The best matched store in location you typed appears as pop up window on a map with store photo and detailed street address & phone number.

Store list on the left side is abbreviated with letters in alphabetical order. It’s easier to remember: store C in Boston MA and latter scroll list to match C letter than hold in memory: Apple CambridgeSide, 100 CambridgeSide Place, Cambridge, MA 02141.

Going to store details:

apple-details
Apple Store Details

Photos of store with detailed street address & phone number and opening hours. Going to Driving directions and map:

apple-direction
Apple Store Directions

Now, there is a full map with branded marker and “How to get here:” section. I like this one, it’s like your friend telling you in simple words how get there, what exit to get if you are getting there by car or public transit and where to park.

#2 Store Locator: Sprint

sprint
Sprint Store Locator

Sprint is one of the largest mobile network operator in US, so it provides filtered stores by Repairs, Sales, Bill payments, etc. As you probably noticed – marker on a map in different shapes to differentiate between regular and repair store.

sprint-store-detail
Sprint Store Details

Click on particular item in a list shows you list of services, opening hours, scheduling appointment and one nice feature is “Text to my phone or email”  which is very convenient when you don’t have time write things down.

sprint-make-appointment
Sprint Appointment

If you an existing customer you can click on “Make appointment” then fill out needed information and get into the queue without getting on the phone.

sprint-store-directions
Sprint Directions

And finally, driving direction both in map view and text representation, emphasizing in bold style direction and street name.

#3 Store Locator: Tesco

tesco
Tesco Store Locator

Tesco store locator is very informative in terms of services, accessibility, facilities, opening hours (see that Open Now green text on white background). Opening hours section divided by Cafe/Phone which is nice attention to details for your customer.

#4 Store Locator: ALDI

aldi
ALDI Store Locator

ALDI shows store details in pop-up window on a map with payments, hours, parking availability and Weekly Ad. Actually that’s a good way to get customer attention to show them deals of the week in particular store.

#5 Store Locator: Target

 

target
Target Store Locator

Target store locator design is clean and light, it’s not loaded with banners and stuff. There is no map when you typed address in search box but there is a pretty clean-looking list of stores, tiled like list with phone number and opening hours.

 

target-store-info
Target Store Info

On the right side there is a list of nearby stores near this one, so you can select another one which is working to the late night.

target-store-map
Target Store Map

Here we have detailed map of stores in different categories which is a good way to find what you need instead of wander around.

target-my-store
Target My Store

You can set current store as my store, so whenever you are trying to search for something on Target website, the my store will be use as default location where you can get your ordered stuff.

target-my-store-search
Target My Store Search

Here you are, your store is marked as my store.

#6 Store Locator: Walmart

walmart
Walmart Store Locator

Walmart stores clustered on map with the detailed list on the left side. You are here is your location retrieved when you allow geolocation in the internet browser.

 

walmart-store-info

In store details there is another field for stock search in this store.

walmart-refine-search
Walmart Refine Search

You can refine search on store locator to filter by store features, distance, etc.

walmart-store-details
Walmart Store Details

Store info shows you weekly ad, store saving and Make this my store.

walmart-my-store
Walmart My Store

My Store feature to make it fast to search for items in particular store.

#7 Store Locator: Staples

staples
Store Locator Staples
staples-store-info
Staples Store Info

Here is the separate section for Store Events which list upcoming classes or educational events.

staples-store-directions
Staples Store Directions

 

#8 Store Locator: SainsBurys

sainsbury
SainsBurys Store Locator

Store locator is full page map with search box and Search as I move the map, which updates list of stores when you are navigating map.

sainsbury-stores
SainsBurys Store List
sainsbury-store-info
SainsBurys Store Info

Additional to address/phone there is a name of Store manager.

sainsbury-store-directions
SainsBurys Stores Directions

Map and text view of direction to store using Car/Walk/Cycle/etc.

 

#9 Store Locator: Lowes

lowes
Store Locator Lowes
lower-store-details
Lowes Store Details
lowes-my-store
Lowes My Store

 

#10 Store Locator: T-Mobile

t-mobile
T-Mobile Store Locator

T-Mobile store locator contains in-store wait feature to get rough estimate how long to wait in a queue.

t-mobile-store-info
T-Mobile Store Info

Here is the fancy picture of store and you get in line next in in-store wait label.

#11 Store Locator: J.Crew

J.Crew
J.Crew Store Locator
J.Crew-map
J.Crew Store Locator Map View

#12 Store Locator: Best Buy

bestbuy
Best Buy Store Locator
bestbuy-store-details
Best Buy Store Info

#13 Store Locator: Whole Foods

whole-foods
Whole Foods Store Locator
whole-foods-store-details
Whole Foods Store Info
whole-foods-flyers
Whole Foods Local Sales

Local sales or flyers or weekly ads is a nice feature in your website to drive customers to your stores to use discounts. Actually there is a Download Sales Flyer as PDF, so you can save it to mobile phone and use later.

#14 Store Locator: Sears

sears
Sears Store Locator
sears-store-detail
Sears Store Info
sears-state-stores
Sears Store List by States

 

#15 Store Locator: Home Depot

homedepot
Home Depot Store Locator
homedepot-store-details
Home Depot Store Details

 

There is Upcoming Workshop section which list events customers can take part in.

#16 Store Locator: Starbucks

starbucks
Starbucks Store Locator
starbucks-store-detail
Starbucks Store Details
starbucks-filters
Starbucks Store Locator Filters

#17 Store Locator: McDonald’s

mcdonalds
McDonald’s Store Locator
mcdonalds-listview
McDonald’s Store List View

#18 Store Locator: FedEx

fedex
FedEx Store Locator
fedex-filters
FedEx Filtering Services

#19 Store Locator: 7-Eleven

7-eleven
7-Eleven Store Locator

#20 Store Locator: MTG

mtg-locator
Store Locator Mtg
mtg
Mtg List of Stores
mtg-store-details
Mtg Store Details

Summary

Here is the brief summary  what you can learn from above companies:

  • Don’t throw list of addresses to customer, keep it easy for them to find your business. Use map with additional list view.
  • Use branded markers. Don’t use default Google maps markers.
  • Differentiate markers based on your store type, is it service? Pick-up point? Regular store? Make it visible on a map.
  • Don’t restrict yourself to put only store location on markers. Store locator is just another way to get customer to buy from you. Add weekly ads, events.
  • Add My Store feature to set you customer default store. That’s not only default store location from your store list, but your competitors as well.
  • Add photos of store to make it more visible and transparent for customer.
  • Add directions to your store on map as well as in text representation. See Apple store locator example.
  • Add opening hours, services, phone numbers, store manager name, etc., and what’s more important is make this information up to date.
  • Enjoy 🙂

 

The Definitive Guide to Google Maps Markers

Here is the list of most common topics that everybody who’s working with markers in Google Maps is facing from time to time. The list contains simple topics like adding/removing markers, but that’s for the sake of having all subjects in one place. In each section there is a code snippets with optional link to live preview.

Contents

How to add marker

Adding new Marker is easy, all you need to do is to call Marker constructor with additional options, and the mandatory parameter is a map, where you want to put a marker.

function add_marker(gmap, coordinates, text) {
   var marker = new google.maps.Marker({
        position: coordinates,
        map: gmap,
        label: { text: text }
    });

   return marker;
}

Live preview or view source code

How to remove marker

There are two ways to remove marker from a map. The first one is to hide it using Maker.setVisible method and the second is to set the value of map where you want to put the marker to null using Marker.setMap method. The difference between two methods is that the setVisible just hide marker and preserves resources and the setMap removes marker and releases allocated resources.

If you want to show/hide small number of markers you can use setVisible methodbut imagine you have 10.000 of markers and you want periodically hide them. In this case using setVisible method maybe not such a good idea, as all hidden markers hanging on the map and use resources, so in this case using setMap method maybe a better choice.

function add_marker(gmap, coordinates, text) {
    var marker = new google.maps.Marker({
        position: coordinates,
        map: gmap,
        label: { text: text }
    });

    return marker;
}

var gmap = new google.maps.Map(document.getElementById('map'),
    {
        zoom: 4,
        center: { lat: 50.43333333, lng: 30.516667 }
    });

var marker = add_marker(gmap, { lat: 50.43333333, lng: 30.516667 }, 'UA');
// just hide it
marker.setVisible(false);
// or completely remove from a map
marker.setMap(null);

How to auto center map on markers

Suppose you have a bunch of stores in different countries scattered by cities. What you want is to guide user through all of them and auto-center map on interested country. There are at least two method:

  • Calculate centroid on list of points in specific country.
  • Use LatLngBounds class to extend the bounds of rectangle from list of points and then compute the center using getCenter method.

Live preview or view source code

auto_center
Moving through list of places

How to add custom data to marker

Just set the properties of Marker class to some predefined data. Let’s look into example: When someone click on marker – alert custom data info:

<script>
function add_marker(gmap, coordinates, text) {
  var marker = new google.maps.Marker({
    position: coordinates,
    map: gmap,
    label: { text: text }
  });

  return marker;
}

function init_map() {
  var places = {
    'UA': { lat: 50.43333333, lng: 30.516667 },
    'DE': { lat: 52.51666667, lng: 13.4 },
    'GL': { lat: 64.18333333, lng: -51.75 },
    'JP': { lat: 35.68333333, lng: 139.75 },
    'MG': { lat: -18.91666667, lng: 47.516667 }
  };

  var gmap = new google.maps.Map(document.getElementById('map'),
    {
      zoom: 2,
      center: { lat: -25.363, lng: 131.044 }
    });

  for (var country in places) {
    var marker = add_marker(gmap, places[country], country);
    marker.countryInfo = country;
    google.maps.event.addListener(marker, 'click', function () {
      alert('Clicked on ' + this.countryInfo + ' country');
    });
  }
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=init_map"></script>

How to get coordinates when moving marker

If you want to track position of marker when user is moving it, you need to listen on the following events:

  • dragstart: user started dragging marker.
  • drag: in process of dragging.
  • dragend: finished.

Here is the excerpt from source code to listen on the above events:

var marker = add_marker(gmap, places[country], country);
marker.countryInfo = country;
google.maps.event.addListener(marker, 'dragstart', function (event) {
    console.log(this.countryInfo + ': Start position: ', coords2text(this.getPosition()));
});
google.maps.event.addListener(marker, 'drag', function (event) {
    console.log(this.countryInfo + ': Current position: ', coords2text(this.getPosition()));
});
google.maps.event.addListener(marker, 'dragend', function (event) {
    console.log(this.countryInfo + ': Finished at: ', coords2text(this.getPosition()));
});

Live preview or view source code

How to adjust zoom level to include all visible markers on screen

There is no need to calculate distance between markers, trying to get scale ratio for zoom levels, etc., because there exists function fitBounds, which doing all the mentioned steps under the hood. So, in order to automatically adjust zoom level according to number of marker on the map, all is needed is to extend LatLngBounds to included all markers position and then call fitBounds function.

Live preview or view source code

How to resize marker image

When using custom icon in marker the default size of icon is the original size of image. In order to scale image to particular size the scaledSize property must be used.

function add_marker(gmap, coordinates, icon) {
    var marker = new google.maps.Marker({
        position: coordinates,
        map: gmap,
        icon: icon
    });

    return marker;
}

function init_map() {
    var places = {
        'UA': { lat: 50.43333333, lng: 30.516667 },
        'DE': { lat: 52.51666667, lng: 13.4 },
        'GL': { lat: 64.18333333, lng: -51.75 },
        'JP': { lat: 35.68333333, lng: 139.75 },
        'MG': { lat: -18.91666667, lng: 47.516667 }
    };

    var gmap = new google.maps.Map(document.getElementById('map'),
        {
            zoom: 2,
            center: { lat: -25.363, lng: 131.044 }
        });

    var size = 25;
    for (var country in places) {
        var icon = {
            url: "images/pin.png",
            scaledSize: new google.maps.Size(size, size),
        };
        add_marker(gmap, places[country], icon);
        size += 10;
    }
}

Live preview or view source code

How to add info window to marker

Google maps contains built-in class for showing info window over some map element, named InfoWindow. Using and styling info windows is pretty easy:

  • Content property – string with HTML elements that would be located in rectangular area in predefined position.
  • Open method which receive map and anchor as input in order to show info window.

Live preview or view source code

How to add marker using URL format

When you want to put marker on a Google map without writing code at all, you can use the following URL format:

http://maps.google.com/maps?&z=ZOOM_LEVEL&q=LATITUDE+LONGITUDE

Try this one: http://maps.google.com/maps?&z=9&q=35.68333333+139.75

How to use Font Awesome as marker icon

Fontawesome is a set of vector icons that be easily customized using CSS.  It contains nearly 675 icons divided by categories which makes it perfect candidate for custom marker icon.

In order to use Fontawesome as custom marker icon we need to switch from Marker class to RichMarker class. The latter designed for defining marker as arbitrary DOM element. Now, after switching to RichMarker library it’s very easy to define custom icon: just copy name of icon from Fontawesome website to the RichMarker content property.

function add_marker(gmap, coordinates, content) {
    var marker = new RichMarker({
        position: new google.maps.LatLng(coordinates),
        map: gmap,
        flat: true,
        anchor: RichMarkerPosition.MIDDLE,
        content: content
    });

    return marker;
}
// adding gear spinning animation as marker icon
add_marker(gmap, { lat: 48.857487, lng: 33.222656 },
   '<i class="fa fa-gear fa-spin fa-fw fa-2x" style="color:green"></i>');

Live preview or view source code

How to use SVG as marker icon

Marker class has a possibility to define custom marker icon as SVG path data, which is very powerful concept as you can mix vector/raster graphics in XML. There are predefined set of built-in symbol paths which can be customized using icon properties like: scale, strokeWeight, strokeColor, fillColor, etc.

In the linked demo, you can find basic usage of SVG icon. We are using predefined CIRCLE path and customized color, scale, fillColor, etc in order to show population by country. The larger population the bigger scale and color depth.

Live preview or view source code