如何将带有标记的 Google 地图添加到网站

Google 地图是一个流行的地图应用程序，用于在网站上显示位置和地点信息。添加带有标记的 Google 地图可以方便用户在网站上查看特定地点的位置和附近的设施。

以下是将带有标记的 Google 地图添加到网站的步骤：

1. 获取 Google 地图 API 密钥

要使用 Google 地图 API，在 Google 开发者控制台上创建一个项目并获取 API 密钥。

1. 访问 Google Cloud Platform Console 并登录或创建一个账号。
2. 创建一个新的项目，如果还没有。
3. 在项目页面中，点击左上角的菜单按钮，选择“API s和服务” > “库”。
4. 在库中，找到“Maps JavaScript API”并启用它。
5. 在菜单中选择“凭据”并点击“创建凭据”来获取 API 密钥。

记下生成的 API 密钥，后面会在代码中使用。

2. 添加 HTML 结构和样式

在网站的 HTML 文件中，创建一个容器元素来放置 Google 地图，并为其设置合适的 CSS 样式：

<div id="map" style="height: 400px; width: 100%;"></div>

你可以根据需要调整容器的高度和宽度。

3. 添加 JavaScript 代码

添加以下 JavaScript 代码来加载 Google 地图和添加标记：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
  // 初始化地图
  function initMap() {
    // 创建地图对象并设置中心点和缩放级别
    var map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 37.7749, lng: -122.4194 }, // 设置中心点的经纬度
      zoom: 12, // 设置缩放级别
    });

    // 创建标记
    var marker = new google.maps.Marker({
      position: { lat: 37.7749, lng: -122.4194 }, // 设置标记的经纬度
      map: map, // 将标记添加到地图上
      title: "San Francisco" // 设置标记的标题
    });
  }
</script>

确保将 YOUR_API_KEY 替换为你之前获取的 Google 地图 API 密钥。

4. 调用初始化函数

在页面的底部，添加以下 JavaScript 代码来调用初始化函数：

<script>
  // 当页面加载完成时调用初始化函数
  window.onload = function() {
    initMap();
  }
</script>

这将在网页加载完毕后自动调用 initMap() 函数来显示地图和标记。

添加完整的 HTML 代码后，你的网站将会显示一个带有标记的 Google 地图。

以上就是将带有标记的 Google 地图添加到网站的步骤和代码。商业使用的话，请注意遵循 Google 地图 API 的使用条款和政策。