To add maps and delivery zones, let the customer drop a pin on a map plus written details (building, apartment, Saudi National Address or Dubai Makani number), then draw delivery zones as polygons or circles around your branch, each with its own fee, minimum order and estimated time. At checkout the app automatically checks whether the address is inside a served zone and calculates the fee, and the driver sees the exact location with a button that opens navigation.
- how to add delivery zones to my app
- add a map location picker to my app
- delivery fee by distance or zone
- live driver tracking in a delivery app
- how to set delivery areas for an online store
How do you add maps and delivery zones to your app?
Adding maps and delivery zones to your app takes three parts: a screen where the customer sets their location with a pin, delivery zones you draw around your branch or warehouse, and rules that calculate fee and time by zone. At ordering time, the app confirms the pin is inside a served zone, shows the fee before payment and passes the exact location to the driver.
Before an app, the usual routine was a WhatsApp location, or 'next to the big mosque', and a driver calling three times. That works at ten orders a day and collapses at a hundred. Maps inside the app move that effort from the phone to the system.
This guide covers the technical and commercial build. For intercity shipping and Saudi carriers, read shipping in Saudi Arabia: the National Address, carriers and delivery zones.
Capturing the customer's location: pin plus details
GPS coordinates alone put the driver in front of the building but do not say which apartment or which gate in the compound. So collect both:
- A map pin that starts at the device's current location (after location permission) and can be dragged to the exact spot.
- Search by address or place name for people ordering for someone else or not sharing their location.
- Written details: district, street, building number, floor, apartment and a nearby landmark.
- The Saudi National Address (the short code of 4 letters and 4 digits is optional but useful) and the Makani number in Dubai.
- A label such as Home or Work, with several saved addresses for future orders.
- The recipient's phone number if different from the account holder.
How to draw delivery zones: three approaches
| Approach | How it works | Good for | Drawback |
|---|---|---|---|
| Radius around the branch | Any address within a set distance is served | A quick start, one branch | Ignores highways, wadis and bridges |
| Drawn polygons | You draw each zone's boundary on the map | Most city restaurants and stores | Needs updating as you expand |
| District list | The customer picks a district from a list | Cities where districts are well known | Large districts can include far-off spots |
| Actual road distance | Distance or time computed by a maps service | Precise distance-based pricing | Depends on an external service and API keys |
In practice most projects start with polygons: a 'near' zone with a low fee, a 'mid' zone with a higher fee, and everything outside unserved or pickup-only. In Riyadh or Dubai a single highway can make a district that looks close on the map a long drive away, which a circle cannot see.
Fees, minimums and delivery windows
A zone in your database is not just a shape on a map; it is a record carrying business rules. These are the fields each zone needs:
| Field | Example | Why it matters |
|---|---|---|
| Delivery fee | In SAR or AED per zone | Covers the driver's cost without putting customers off |
| Minimum order | Higher in far zones | Stops small orders you lose money on |
| Free-delivery threshold | Free above a set amount | Raises average order value |
| Estimated time | 30 to 45 minutes | Sets expectations and cuts calls |
| Service hours | Different in Ramadan and on Fridays | Prevents orders you cannot fulfill |
| Status | Active or temporarily paused | Pause a zone during rush hour or rain |
For stores that do not deliver instantly, add delivery windows customers choose from, such as today 4 to 7 pm or tomorrow morning, with a cap on orders per window so demand never exceeds driver capacity. This is essential in grocery and supermarket apps.
The driver experience and live tracking
The other side of the map is the driver. Whether they are your own staff or freelancers, they need a simple phone screen:
- 1Assigned orders list
Sorted by time or distance, with the zone name and amount to collect if paid on delivery.
- 2Navigate button
Opens their preferred maps app at the exact coordinates, with the written details visible.
- 3One-tap call or WhatsApp
Without having to save the customer's number.
- 4Status updates
Picked up, on the way, arrived, delivered; each one notifies the customer.
- 5Proof of delivery
A photo or a code the customer tells the driver, especially for high-value orders.
Live tracking sends the driver's position every few seconds and shows it to the customer. It is a great feature, but it costs driver battery and server requests. A light alternative to start with is an 'on the way' notification with an ETA, then full tracking later. For complete delivery apps, see how to build an order delivery app with AI.
Map services, keys and privacy
Showing the map, searching addresses and computing distances usually rely on external map services through an API. Each service has its own terms and usage-based pricing, so review them before launch and do not assume unlimited free use.
- Restrict your map key to your domain and app so nobody else can use it on your bill.
- Store the geocoded coordinates with the address instead of looking them up every time.
- Reduce live-tracking updates while the driver is stationary.
- Test search with Arabic and English district names, since many places are spelled more than one way.
Build maps and delivery zones in Fanann
In Fanann you describe your zones and fees in plain language, and the agent builds the address screen, a zone editor in your admin dashboard, fee calculation at checkout and the driver app, all on the same database.
Add an address and delivery-zone system to my restaurant app in Riyadh. Address screen: a map pin starting at the device location, asking permission only when the user taps 'Add address', plus manual search, fields for district, street, building, apartment, landmark and the optional short National Address, and multiple saved addresses with labels. In the admin dashboard: a zone editor where I draw polygons; each zone has a delivery fee in SAR, a minimum order, a free-delivery threshold, an estimated time, different service hours in Ramadan and a pause toggle. When an address is added, check the zone and show the fee immediately; if it is outside all zones, offer branch pickup. Driver app: order list, navigate button, call and WhatsApp, status updates that notify the customer, and photo proof of delivery. Show the exact location only to the assigned driver.
Try it in FanannNext step: open a map of your city and sketch two or three zones around your branch based on real roads, then set each zone's fee. If you are in the UAE, a restaurant ordering app without aggregator dependence completes the picture.
Key takeaways
- The map pin finds the building and the written details find the door; always collect both.
- Drawn polygons beat circles, because Gulf cities are cut by highways and wadis.
- Give every zone a fee, a minimum order and an estimated time, editable from the admin dashboard.
- Check coverage before payment, not after, to avoid cancellations and refunds.
- Restrict map API keys to your domain and app, and protect customer location as personal data.
Frequently asked questions
How do I add a map location picker to my app?
Should delivery fees be flat or based on distance?
Do I need the Saudi National Address for local delivery?
How do I add live driver tracking to a delivery app?
What should happen if a customer is outside the delivery area?
Ask your AI assistant about this
Copy this prompt into the AI assistant you use, then add the details of your own case.
I am reading this guide: “Maps, locations and delivery zones in your app: a builder's guide” https://fanann.com/en/blog/maps-delivery-zones-app/ My question: how to add delivery zones to my app Use that page as a source and explain the answer step by step for my situation, tell me what to check before I start, and cite the page link.