Embed documentation

iframe — works anywhere

• Copy the iframe snippet from the builder and paste it into any HTML page, CMS block, WordPress/Wix/Shopify custom-HTML widget — no build step, no dependencies.
• The snippet ships with loading="lazy" (no page-speed cost until scrolled into view) and allow="geolocation" so the in-map locate button can work if your user grants it.
• Responsive recipe: wrap in a div with position:relative; padding-bottom:62% and give the iframe position:absolute; inset:0; width:100%; height:100%.

Web Component — attribute API + events

• One script tag registers <mapjamaica-map>: <script src="https://mapjamaica.com/embed/v1.js" defer></script> (2.9 KB).
• Attributes mirror the URL params: center, zoom, sel, mode, style-name, controls, layers, routes, markers, show-nearby, origin. Change an attribute and the map updates.
• Listen for mapjamaica:ready, mapjamaica:select, mapjamaica:move, mapjamaica:picker:point as DOM CustomEvents on the element; call el.setCenter(lat, lng), el.setZoom(z), el.selectFeature(...), el.setLayers([...]) to drive it.

React — typed component

• Install: npm install @mapjamaica/map-react (React 17+).
• Props mirror the builder: center={[lat, lng]}, zoom, sel, mode, styleName, controls, layers, routes, markers, showNearby, origin.
• Callbacks: onReady, onSelect, onMove. Grab a ref for the imperative handle: ref.current.setCenter(lat, lng).

Svelte 5 — typed component

• Install: npm install @mapjamaica/map-svelte (Svelte 5+).
• Props mirror the builder; callbacks are onready, onselect, onmove.
• Use bind:this={mapRef} and call mapRef.setCenter(lat, lng) / mapRef.setLayers([...]) for programmatic control.

Fired once when the embedded map has loaded and is interactive.

window.addEventListener('message', (e) => {
  if (e.data?.source === 'mapjamaica' && e.data.type === 'ready') {
    console.log('map ready', e.data.payload.version);
  }
});

Fired when the user selects a place (or the selection clears — payload null).

window.addEventListener('message', (e) => {
  if (e.data?.source === 'mapjamaica' && e.data.type === 'select' && e.data.payload) {
    console.log('picked', e.data.payload.title);
  }
});

Fired after every map movement settles — pan, zoom, or programmatic fly.

window.addEventListener('message', (e) => {
  if (e.data?.source === 'mapjamaica' && e.data.type === 'move') {
    console.log('viewport', e.data.payload.center, e.data.payload.zoom);
  }
});

mode=picker only: fired when the user taps the map. Build address pickers with this.

window.addEventListener('message', (e) => {
  if (e.data?.source === 'mapjamaica' && e.data.type === 'picker:point') {
    document.querySelector('#lat').value = e.data.payload.lat;
    document.querySelector('#lng').value = e.data.payload.lng;
  }
});

Fly the embedded map to a coordinate from your page.

iframe.contentWindow.postMessage(
  { source: 'mapjamaica', type: 'setCenter', payload: { lat: 18.0179, lng: -76.8099 } },
  'https://mapjamaica.com'
);

Change the zoom level from your page.

iframe.contentWindow.postMessage(
  { source: 'mapjamaica', type: 'setZoom', payload: { zoom: 14 } },
  'https://mapjamaica.com'
);

Open a place’s card programmatically, or pass null to clear the selection.

iframe.contentWindow.postMessage(
  { source: 'mapjamaica', type: 'selectFeature', payload: null },
  'https://mapjamaica.com'
);

Replace the active layer set. null restores catalog defaults; [] = all off.

iframe.contentWindow.postMessage(
  { source: 'mapjamaica', type: 'setLayers', payload: { layers: ['hospital', 'fuel'] } },
  'https://mapjamaica.com'
);