When I share a link to a location on Google Maps, the link comes with a preview image of that location, like this:
From what I know, you can put a preview image as a tag in the section of a webpage, like this:
<meta property="og:image" content="example.png"/>
But this tag is static and there isn't really a way to make it dynamic. So how does Google Maps do it?
Google might be doing something special, because they're Google, but it's definitely possible to make it dynamic server-side. If a sevrer renders a page using a template and knows something about the route it's rendering, it can swap out the image for another one or even generate it on the fly, for example as a base64 image as in this question.
An example of this using Jinja templates (for Python) would be <meta property="og:image" content="{{ map_location.thumbnail }}"/>. A more complex example using JavaScript template strings might be:
render(
`
<html>
<!-- other content -->
<meta property="og:image" content="/images/${request.parameters.id}.png"/>
<!-- other content -->
</html>
`
)
