如何为网站添加Google地图

要在网站上添加Google地图，您需要首先获取Google地图API密钥，将API密钥添加到HTML文件中，并在`部分添加如下代码：，`html，，`，请确保替换“YOUR_API_KEY”为您的实际API密钥。，在JavaScript代码中创建一个地图对象，设置其中心点和缩放级别，并将其添加到网页上：，`javascript，function initMap() {， var location = {lat: -34.397, lng: 150.644};， var map = new google.maps.Map(document.getElementById('map'), {， zoom: 8,， center: location， });，}，`，在HTML文件中插入一个元素作为地图的容器：，`html，，``，完成这些步骤后，您就可以在网站上看到谷歌地图了。

在数字化时代,将地理信息整合到网站中已经成为一种常见的需求，无论是企业展示地理位置、提供导航服务，还是个人分享旅行经历，Google地图都是一个强大且直观的工具，本文将指导您如何为您的网站添加Google地图，让您的网站更加生动和实用。

获取Google地图API密钥

要开始使用Google地图,首先需要获取Google地图API密钥，请访问Google Cloud Platform控制台（[https://console.cloud.google.com/），创建一个新项目，然后启用“Maps JavaScript API”**，创建密钥后，请妥善保管，因为您后续将需要它来集成地图。

选择嵌入方式

根据您的需求和网站设计风格,可以选择不同的方式嵌入Google地图，以下是三种常见方法：

静态地图标记：

在HTML文件中添加如下代码：

<!DOCTYPE html>
<html>
<head>我的地图</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为您的API密钥。

交互式地图：

使用Google Maps JavaScript API v3创建交互式地图，示例代码如下：

function initMap() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-34.397, 150.644),
    map: map, '我的位置'
  });
}