📌  相关文章
📜  如何将 Google 地图添加到网站？(1)

📅  最后修改于: 2023-12-03 15:24:43.140000             🧑  作者: Mango

如何将 Google 地图添加到网站？

Google 地图是一个广泛使用的工具，可以帮助用户查找特定位置，浏览地图，并获取路线方向。如果您希望向您的网站添加Google 地图以方便您的用户，可以按照以下步骤进行操作。

步骤 1: 获取 Google 地图 API 密钥

要使用 Google 地图 API，请首先获取 API 密钥：

  1. 打开 https://console.cloud.google.com/
  2. 如果您尚未登录，请使用您的 Google 帐户登录。
  3. 创建一个新的项目，然后单击该项目以选择它。
  4. 在“API 和服务”下，单击“凭据”选项卡。
  5. 单击“创建凭据”，然后选择“API 密钥”。
  6. 在“创建 API 密钥”对话框中，选择“服务器 API 密钥”。
  7. 输入您的网站的 IP 地址，然后单击“创建”。如果您的网站已设置域名，请输入域名。
  8. 您将会看到一个 API 密钥，将其保存下来。
步骤 2: 添加 Google 地图到网站

接下来，您可以将 Google 地图添加到您的网站中。在以下代码片段中：

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    <style>
        #map {
            height: 100%;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
      function initMap() {
        var myLatLng = {lat: 40.748817, lng: -73.985428};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'My Location!'
        });
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

替换“YOUR_API_KEY”为您在第一步中获取的 API 密钥。

返回的代码片段
# 添加样式
```css
<style>
    #map {
        height: 100%;
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

# 主页面 HTML
```html
<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    # 引用样式
    <style>
        #map {
            height: 100%;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    # 添加地图容器
    <div id="map"></div>
    # 初始化地图的js代码
    <script>
      function initMap() {
        var myLatLng = {lat: 40.748817, lng: -73.985428};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'My Location!'
        });
      }
    </script>
    # 引用Google Maps API的js代码
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>