HTML 如何向网站添加谷歌地图

本文旨在向网站添加谷歌地图。以下是添加谷歌地图到网站的步骤。

生成API密钥
创建地图的HTML容器
在HTML文档中添加Google的外部脚本
编写JavaScript代码将地图放置在容器中
1.生成API密钥

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

访问谷歌云控制台的谷歌地图部分。
进入左侧菜单的凭据部分。
点击导航栏下面的“创建凭据”按钮。
选择“API密钥”生成一个新的API密钥。
复制密钥并保存以供将来使用。

HTML 如何向网站添加谷歌地图

2. 为地图创建一个HTML容器

在生成API密钥后，我们将创建一个HTML div。在这个div内，我们的地图将保持不变。我们将按照以下步骤进行操作：

创建一个新的HTML文档。
在body部分内创建一个空的div，并为其指定一个特定的ID以进行样式设置。在我们的示例中，给定的具体ID是’map’，因为它将包含地图。
创建一个style标签并设置div的大小。

3. 在HTML文档中添加谷歌的外部脚本

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

<script src=   
“https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly”   
async>   
</script>

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

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

初始化一个名为 initMap() 的函数。此函数名不能更改，因为它是Google预定义的指示符，用于在网页加载时初始化和添加地图。
在该函数内初始化一个对象，该对象包含我们希望在地图中显示的位置的纬度和经度。
创建一个新的 google.maps.Map 对象，该对象需要容器元素、存储中心位置和地图缩放级别的对象。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style type="text/css"> 
  
        /* Set the size of the div element  
        that contains the map */ 
        #map { 
            height: 400px; 
            width: 400px; 
        } 
          
        h2 { 
            color: #308d46; 
        } 
    </style> 
</head> 
  
<body> 
    <h2> 
        Add Google Map on Your  
        Webpage: Geeksforgeeks 
    </h2> 
  
    <!--The div element for the map -->
    <div id="map"></div> 
  
    <!--Add a script by google -->
    <script src= 
"https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly" 
        async> 
    </script> 
  
    <script> 
  
        // 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, 
            }); 
        } 
    </script> 
</body> 
  
</html>

输出：

HTML 如何向网站添加谷歌地图