Deze pagina beschrijft hoe de demo-pagina met de GPS‑editor praat via window.postMessage. De editor draait in een <iframe>; de ouderpagina stuurt een configuratie en ontvangt events. Controleer altijd de origin en het type van elk bericht.
De editor meldt zich met gps-ready. Daarna stuur je een gps-config terug met je instellingen. Verder komen er events binnen over (way)points en route‑wijzigingen.
// Luisteren naar berichten uit het iFrame
window.addEventListener('message', (ev) => {
if (!ev.data || typeof ev.data !== 'object') return;
// Optioneel: check ev.origin === IFRAME_ORIGIN
switch (ev.data.type) {
case 'gps-ready':
// iFrame is ready: stuur config vanuit de UI
sendConfig(ev.source, ev.origin || IFRAME_ORIGIN);
break;
case 'gps-wpt-create': {
// [ tmpId, lat, lng, name, desc, img, order ]
const newId = 12345; // TODO: sla op en geef echte ID terug
ev.source?.postMessage({
type: 'gps-wpt-create-ack',
tempId: ev.data.tempId,
id: newId
}, ev.origin || IFRAME_ORIGIN);
break;
}
// Andere events: zie "Berichttypen" hieronder
}
});gps-configWordt door de ouderpagina naar het iFrame gestuurd na gps-ready of wanneer de gebruiker instellingen wijzigt.
apiKey — Google Maps API key (string)hide_ids — lijst van ids die verborgen moeten worden (array<string>).["addPointModeBtn", "modeToggle", "bulkWrap", "bulkAllAutoBtn", "bulkAllStraightBtn", "undoBtn", "clearBtn", "clearRouteBtn", "clearWrap", "clearWptsBtn", "clearAllBtn", "exportWrap", "importWrap", "mapTypeBtn", "svBtn", "addIwpBtn", "autoRouteBtn", "moreWrap", "searchForm", "reverseBtn", "moreReverseWpts", "moreReverseBoth", "moreSortWpts"]
waypoints — array van waypoints (objecten met id, lat, lng, optioneel name, desc, img)route — array met segmenten { mode: auto|straight, points: [[lat,lng], ...] }{
type: 'gps-config',
apiKey: '...YOUR_KEY...',
hide_ids: ["addPointModeBtn", "modeToggle", "bulkWrap"],
waypoints: [ {id:1, lat: 52.378232504381934, lng: 4.877359614007748, name: "test", desc: "test", img: "" }],
route: { segments: [ { mode: "auto", points: [[ 52.704800000000006, 5.297700000000001 ],[ 52.713550000000005, 5.28809 ]] }] }
}gps-ready — iFrame is klaar om config te ontvangen.
Actie: stuur gps-config terug.
gps-wpt-selected — gebruiker selecteert een waypoint.
Payload: { id, lat, lng, order }
gps-wpt-create — verzoek om een nieuw waypoint op te slaan.
Payload: { tempId, lat, lng, name, desc, img, order }
Antwoord: stuur gps-wpt-create-ack met { tempId, id }.
gps-wpt-edit — waypoint is bewerkt.
Payload: { id, lat, lng, name, desc, img, order }
gps-wpt-delete — waypoint is verwijderd.
Payload: { id, lat, lng, order }
gps-wpt-move — waypoint is verplaatst.
Payload: { id, lat, lng }
gps-wpt-reorder-bulk — meerdere volgordes gewijzigd.
Payload: [ { id, order }, ... ]
gps-route-changed — route is aangepast.
Payload: { lengthMeters, segments: [{ mode: 'auto'|'straight', points: [[lat,lng], ...] }, ...] }