GPS triggering

[Acorn]

The Haversine formula is a distraction.
All you need is a bit of rounding.

A degree of latitude (and longitude at Equator) is 69 miles / 111km
So round to 3 decimal places to be at most 150m away.
For UK Long 52deg North, you are closer to 70km/deg so you are are at worst 120m away.
use 4dp for close to 10m.

That aside, the use of the Maps JavaScript API is fine, it is how you integrate it.
You are now updating a map in a browser every 10 seconds using the viewer's current location and comparing positions.
The Geolocation API uses GPS and anything it can get its hands on.
You 'position' could be adrift 200m and move around markedly.

You are still at the hand waving stage. The real effort is describing how it triggers and presents with all the attendant exceptions.

A cleaner method would be to ask a couple of location-specific questions and if these are correct, display the postcard as a reward.

Acorn

[Acorn]

Here is the start of some JavaScript to handle a list of waypoints and trigger something within 10m. Polling is every 10 seconds:

// Define your waypoints
const waypoints = [
  { lat: 51.5074, lng: -0.1278 }, // Example coordinates
  // Add the rest of your waypoints here
];


// Function to check proximity to waypoints
function checkProximity(position, waypoints) {
  waypoints.forEach((waypoint, index) => {
    const distance = google.maps.geometry.spherical.computeDistanceBetween(
      new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
      new google.maps.LatLng(waypoint.lat, waypoint.lng)
    );
    if (distance < 10) {
      // Trigger your custom event here
      console.log(`Within 10m of waypoint ${index}`);
    }
  });
}


// Watch the user's position
navigator.geolocation.watchPosition(
  (position) => {
    // Update map center
    map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));


    // Check proximity to waypoints
    checkProximity(position, waypoints);
  },
  (error) => {
    console.error(error);
  },
  {
    maximumAge: 10000,
    timeout: 10000,
    enableHighAccuracy: true,
  }
);

All you have remaining is create a container for the map, add all your waypoints and trigger a pop-up layer of the associated postcard.
Then you have to work out how a layer can be programmatically opened. What to do if the viewer closes the layer. Does it re-open? Can if be invoked after they've left the location?

Acorn