Your KML is not valid, see the KML Reference.
<Placemark id="ID">
<StyleSelector>...</StyleSelector>
</Placemark>
<StyleSelector> is abstract, extended By <Style>
<Style id="ID">
<!-- extends StyleSelector -->
<!-- specific to Style -->
<IconStyle>...</IconStyle>
</Style>
<IconStyle id="ID">
<!-- specific to IconStyle -->
<Icon>
<href>...</href>
</Icon>
</IconStyle>
This works:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Ab Kettleby</name>
<Style id="ID">
<!-- specific to Style -->
<IconStyle>
<Icon>
<href>https://wcsb.nz/wellringers/dove6.bmp</href>
</Icon>
</IconStyle>
</Style>
<Point>
<coordinates>-0.92747,52.79858</coordinates>
</Point>
</Placemark>
</kml>
live example
code snippet:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
},
});
const ctaLayer = new google.maps.KmlLayer({
url: "http://www.geocodezip.com/geoxml3_test/kml/SO_20210121_Icon1.kml",
map: map,
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>KML Layers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
