# INVEETAIRE — Google Maps UX Refactor (Phase 2)

Google Maps Embed Fix (Phase 1) has been completed.

The backend architecture is now stable.

This phase focuses ONLY on improving the Couple experience.

Do NOT modify database schema.

Do NOT modify renderer architecture.

Do NOT modify CSP.

Do NOT redesign the data model.

====================================================
OBJECTIVE
====================================================

Improve the Event Configuration UI so that Couples clearly understand the difference between:

1.

Google Maps Open URL

and

2.

Google Maps Embed URL

The current implementation is technically correct but confusing.

====================================================
CURRENT ARCHITECTURE
====================================================

Keep using:

maps_url

↓

Used for

"Open in Google Maps"

button.

----------------------------------------------------

maps_embed_url

↓

Used for

Interactive iframe map.

====================================================
TASKS
====================================================

1.

Update Event Configuration UI

Locate:

app/views/invitation/edit.php

Rename labels into:

----------------------------------------------------

Open in Google Maps URL

----------------------------------------------------

Google Maps Embed URL

====================================================

2.

Improve Helper Text

Open URL field:

Helper:

Paste a Google Maps Share URL.

Examples:

https://maps.app.goo.gl/...

or

https://www.google.com/maps/place/...

Used for the "Open in Google Maps" button.

----------------------------------------------------

Embed URL field:

Helper:

Paste either:

• Google Maps Embed URL

or

• Full Google Maps iframe code.

The system will automatically extract and save only the Embed URL.

Example:

https://www.google.com/maps/embed?pb=...

Used for the Interactive Map displayed on the invitation.

====================================================

3.

Improve Placeholder Text

Open URL placeholder:

https://maps.app.goo.gl/...

----------------------------------------------------

Embed URL placeholder:

https://www.google.com/maps/embed?pb=...

====================================================

4.

Validation UX

Improve validation messages.

Case A

User pastes

https://maps.app.goo.gl/...

into Embed URL.

Display:

Invalid Google Maps Embed URL.

Please paste a Google Maps Embed URL
(beginning with
https://www.google.com/maps/embed)

or paste the full iframe code.

----------------------------------------------------

Case B

User pastes

https://www.google.com/maps/embed...

into Open URL.

Display a friendly warning:

You pasted a Google Maps Embed URL.

This field should contain a Google Maps Share URL.

Example:

https://maps.app.goo.gl/...

====================================================

5.

Compatibility

Maintain backward compatibility.

Continue accepting:

✓ Full iframe HTML

✓ Google Maps Embed URL

Do NOT require users to change existing data.

====================================================

6.

Visual Layout

Group both fields under a dedicated section:

-----------------------------------------

Google Maps

-----------------------------------------

Open in Google Maps URL

[input]

helper text

-----------------------------------------

Interactive Map (Embed)

[input]

helper text

-----------------------------------------

The distinction should be immediately obvious.

====================================================

7.

Documentation

Add concise inline comments where appropriate to explain:

maps_url

vs

maps_embed_url

for future maintainers.

====================================================
DO NOT CHANGE
====================================================

✓ Database schema

✓ Renderer

✓ Public invitation

✓ Live Preview

✓ Theme files

✓ PublicInvitationModel

✓ CSP

✓ Existing data

====================================================
OUTPUT
====================================================

Generate:

1.

Files modified

2.

UI improvements

3.

Validation improvements

4.

Backward compatibility confirmation

5.

Screenshots (before vs after if available)

6.

Regression test summary

7.

Final UX readiness assessment

Stop after implementation.