5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T7de,

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

5a:[["$","$L5d",null,{"post":{"id":"01a0a86d-eecb-77aa-961d-f7fb53601426","title":null,"body":"

Live store distance — open Maps in one tap.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live store distance — open Maps in one tap."}]}]},"author":{"framerUserId":"ced5af96-b59f-478b-9913-0d164c141d42","name":"Pitaly 8","slug":"pitaly-8","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ced5af96-b59f-478b-9913-0d164c141d42/bo39fon2","followed":false,"followsYou":false},"media":[],"resources":[{"id":"6sSUyFCqP4BjOxpNBGvD","resolved":true,"title":"Store Distance","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live distance from the visitor to your store (m / km)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Proximity bar that fills as they get closer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Out-of-range state when they’re too far"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Distance-based messages (walk / drive / far, fully editable)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One-tap Google Maps directions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable labels, colors, typography, and effects to match your brand"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas Preview to design Idle / Locating / Near / Out of Range without GPS"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Best for Restaurants, shops, clinics, studios, pop-ups — any site where “How far am I?” matters."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizable properties"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Location Store Name · Latitude · Longitude · Place ID · Bar Range · Custom (km) · Out of Range · Range Label"}]},{"type":"paragraph","content":[{"type":"text","text":"Status Labels Header · Header After Tap · Idle · Locating · Error · Footer (Idle / Locating / Active / Error)"}]},{"type":"paragraph","content":[{"type":"text","text":"Distance Messages "},{"type":"text","text":"<1km","marks":[{"type":"code"}]},{"type":"text","text":" · "},{"type":"text","text":"<5km","marks":[{"type":"code"}]},{"type":"text","text":" · "},{"type":"text","text":"<10km","marks":[{"type":"code"}]},{"type":"text","text":" · "},{"type":"text","text":"<100km","marks":[{"type":"code"}]},{"type":"text","text":" · "},{"type":"text","text":"<500km","marks":[{"type":"code"}]},{"type":"text","text":" · "},{"type":"text","text":"≥500km","marks":[{"type":"code"}]},{"type":"text","text":" Tokens: "},{"type":"text","text":"{min}","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"{km}","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"{m}","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"{store}","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Distance Color Color by Distance · Near/Mid thresholds · Near/Mid/Far colors"}]},{"type":"paragraph","content":[{"type":"text","text":"Typography Font · Main/Header/Footer size & weight"}]},{"type":"paragraph","content":[{"type":"text","text":"Colors Header · Main · Footer · Accent · Background · Line Track"}]},{"type":"paragraph","content":[{"type":"text","text":"Layout Corner Radius · Padding · Inner Gap · Bar Thickness · Dot Size"}]},{"type":"paragraph","content":[{"type":"text","text":"Effects Luster · Shadow (intensity / size / spread / color)"}]},{"type":"paragraph","content":[{"type":"text","text":"Canvas Preview Auto · Idle · Locating · Near · Out of Range"}]}]},"introduction":"Live store distance — open Maps in","slug":"store-distance","author":{"framerUserId":"ced5af96-b59f-478b-9913-0d164c141d42","name":"Pitaly 8","slug":"pitaly-8","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ced5af96-b59f-478b-9913-0d164c141d42/bo39fon2","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ced5af96-b59f-478b-9913-0d164c141d42/01a0ad32-bd18-75c8-a784-b7047df63834.png","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1599,"height":1199}}],"post":null,"createdAt":"2026-09-16T04:16:11.337Z","updatedAt":"2026-09-17T02:29:45.607Z","publishedAt":"2026-09-16T04:16:11.335Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://storedistance.framer.website/","price":"5","paymentUrl":"https://buy.stripe.com/14AfZi3l53BQbi1g2V6Vq0k","workshop":false,"categories":[{"id":"8ee0cfdd-bc84-44cf-aa9c-54c86b5c56e0","name":"Maps","slug":"maps"}],"lastSaveId":"vdXwG4gzvgJa8W9EJPLz","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T04:16:11.979Z","updatedAt":"2026-09-16T04:16:11.979Z","reported":false}}],"$L5f"]

Suggested for you