How to install a map on a site with a balloon at a specific position?

Question

Google Maps

Guys, I'm making up a site, and there was a need to add a map with the exact size of the place, well, let's say, as in the picture below. If I try to add a map to the site, then it is shown without labels, and with a map size scale that is like a globe (continents and oceans), but I need the exact address.
Maybe there is some algorithm for how to do this? Or rather, a way that, when inserted into the site, the map remains the same size as when I viewed it in Google maps.

Answer 1

First you need to select the maps that you will use (apparently Google maps), then read the documentation for the api of these maps:
https://developers.google.com/maps/documentation/
In the very first chapters there will be information about scaling and coordinates. A little further about plotting points on a map . And a little further examples of custom balloons and pop-ups.
Attention: knowledge of js is required, the issue of map integration lies in the js plane and has little to do with html and css that you specified in the tags.

Answer 2

Everything is quite simple. Decide on the basis of what the map will be made on the site, and then use the instructions:
For Yandex.Maps
For Google Maps
For 2GIS Maps