如何为网站创建响应式地图

大家好，我是新的网络开发人员，我想在网站中创建响应式地图。
有什么办法可以做到这一点吗？最好的网页设计软件是什么？

我尝试过的：

我尝试使用 xd 和 html。

解决方案1
解决方案2

解决方案1

鉴于您已将查询标记为 HTML 和 Javascript，正如 Mike 建议的那样，我的第一个链接是：将响应式 Google 地图添加到您的网站的 5 种方法[^]

对于简单的 Google 地图，这是最简单的方法另一个参考这里[^]:

1. 访问谷歌地图网站。
2. 搜索您想要在嵌入地图中显示的位置。
3. 单击共享。
4. 单击嵌入地图以查看嵌入的预览。在这里，您可以切换地图区域、缩放、类型（街道地图或卫星地图）和尺寸（如果您愿意，还可以包括自定义尺寸）
5. 准备好嵌入后，单击复制 HTML。
6. 在 HTML 文件中，将嵌入代码粘贴到您希望地图在页面上显示的位置。代码看起来像这样（根据您为地图选择的大小，它可能看起来有所不同：
7. 保存 HTML 文件并在 Web 浏览器中打开该文件以查看正在运行的地图。
8. 使用一些额外的 HTML 和 CSS 使我们的嵌入式地图具有响应能力
代码：
1. 将现有的嵌入代码放入 HTML 文档中。然后，将其包起来 <iframe> 容器中的元素（代表地图） <div> 与谷歌地图类。

超文本标记语言

<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. 接下来，在 CSS 中添加以下代码：

CSS

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

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

解决方案2

要在网站上制作可适应屏幕尺寸的地图，您可以使用 Google Maps JavaScript API 或其他地图库。只需将地图代码放置在容器 div 内即可。

<div id="map-container"></div>

使用 CSS 应用设计原则，例如使用基于百分比的宽度。为了控制各种屏幕尺寸，您可能需要考虑使用媒体查询，如下所示：

#map-container {
    height: 60vh; /* Adjust the height as needed */
    width: 100%;
}