Show custom route in Google Maps on website - google-maps

Question

I already know on how to integrate a Google Maps frame on my website pinning a specific address. That is pretty well documented in the Google Maps API docs.
However, I currently have a client who organizes a kind of walking-competition which has multiple routes. This client would love to show the different routes of these walks on his website by using some kind of Google Maps iframe.
Googling "custom route on website Google Maps API" only shows results displaying how to create custom routes in the Google Maps-application.
So, my question is:
Is it possible to show custom routes in a Google Maps iframe?
The routes are fixed, so the user does not have any input.
I basically just want to make some routes in Google Maps, and display these on my website using iframes.
If Google Maps does not have a way to show a custom route on your website, is there another API or solution?
Is this possible? Thanks.

Answer 1

No with GoogleMap Embed API
You can't display custom route on GoogleMap iframe. GoogleMap iframe is allow you to display a map without using javascript and it's relative to GoogleMap Embed API. All the possibilities for this API are documented here. Attention, when you said :
That is pretty well documented in the Google Maps API docs.
it's a reference of the GoogleMap Javascript API not the GoogleMap Embed API.
Yes, with GoogleMap Javascript API
It exist another API solution for this called GoogleMap Javascript API. By using it, if you want to display custom route on your map you can use custom polylines. You just need to select all of the latLng object of the waypoints of your custom route and set up a polyline like this :
// Coordonates of your route
const customRouteCoordonates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
// ... and a lot of more to be more precise
];
//Your map
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
//Set up your polyline
const routePath= new google.maps.Polyline({
path: customRouteCoordonates ,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
routePath.setMap(map);
}