Guides / Prompting and shipping

How to Add Maps to Your App: Embeds, Interactive Maps and Store Locators

How to add a map to your app: a free embed vs Google Maps, Mapbox or Leaflet, API keys, free usage limits, geocoding, prompts to use, and mistakes to avoid.

Mythex Team · 2026-09-29 · 6 min read

To add a map to your app, first decide whether you need a static embed (one location with a pin, like "find our shop") or an interactive map (many pins from your data, filters, clustering, "near me"). For a single location, an embedded map is quickest and, with Google's Maps Embed API, free. For interactive maps, use a JavaScript map library — Google Maps JavaScript API, Mapbox GL JS, or the open-source Leaflet with a tile provider — store each place's latitude and longitude in your database, and restrict your API key to your own domain. Vendor details below are from each provider's own documentation as of September 2026.

What kind of map do you need?

Most small business sites only need the first row. Directories, marketplaces and listing sites need the third and fourth.

Your options

Google Maps Platform

Google's getting-started guide says you must create a billing-enabled Cloud project and enable the APIs you want. Its pay-as-you-go pricing gives Essentials SKUs, including Dynamic Maps, a 10,000-event free monthly cap, and lists Dynamic Maps at $7.00 per 1,000 events above that (at the first volume tier). The Maps Embed SKU is listed as unlimited and free. Google also sells monthly subscription plans. Check Google Maps Platform pricing for current numbers.

Mapbox

Mapbox's pricing page lists 50,000 free monthly map loads for Mapbox GL JS on the web, then $5.00 per 1,000 loads. See Mapbox pricing.

Leaflet and OpenStreetMap

Leaflet describes itself as an open-source JavaScript library for mobile-friendly interactive maps, about 42 KB of JavaScript. It needs map tiles (the images of the map) from somewhere. OpenStreetMap's public tile servers are tempting, but the tile usage policy requires visible attribution, forbids bulk downloading, offers no service guarantee, and warns commercial services that access may be withdrawn. For a real product, use a commercial or self-hosted tile source that works with Leaflet.

API keys: public, but restricted

Map keys used in the browser are visible to anyone who opens your page. That's expected, but it means someone could copy your key and run up usage on your bill. Google's security guidance is to add website (HTTP referrer) restrictions listing your domains, and API restrictions so the key only works for the APIs you use.

Keys for server-side services — geocoding thousands of addresses, for instance — should be separate keys kept in server-side secrets, not in the page. Also set budget alerts or quotas in the provider's console so a mistake can't turn into a large bill.

Geocoding: turn addresses into coordinates once

Maps plot latitude and longitude, not addresses. Converting an address to coordinates is called geocoding, and most providers charge for it per request. The efficient pattern:

1. When a listing is saved, geocode its address on the server.
2. Store the latitude and longitude in the database.
3. The map reads stored coordinates; it never geocodes on page view.

Check each provider's terms on how long you may store geocoding results; they differ.

Example prompts

A single embedded map:

On the Contact page, add an embedded Google map showing our address (12 High Street, Leeds) using the Maps Embed API with the key in GOOGLE_MAPS_EMBED_KEY. Add a "Get directions" link underneath. Make it full width on phones and lazy-load it.

An interactive map of listings:

Add latitude and longitude to the listings table. When a listing is created or its address changes, geocode it on the server with the key in GEOCODING_API_KEY and save the coordinates. On the Browse page, show a map with a marker per listing using Leaflet, with clustering when markers overlap. Clicking a marker shows the title, price and a link. The map and list should use the same filters.

"Near me":

Add a "Near me" button that asks for the visitor's location and shows listings within 10 km, sorted by distance. If they decline location access, let them type a city instead.

Step by step

1. Pick the map type from the table at the top.
2. Create the provider account and a project, and enable only the APIs you need.
3. Create keys: a browser key restricted to your domains (including your preview domain while building) and, if needed, a server key for geocoding.
4. Store keys as secrets and ask your builder to use them; the browser key is still restricted even though it ends up in the page.
5. Store coordinates for every place in your database.
6. Build the map: markers, popups, clustering, and a sensible default zoom.
7. Pair it with a list. A map alone is hard to use on a phone and for screen readers. Show the same results as a list.
8. Set a budget alert in the provider console.
9. Publish and test on the live domain, since referrer restrictions often block the map until the live domain is added.

Common mistakes

• Unrestricted keys. Anyone can reuse them on their own site.
• Geocoding on every page view. Slow and expensive; geocode once on save.
• Forgetting the live domain in key restrictions. Works in preview, blank grey box in production.
• Map-only layouts. Pins with no list are painful on small screens and inaccessible.
• Hundreds of markers without clustering. Unreadable and slow.
• Missing attribution. Most map and tile providers require it, and hiding it breaks their terms.
• Asking for location on page load. Ask only when the user taps "Near me".

Checklist

• Right map type chosen for the job
• Browser key restricted to your domains and required APIs
• Server-side keys kept in secrets
• Coordinates stored in the database, geocoded once
• Results also shown as a list
• Clustering for many markers
• Attribution visible
• Budget alert set with the provider
• Tested on the published domain and on a phone

Adding maps with Mythex

Mythex has no built-in maps integration; you bring your own provider key, add it as a project secret (or paste it when the agent shows a secrets card), and ask for the map in chat, as described in Integrate any API. Coordinates go in the project's database. Remember to add both your preview and published domains to the key's website restrictions, and publish again after changing secrets.

Maps usually sit next to search and listings: see how to add search to your app, how to build a directory website and how to build a small business website.