---
title: "Store Distance — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Pitaly 8 · Maps. Live store distance — open Maps in"
canonical: "https://framer.elliotli.dev/component/store-distance"
---

[Home](/)/[Components](/components)/[Maps](/components/category/maps)/Store Distance

# Store Distance

Live store distance — open Maps in

[View on Framer](https://framer.com/marketplace/components/store-distance/?via=elliot-li)

![Store Distance preview image 1](https://framer.elliotli.dev/og/component/store-distance/08fb940a7fd843ad/1600x1200.jpg)

## Summary

Live store distance — open Maps in

## Description

Show visitors how far they are from your store using their current location. A clear distance readout, proximity bar, and out-of-range state help them decide whether to visit — then open Google Maps for directions.

Drop it under a map or next to your address block. On tap, it reads the visitor’s GPS position, shows live distance, and can open Google Maps for navigation.

### What it does

-   Live distance from the visitor to your store (m / km)
    
-   Proximity bar that fills as they get closer
    
-   Out-of-range state when they’re too far
    
-   Distance-based messages (walk / drive / far, fully editable)
    
-   One-tap Google Maps directions
    
-   Editable labels, colors, typography, and effects to match your brand
    
-   Canvas Preview to design Idle / Locating / Near / Out of Range without GPS
    

Best for  Restaurants, shops, clinics, studios, pop-ups — any site where “How far am I?” matters.

### Customizable properties

Location  Store Name · Latitude · Longitude · Place ID · Bar Range · Custom (km) · Out of Range · Range Label

Status Labels  Header · Header After Tap · Idle · Locating · Error · Footer (Idle / Locating / Active / Error)

Distance Messages  `<1km` · `<5km` · `<10km` · `<100km` · `<500km` · `≥500km`  Tokens: `{min}` `{km}` `{m}` `{store}`

Distance Color  Color by Distance · Near/Mid thresholds · Near/Mid/Far colors

Typography  Font · Main/Header/Footer size & weight

Colors  Header · Main · Footer · Accent · Background · Line Track

Layout  Corner Radius · Padding · Inner Gap · Bar Thickness · Dot Size

Effects  Luster · Shadow (intensity / size / spread / color)

Canvas Preview  Auto · Idle · Locating · Near · Out of Range

## Rank history [How rankings work →](/terms#rankings)

-   All · #6333

## Details

- **Author**: Pitaly 8
- **Price**: $5.00
- **Published**: 2026-09-16
- **Updated**: 2026-09-17
- **Added**: 2026-09-16
- **Categories**: Maps

## More like this

-   [Waypoint](/component/waypoint) — Dev Ahsan · $9 — Photo-first locations map
-   [No-key Store Locator](/component/no-key-store-locator) — Sean Weekes · $15 — UK store finder, no Google API key
-   [Geo Office Location](/component/geo-office-location) — Design Foundry · Free — Interactive Global Office Showcase
-   [Map Locator CMS](/component/map-locator-cms) — sherwin · $15 — Map Locator CMS is a flexible, interactive map component for Framer that helps you showcase stores, offices, properties, venues, service…