Skip to content
Wander Developers

Getting Started

Wander gives a destination four ways in:

You want toUseStart with
Put a map, an itinerary, an events calendar or a trip planner on your siteEmbedsAn <iframe>, no code
Make the map react to your pages: show what an article mentions, fly to a place, draw a trailThe Embed SDKOne <script> tag
Bring your places, lists and events into your own site, app or CMSThe REST APIcurl
Edit your map, lists and events by chattingThe MCP serverA connector in Claude

Every example on this page runs as is against the Explore Julian map (c2025939-af64-4371-a281-c6818b2cd96e), a live destination site. Swap in your own map ID when you are ready. Your Wander contact can give it to you, or you can find it in the Builder.

1. Embed a map

Section titled “1. Embed a map”

Paste this into any page:

<iframe
  src="https://web.wander-app.com/siteembed/c2025939-af64-4371-a281-c6818b2cd96e?bg=%23ECE5D6"
  width="100%"
  height="600"
  style="border: 0; display: block"
  allow="geolocation"
  title="Explore Julian map"
></iframe>

Keep allow="geolocation", and don’t set Referrer-Policy: no-referrer on the page; Wander uses both to credit visits to your site (see Attribution & analytics). For itineraries, a single place, the events calendar and the full map, see Iframe scenarios.

2. Drive the map from your page

Section titled “2. Drive the map from your page”

Load the SDK, pinned to a version with its integrity hash, and tell the map what the page is about:

<div id="map" style="position: relative; height: 600px"></div>
<script
  src="https://developer.wandermaps.com/sdk/wander-embed-0.11.0.js"
  integrity="sha384-iRDbk8kR8xUGKppKBZNAOIlGe0dFxdvVm4CW24EqQMQ35qsxhj8ZOyC8FDr8KKZF"
  crossorigin="anonymous"></script>
<script>
  const site = Wander.siteMap('#map', {
    mapId: 'c2025939-af64-4371-a281-c6818b2cd96e',
    namespace: 'my-site',
    fill: true,
    background: '#ECE5D6'
  });


  site.on('ready', ({ embedVersion }) => console.log('Map ready, embed', embedVersion));
  site.on('contextApplied', ({ count, missing }) => console.log(count, 'places shown', missing));
  site.on('poiSelected', ({ poiId, source }) => {
    if (source === 'user') console.log('Visitor opened', poiId);
  });


  // This page is about two state parks: show only them, numbered.
  site.setContext([
    { poiId: 'b62841a3-7121-496d-888e-e36a6957bee7', role: 'featured', badge: '1' },   // Bald Eagle State Park
    { poiId: '55937890-2b93-4df3-b78a-189fd9d52b21', role: 'featured', badge: '2' }    // Black Moshannon State Park
  ], { mode: 'only', fit: true });
</script>

The console shows Map ready, embed 2.2.0, then 2 places shown []. Commands sent before the map is ready are queued, so you don’t need to wait for ready. The site embed page has every command and event. The Embed SDK page covers itineraries (Wander.map), Trail View and the getting-here widget.

3. Read your content from the API

Section titled “3. Read your content from the API”

The read endpoints need no key:

Terminal window
export BASE_URL="https://api.wander-app.com/api"


# The map
curl "$BASE_URL/maps/c2025939-af64-4371-a281-c6818b2cd96e/details"


# Its curated lists
curl "$BASE_URL/maps/c2025939-af64-4371-a281-c6818b2cd96e/lists"


# One place, with photos, hours and contact details
curl "$BASE_URL/places-of-interest/id/b62841a3-7121-496d-888e-e36a6957bee7"


# Its upcoming events
curl --get "$BASE_URL/events" --data-urlencode "map_id=c2025939-af64-4371-a281-c6818b2cd96e"

See the API reference for every endpoint.

4. Manage your map from Claude

Section titled “4. Manage your map from Claude”

Add this address to Claude as a custom connector, then sign in with your Wander account:

https://wander-mcp-dot-wander-production-308019.uc.r.appspot.com/mcp

Then ask, for example, “Which places on my map have no photo?” Connect to Claude has the step-by-step setup, and Tools lists everything the assistant can do. Changes are previewed and need your confirmation before they are applied.

Next steps

Section titled “Next steps”