little help with html and adding in openstreetmap

hello i own www.ukpigeonracing.co.uk
and i would like to set up a webpage link this one
http://tjpeiffer.com/crowflies.html

how do i go about adding in openstreetmap and getting it so people can put in point A and point B,
then get a stright line between them and the miles ?

we all use to use the website about but no longer works so i would like to make the site just like it .
as we are the number 1 site now in the uk for pigeon racing and i feel this would be a great addition to the website

thank you again all

Much of this has little to do with OSM, which does not provide the a range of map services, but map data. Mostly this is about which library you might replace the Google API with. Most people use leafletjs, and here’s an example of how to draw a polyline: https://harrywood.co.uk/maps/examples/leaflet/polyline.view.html.

As there is no unified API for maps, drawing etc, calculating distance is possibly more complicated.

Here’s one that someone created earlier:

https://www.freemaptools.com/how-far-is-it-between.htm

That uses OSM’s own tile servers for the background and an instance of the “Graphhopper” routing API (possibly Graphhopper’s own demo one) for routing. At a guess they might be using Photon for geocoding.

What I suspect you’ll want to do is to either (a) just link to one that someone’s already created that works or (b) identify all of the various bits that you’ll need and working out how to solve each bit. Obviously (a) is a lot easier than (b), but if you do decide to do (b) then you won’t need to create much HTML from scratch - it’ll mostly be a case of gluing together things that already exist. What you will need to do though is to identify what bits you actually need though, for example:

A web form to type “from” and “to” places into
Something that converts place names to latitude and longitude, and perhaps allows users to choose between similarly named places
Something that calculates the distance between two sets of lat and long
Something that displays a line between X and Y over a background map.

You might find help about solving each of of these problems in OSM’s wiki https://wiki.openstreetmap.org , although you might need a bit of back-and-forth to find out what to search for.