Interactive maps
Drop-in seating maps wired to live ticket data (v2 & v3).
Ticketero serves the seating-map bootstrap as JavaScript you inject into a <script>
tag. The script renders an interactive map and you feed it the tickets from
/search/ticketsMap.
The map scripts are served from the v2 and v3 APIs (/api/v2/search/map, /api/v3/search/map), not v4. Everything else stays on v4.
Load map-ready tickets
curl https://production.ticketero.co/api/v4/search/ticketsMap \
-H "Authorization: Bearer YOUR_API_TOKEN" \
-H "Content-Type: application/json" \
-d '{ "eventId": "5614" }'
Maps v2
Request the map script with your eventId and a callback (the function in your app to
invoke once the map data is ready):
GET https://production.ticketero.co/api/v2/search/map?eventId=5614&callback=app.init
Render with the Seatics component, passing the tickets from /search/ticketsMap:
Seatics.config.noMapImageUrl = event.map; // fallback image when no dynamic map exists
Seatics.MapComponent.create({
imgSrc: params[0].mapImage,
tickets: ticketsForMap, // from /search/ticketsMap
mapData: params[1],
vfsUrl: "https://vfs.seatics.com",
container: $("#superMap"),
presentationInterface: { updateTicketsList: myCreateListFunction },
mapWidth: 525,
mapHeight: 545,
mapName: params[0].mapName,
enableSectionInfoPopups: true,
});
Maps v3
v3 is the next-generation interactive map. It is not yet enabled for every event, so
both versions run side by side. Detect support by checking whether mapData is defined,
and fall back to v2 otherwise:
if (typeof mapData !== "undefined" && mapData !== null) {
TicketeroCreate({
tickets: this.addons_res, // array of ticket objects
mapData: mapData, // map data object
updater: this.myCreateListFunction, // fires when an area is selected
container: $("#superMap"),
enableTooltips: true,
containerName: "#superMap",
});
} else {
// fall back to the v2 Seatics.MapComponent.create(...) above
Seatics.MapComponent.create({ /* ... */ });
}
v3 map helpers
The v3 script exposes helpers for richer interactions:
| Function | What it does |
|---|---|
highlightMap() |
Highlight all sections/categories that have availability. |
highlightTicketMap(ticket) |
Highlight the section matching a ticket. |
turnOffMapHighlight() |
Clear highlighting of unselected sections. |
clearTooltip() |
Remove visible tooltips. |
lockMap(lock) |
Enable/disable hover, leave and click events. |
zoomHome() / zoomIn() / zoomOut() |
Control zoom. |
TicketeroCreate(params) |
Build and configure the map. |
Recommended flow
- Fetch tickets with
/search/ticketsMap. - Load the v3 map script for the event; fall back to v2 when
mapDatais absent. - Wire
updateTicketsList/updaterto your list UI so selecting a section filters tickets.

API