How to Use Mapbox API Free in 2026

Yes, up to monthly allowances. Mapbox includes 50,000 web map loads (Mapbox GL JS) a month, five times Google's 10,000 free Dynamic Maps loads, plus 100,000 temporary geocoding requests and 100,000 directions requests.

Prices checked 16 October 2026 against Mapbox's pricing page. Google figures were last checked in August 2026, except Dynamic Maps (10,000 free, then $7.00 per 1,000), rechecked on 16 October.

The short answer

• Free web maps: 50,000 loads a month, then $5.00 per 1,000 in the first paid band.
• Free temporary geocoding: 100,000 requests a month, then $0.75 per 1,000. Permanent geocoding has no free allowance.
• Use a restricted public token limited to your website's URLs, not an unrestricted one.
• Check the licence if your use is vehicle, business-intelligence, analytics, sales-performance, cloud-database or real-estate software. Mapbox sells a separate Commercial Application License for those.
• If you use StoreRocket, you will still need a Mapbox token later if you choose Mapbox. During the free trial StoreRocket supplies the map. After you subscribe you connect your own Mapbox or Google Maps key and pay that provider directly.

Related: What is geocoding? | Google Maps vs Mapbox

Mapbox vs Google Maps: Quick Comparison

Before we dive in, here's how the published map-load allowances compare:

Bottom line: Mapbox publishes a larger free web-map allowance. Compare the exact products you need because pricing differs across maps, search, geocoding, and routing.

Understanding Mapbox Pricing in 2026

Mapbox meters each product separately. These are the allowances that matter for a website map:

Free Tier Includes

• 50,000 map loads/month (Mapbox GL JS)
• 100,000 temporary geocoding requests/month (address search)
• 100,000 directions requests/month

When You Pay

After the free tier:

• Map loads: $5 per 1,000
• Temporary geocoding: $0.75 per 1,000
• Directions: $2 per 1,000

Mapbox also offers volume discounts. Google requires a billing-enabled Cloud project. For a full pricing breakdown with cost examples, see our complete Mapbox pricing guide.

Step-by-Step: Setting Up Mapbox

Let's get your account and API ready.

Step 1: Create a Mapbox Account

1. Go to mapbox.com
2. Click Sign up or Start building for free
3. Enter your email and create a password
4. Verify your email address
5. Complete the short onboarding questionnaire

Step 2: Get Your Access Token

Mapbox uses "access tokens" instead of API keys. Here's how to get yours:

1. Log into your Mapbox account
2. Navigate to Account > Tokens (or visit mapbox.com/account/access-tokens)
3. You'll see a Default public token. This works for basic usage
4. For production, click Create a token to make a restricted one

Step 3: Create a Restricted Token (Recommended)

For production websites, create a token with URL restrictions:

1. Click Create a token
2. Name it (e.g., "Production - mywebsite.com")
3. Under URL restrictions, add your domains:

    1https://yourwebsite.com
    2https://www.yourwebsite.com
   

4. Select the scopes you need:
   • styles:read (required for maps)
   • fonts:read (required for labels)
   • sprites:read (required for icons)
5. Click Create token
6. Copy the public token from the tokens page

Step 4: Install Mapbox GL JS

You have two options:

Option A: CDN (easiest)

 1<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
 2<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>

Option B: npm (for build systems)

 1npm install mapbox-gl

 1import mapboxgl from 'mapbox-gl';
 2import 'mapbox-gl/dist/mapbox-gl.css';

Step 5: Create Your First Map

Here's a complete, working example. If you would rather not hand-write it, our free Mapbox embed generator builds the same snippet from a search box.

 1<!DOCTYPE html>
 2<html>
 3<head>
 4  <meta charset="utf-8">
 5  <title>Store Locator</title>
 6  <meta name="viewport" content="width=device-width, initial-scale=1">
 7  <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
 8  <style>
 9    body { margin: 0; padding: 0; }
