How to Set Up Mapbox API Integration for Your Store Locator Widgets

‍Mapbox API keys are used to securely integrate Mapbox maps into your website or store locator. To set them up, you must create two tokens: a public key, restricted to your domain for frontend map display, and a secret key, left unrestricted for server-side tasks such as geolocation. Mapbox API integration in MapCosmos requires generating both keys, applying the correct restrictions, and then adding them to MapCosmos under General Settings→ Map Provider. This setup ensures secure, fast, and reliable Mapbox performance across your site.
Learn more about optimizing Mapbox performance #8. - LINK

With that in place, this step-by-step Mapbox integration tutorial explains exactly how to create both keys and connect them to MapCosmos.

Step 1: Create Your Public Mapbox API Key (Frontend Use)

Your public Mapbox API key is used to display the MapCosmos widget directly on your website. To keep your site secure, this token must be restricted to your domain.

How to create your public Mapbox token:

1. Go to Mapbox and log in.
2. In the Tokens section, click Create a token.
3. Name it something descriptive, like “MapCosmos Public Key”.
4. Under URL restrictions, enter the domain where MapCosmos will appear (e.g., yourstore.com).
5. Click Create token and copy the generated key.

Step 2: Create Your Secret Mapbox API Key (Server-Side Use)

The Mapbox secret key works behind the scenes. MapCosmos uses it for server-side processes such as geolocation.To ensure these features work properly, do not add URL restrictions.

How to create your secret Mapbox token:

1. Back in your Mapbox dashboard, click Create a token again.
2. Name it: “MapCosmos Secret Key”.
3. Do not add any restrictions -leave the URL field empty.
4. Click Create token and save your key.

Step 3: Add Both Keys to MapCosmos

Once both Mapbox API keys are ready, you can connect them to your MapCosmos account.

1. Log in to MapCosmos and go to General Settings.
2. Paste your public key (with domain restriction) into the API key (public) field.
3. Paste your secret key (no restrictions) into the API key (secret) field.
4. Under Map Provider → MapBox, click Save changes.

if you encounter any issues with your keys, maps not displaying, or other setup problems, visit our Mapbox store locator troubleshooting guide #10 for step-by-step solutions and best practices. -LINK

✅ Your Mapbox API key setup is complete!

Your store locator powered by Mapbox is now ready to use, and your users will enjoy a fast and modern experience. If you have any questions, feel free to contact our support team at contact@mapcosmos.com.‍

Need Help Choosing a Map Provider?

If you are deciding which map provider to use, read our article comparing the pros and cons of Google Maps and Mapbox for business.

For a straightforward, step-by-step guide on setting up and customizing your Mapbox store locator, see our Mapbox Store Locator: Step-by-Step Setup & Customization Guide.

‍