HTML 多标记谷歌地图嵌入API

在本文中，我们将介绍如何使用 HTML 的多标记功能来嵌入谷歌地图API，以方便在网页上显示多个标记点。

阅读更多：HTML 教程

什么是谷歌地图嵌入API？

谷歌地图嵌入API是一种通过在网页上嵌入代码的方式将谷歌地图显示在网页上的方法。通过该API，我们可以在网页上显示地图和标记点，并且可以根据需求自定义地图的样式和功能。

如何使用HTML多标记功能？

使用HTML多标记功能可以在地图上显示多个标记点。下面是一个使用HTML多标记功能的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>多标记谷歌地图示例</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.7749, lng: -122.4194}
      });

      var markers = [
        {lat: 37.7749, lng: -122.4194, title: 'Marker 1'},
        {lat: 37.7833, lng: -122.4167, title: 'Marker 2'},
        {lat: 37.7933, lng: -122.4067, title: 'Marker 3'}
      ];

      markers.forEach(function(marker) {
        new google.maps.Marker({
          position: marker,
          map: map,
          title: marker.title
        });
      });
    }
  </script>
</head>
<body onload="initMap()">
  <div id="map"></div>
</body>
</html>

在上面的示例代码中，我们首先在<head>标签中引入了Google Maps JavaScript API的脚本，并替换了YOUR_API_KEY为我们的API密钥。然后，在<script>标签中定义了一个initMap函数，该函数会在页面加载时被调用。在initMap函数中，我们首先创建了一个地图对象，并指定了地图的初始缩放级别和中心点坐标。接着，我们定义了一个markers数组，用来存储多个标记点的经纬度坐标和标题。最后，我们使用forEach方法遍历markers数组，创建并添加每个标记点到地图上。

在上述代码中，我们使用了一个<div>元素来放置地图，并指定了其id为map。地图会在该<div>元素中进行显示。