如何为网站添加Google地图

在数字化时代，网站已经成为我们生活中不可或缺的一部分，为了让用户更直观地了解网站所代表的地理位置，很多网站都选择嵌入Google地图，本文将为您详细解析如何为网站添加Google地图,让您轻松实现地理信息的可视化。

注册Google账户并获取API密钥

您需要访问Google Cloud Platform（GCP）的官方网站，注册一个免费的Google账户，注册完成后，登录到GCP控制台，创建一个新的项目，并申请一个API密钥，API密钥是调用Google地图API的必要凭证,因此请妥善保管。

在网站中嵌入Google地图

获取到API密钥后，您可以选择多种方式将Google地图嵌入到网站中,以下是一些常用的方法：

使用Google Maps JavaScript API

Google提供了一个强大的JavaScript API，可以让我们在网页上显示动态的Google地图,在HTML文件中添加如下代码：

<!DOCTYPE html>
<html>
<head>嵌入式Google地图</title>
 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
 <script>
    function initMap() {
      var location = {lat: -34.397, lng: 150.644};
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: location
      });
      var marker = new google.maps.Marker({
        position: location,
        map: map
      });
    }
  </script>
</head>
<body onload="initMap()">
  <div id="map" style="width: 100%; height: 400px;"></div>
</body>
</html>

将YOUR_API_KEY替换为您在第1步中获取的API密钥，然后保存并在浏览器中打开该HTML文件,您将看到一个包含指定位置的Google地图。

使用iframe标签

除了使用JavaScript API外，您还可以使用HTML的<iframe>标签来嵌入Google地图,在HTML文件中添加如下代码：

<!DOCTYPE html>
<html>
<head>嵌入式Google地图</title>
</head>
<body>
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.9783000000002!2d144.9630580000001!3d-37.813627000000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b311911171%3A0x10754741110330!2sState%20Library%20of%20Victoria!5e0!3m2!1sen!2sau!4v1633200274303!5m2!1sen!2sau" width="600" height="450" frameborder="0" style="border:0!" allowfullscreen="" loading="lazy"></iframe>
</body>
</html>

同样，将YOUR_API_KEY替换为您在第1步中获取的API密钥，保存并在浏览器中打开该HTML文件,您将看到一个包含指定位置的Google地图。