How do I create responsive map for website

Given you have tagged your query as HTML & Javascript, as Mike suggested, first link for me is: 5 Ways to Add Responsive Google Maps to Your Website[^]

For a simple Google map, here’s the easiest method from another reference here[^]:

1. Go to the Google Maps website.
2. Search for the location you want to feature in your embedded map.
3. Click Share.
4. Click Embed a map to see a preview of the embed. Here, you can toggle the map area, zoom, type (street map or satellite map), and size (including a custom size if you’d like)
5. When ready to embed, click Copy HTML.
6. In your HTML file, paste the embed code where you want the map to appear on the page. The code will look something like this (it may look different depending on the size your chose for your map:
7. Save the HTML file and open the file in a web browser to view the map in action.
8. Make our embedded map responsive with a bit of extra HTML and CSS
Code:
1. take your existing embed code and place it in your HTML document. Then, wrap the <iframe> element (which represents the map) in a container <div> with the class google-map.

<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

2. Next, in your CSS, add the following code:

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}