HTML google地图添加自定义div作为标记

HTML是一种标记语言，用于创建网页的结构和内容。Google地图是一种基于Web的地图服务，可以在网页上显示地图，并提供各种地理信息的展示和交互功能。在Google地图中添加自定义div作为标记，可以通过以下步骤实现：

创建一个HTML文件，并引入Google地图的API库。可以使用以下代码将Google地图API库添加到HTML文件中：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

请将YOUR_API_KEY替换为您自己的Google地图API密钥。

在HTML文件中创建一个div元素，用于容纳地图。可以使用以下代码创建一个具有指定宽度和高度的div元素：

<div id="map" style="width: 100%; height: 400px;"></div>

请根据需要调整div元素的宽度和高度。

在JavaScript中初始化地图，并添加自定义div作为标记。可以使用以下代码初始化地图，并在指定位置添加自定义div作为标记：

<script>
  function initMap() {
    var mapOptions = {
      center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心位置的经纬度
      zoom: 12 // 设置地图缩放级别
    };
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var markerOptions = {
      position: { lat: 37.7749, lng: -122.4194 }, // 设置标记的经纬度
      map: map,
      icon: "path/to/custom-marker.png" // 设置自定义标记的图标
    };
    var marker = new google.maps.Marker(markerOptions);

    var infoWindowOptions = {
      content: "<div>自定义标记的内容</div>" // 设置自定义标记的内容
    };
    var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
    marker.addListener("click", function() {
      infoWindow.open(map, marker);
    });
  }
</script>

请将经纬度、自定义标记的图标路径和内容替换为实际的值。