React Integration
How to embed a map in React when you want the shortest path from published map to live page.
The simplest React integration with MapQube is intentionally boring: publish the map, use the public URL, and render it in an iframe. That gets you a stable, portable embed without building a custom map UI in your app.
The straightforward React approach
MapQube creates a public route for each published map. Once that route exists, React does not need to know how the map internals work. Your app just needs to render the URL.
That means the integration is easy to move across pages and frameworks. The same public map can live on a React marketing page today and somewhere else tomorrow without needing a rewrite.
Verified product behavior behind this page
- Published maps are available via a public URL.
- Embed code is generated as an iframe.
- Viewer settings can control map presentation.
- Public map views are tracked in the dashboard.
Example: embed a published map in a React component
export default function PropertyMap() {
return (
<iframe
src="https://mapqube.com/map/YOUR_MAP_ID"
title="Property map"
width="100%"
height="600"
style={{ border: 0, borderRadius: '16px' }}
allowFullScreen
/>
);
}Good for landing pages
Use it on a marketing page when the map is part of the pitch or proof.
Good for dashboards
Use the same pattern in a customer area or internal tool when you want a read-only public view.
Good for quick delivery
You can ship the integration without taking on the cost of a custom front-end map build.
Useful viewer settings
When you publish a map, MapQube lets you control viewer behavior such as:
- Header visibility
- Default tilt
- Fade edges
- Transparent background
- Allowed map styles
- Padding and bounds restrictions
- User location visibility
When this is the right solution
This is the right fit when you want an embeddable map experience in React, but you do not need a fully custom map rendering stack inside the app itself.
If the goal is to publish content quickly, keep ownership inside the MapQube editor, and reuse the same map across different pages, the iframe path is usually the most practical choice.
FAQ
Do I need a dedicated React package to embed a map?
Not for the public map flow. The published map URL can be embedded directly with an iframe.
Can I use this on a React landing page and a non-React site?
Yes. That is one of the main benefits of using a published map URL.
Can I still customize the embedded viewer?
Yes. MapQube supports viewer settings that affect the public map experience after publishing.
If you need a React map embed that ships cleanly, start with the public map URL.
That gets you a reliable integration first. You can always layer more around it later.