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

本文的目的是将 Google 地图添加到网站。以下是将 Google 地图添加到网站的步骤。

1. 生成 API 密钥
2. 创建地图的 HTML 容器
3. 在 HTML 文档中添加 google 的外部脚本
4. 编写 JavaScript 代码将地图放入该容器中。

1. 生成 API Key

为了首先从谷歌地图获取位置数据，我们需要一个谷歌地图 API 密钥。从谷歌地图收集数据需要授权。以下是生成 Google Maps API 密钥的步骤：

• 访问 Google Cloud Console 的 Google 地图部分。
• 转到左侧栏菜单的凭据部分。
• 单击导航栏下方的“创建凭据”按钮。
• 选择“API KEY”以生成新的 API KEY。
• 复制密钥并保存以备将来使用。

2. 为地图创建一个 HTML Container

生成 API 密钥后，我们将创建一个 HTML div。在那个 div 中，我们的地图将保留。我们将按照以下步骤执行此操作：

• 创建一个新的 HTML 文档。
• 在 body 部分内创建一个空的 div，并为其指定一个特定的 ID 以用于样式目的。在我们的示例中，给出的特定 ID 是“地图”，因为它将包含地图。
• 创建一个样式标签并设置 div 的大小。

3.在HTML文档中添加google外部脚本

在 HTML 文档中添加以下异步脚本，因为它立即执行并且必须在回调中使用的任何 DOM 元素之后。在脚本 URL 中放置我们之前生成的 API 密钥，替换了“”部分。

4. 编写 JavaScript 代码将地图放入该容器中

创建容器后，我们必须编写 JavaScript 代码，将地图实际放入容器中。这是我们生成地图的主要部分。

• 初始化一个名为initMap()的函数。该名称无法更改，因为此函数名称是 Google 的预构建指标，它会在网页加载时初始化并添加地图。
• 在该函数内部初始化一个对象，该对象包含我们愿意在地图中显示的位置的纬度和经度。
• 创建一个新的google.maps.Map对象，该对象采用容器元素，该对象存储地图的中心位置和缩放比例。

例子：

HTML

  

    
  
        /* Set the size of the div element 
        that contains the map */
        #map {
            height: 400px;
            width: 400px;
        }
          
        h2 {
            color: #308d46;
        }
    

  

    
        Add Google Map on Your 
        Webpage: Geeksforgeeks
    
  
    
    
  
    
    
    
  
    
  
        // Initialize and add the map
        function initMap() {
  
            // The location of Geeksforgeeks office
            const gfg_office = {
                lat: 28.50231,
                lng: 77.40548
            };
  
            // Create the map, centered at gfg_office
            const map = new google.maps.Map(
                    document.getElementById("map"), {
  
                // Set the zoom of the map
                zoom: 17.56,
                center: gfg_office,
            });
        }
    

  

输出：