Get Directions Button Widget
Add a 'Get directions' button that starts navigation to your door: Google Maps or Apple Maps opens with your address or exact coordinates as the destination and the visitor's current location as the start - or let each visitor choose their maps app.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
Fill in the required fields above - until then this code shows nothing on your site.
<div data-a2z-kit="get-directions-button"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Google's Maps URLs API and Apple's Map Links both accept a destination in a plain link, so directions need no API key and no embedded map. Google: https://www.google.com/maps/dir/?api=1&destination= followed by the encoded address; the origin is left out, so Google starts from the device's location. Apple: https://maps.apple.com/?daddr= with the same encoded value, which opens Apple Maps on iPhone, iPad and Mac and maps.apple.com elsewhere. With 'Let the visitor choose' the button opens a two-item menu instead. An address is sent as written, percent-encoded, so commas, ampersands and accented letters are safe; for a site entrance, a car park or a rural location, give coordinates as latitude,longitude - they are accepted only inside -90 to 90 and -180 to 180, which catches swapped or mistyped values. A trailing note can show the address as text under the button. Brand style uses a map red with white text above 4.5:1 contrast.
Method
- destination = 'lat,lng' when ^-?\d{1,3}(\.\d+)?\s*,\s*-?\d{1,3}(\.\d+)?$ and |lat| <= 90, |lng| <= 180; otherwise the address text (3-300 characters, containing a letter)
- Google: https://www.google.com/maps/dir/?api=1&destination=<enc(destination)>
- Apple: https://maps.apple.com/?daddr=<enc(destination)>
- Ask: a menu with both links; Escape closes it and returns focus to the button
Worked examples
A street address in Google Maps
Inputs: address 14 Mill Lane, Northside, NW1 0AA; opens in Google Maps
Result: https://www.google.com/maps/dir/?api=1&destination=14%20Mill%20Lane%2C%20Northside%2C%20NW1%200AA
Spaces become %20 and commas %2C; the start point is the visitor's location.
Coordinates in Apple Maps
Inputs: address 40.7484,-73.9857; opens in Apple Maps
Result: https://maps.apple.com/?daddr=40.7484%2C-73.9857
Both values are inside their ranges, so they are used exactly as typed.
An impossible coordinate
Inputs: address 91,10
Result: No button on the live page; the builder explains the ranges
Latitude 91 does not exist.
Limitations
- It does not show a map or travel time on your page.
- The route starts from wherever the visitor's device says it is.
- Google Place IDs and multiple stops are not supported.
Where publishers use it
- A wedding venue down a country lane where postcodes lead to the wrong gate, using exact coordinates for the entrance
- A clinic with patients on both iPhone and Android, letting each choose Apple Maps or Google Maps
- A pop-up shop or market stall changing location each month, updating one address field
- A restaurant's reservation confirmation page with directions right under the booking details
Questions
Address or coordinates - which is better?
An address is easiest and reads well if shown under the button. Coordinates are more exact for large sites, new-build streets, car parks and rural places; copy them from your maps app (for example 51.5007,-0.1246).
Does it work without an API key?
Yes. Maps URLs and Apple Map Links are ordinary links documented for exactly this use. No key, account or billing is needed because no map is drawn on your page.
Which app opens on Android?
The Google link opens the Google Maps app if it is installed, or the browser otherwise. The Apple link opens maps.apple.com in the browser on Android, which is why 'Let the visitor choose' is useful for mixed audiences.
Why was my coordinate rejected?
Latitude must be between -90 and 90 and longitude between -180 and 180. A value such as 91,10 is impossible - often latitude and longitude are swapped or a minus sign is missing.
Sources
- Get started with Maps URLs - Google for Developers . Directions action: api=1, destination (address or comma-separated latitude/longitude, URL-encoded)
- Map Links - Apple Developer (Apple URL Scheme Reference) . daddr: destination address for directions
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Get Directions Button https://a2z.tools/embed/get-directions-button
<a href="https://a2z.tools/embed/get-directions-button">A2Z Tools Get Directions Button</a>
[A2Z Tools Get Directions Button](https://a2z.tools/embed/get-directions-button)
Get Directions Button by A2Z Tools - https://a2z.tools/embed/get-directions-button
Related widgets
-
A bottom bar for phones with up to five big actions: call, WhatsApp, directions, share, book.
-
A round corner button that unfolds into labelled Call, WhatsApp, Email, Directions and booking actions.
-
Your phone, email, address and reference numbers in a tidy list, each with a one-tap Copy button.
-
Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.
-
A digital business card with call, email, website and directions buttons plus a .vcf contact download.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