10    #map { width: 100%; height: 500px; }
11  </style>
12</head>
13<body>
14  <div id="map"></div>
15
16  <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
17  <script>
18    mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
19
20    const map = new mapboxgl.Map({
21      container: 'map',
22      style: 'mapbox://styles/mapbox/streets-v12',
23      center: [-74.006, 40.7128], // [lng, lat] - note the order!
24      zoom: 12
25    });
26
27    // Add navigation controls
28    map.addControl(new mapboxgl.NavigationControl());
29
30    // Add a marker
31    new mapboxgl.Marker()
32      .setLngLat([-74.006, 40.7128])
33      .addTo(map);
34  </script>
35</body>
36</html>

Important: Mapbox uses [longitude, latitude] order, which is the opposite of Google Maps' {lat, lng}. This trips up many developers!

Mapbox Map Styles

One of Mapbox's biggest strengths is the variety of built-in styles:

You can also create completely custom styles in Mapbox Studio, including your brand colors, custom icons, and selective feature visibility.

Building a Store Locator on Top of a Mapbox Map

A map with markers is the easy part. A working store locator also needs address search, a location database, distance sorting, popups and ongoing upkeep. Our guide to building a store locator with AI lists the parts and the checks, and our free Mapbox embed generator makes a simple multi-pin map without code.

Common Mapbox Issues and Fixes

"Error: A valid access token is required"

Your access token is missing or invalid. Double-check:

• You're using the full token string
• No extra spaces or line breaks
• The token hasn't been deleted from your account

Map doesn't show, just gray box

Common causes:

• Missing CSS file (mapbox-gl.css)
• Container has no height defined
• JavaScript errors blocking execution

Check browser console for specific errors.

Markers at wrong positions

Remember: Mapbox uses [longitude, latitude] order!

 1// WRONG
 2[40.7128, -74.006]  // lat, lng
 3
 4// RIGHT
 5[-74.006, 40.7128]  // lng, lat

Map loads slowly

Optimize with:

• Make sure mapbox-gl.css loads once, in the page head
• Lazy load the map on scroll
• Limit initial markers visible
• Use clustering for many points

Where StoreRocket fits

We make StoreRocket, so weigh our view with that in mind. A hosted locator covers the search, filters, location dashboard and upkeep around the map, and works with Mapbox or Google Maps. During the free trial StoreRocket supplies the map. After you subscribe you connect your own key once in the dashboard, and Mapbox bills you directly, so the allowances above still apply. Features such as analytics, lead capture and Google Sheets sync depend on the plan; see pricing.

StoreRocket gives businesses with several locations a store locator for their own website: import your locations from a spreadsheet, match it to your brand and paste one embed code. Create your locator with a free trial, no credit card needed. Unsure whether Mapbox or Google Maps suits you? Talk to our team.

Frequently Asked Questions

Is Mapbox really free?

Yes, for up to 50,000 Mapbox GL JS loads per month, plus the other allowances above. Usage above an allowance is billed, so expect to add a payment method before you exceed one. Google requires a billing-enabled Cloud project from the start.

Is Mapbox better than Google Maps?

It depends on the map products and features your implementation needs. Compare the documented pricing and capabilities for that exact mix.

Can I use Mapbox for commercial projects?

Mapbox's pay-as-you-go terms cover many public web and mobile uses. Its pricing page lists separate Commercial Application Licences for specified vehicle, business-intelligence, analytics, sales-performance, cloud-database, and real-estate uses, so check your application's licence category as well as its usage allowance.

Does Mapbox work on mobile?

Yes, Mapbox GL JS is fully responsive and touch-friendly. They also offer native iOS and Android SDKs.

Can I use both Google Maps and Mapbox?

With DIY code, you'd need separate implementations. StoreRocket supports both: pick one in the dashboard, and if you change provider later, connect that provider's key and paste the updated embed code. Your locations and filters carry over.

How do I customize map colors to match my brand?

Use Mapbox Studio (studio.mapbox.com) to create custom styles. It's a visual editor, no code required. Then use your custom style URL instead of the default.