<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Google Maps KML Example</title>
<!– Add the Google Maps JavaScript API –>
<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY”></script>
<style>
/* Style the map container */
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h3>Map Displaying KML Layer</h3>
<div id=”map”></div>
<script>
// Initialize the map
function initMap() {
// Set map center (coordinates from your KML file)
const center = { lat: 42.6720452, lng: 21.1173933 };
// Create a new map instance
const map = new google.maps.Map(document.getElementById(“map”), {
zoom: 15, // Adjust the zoom level as needed
center: center
});
// Load KML layer
const kmlLayer = new google.maps.KmlLayer({
url: “URL_OF_YOUR_KML_FILE”, // Replace with the hosted URL of your KML file
map: map
});
// Optionally, listen for KML layer errors
google.maps.event.addListener(kmlLayer, “status_changed”, function () {
if (kmlLayer.getStatus() !== google.maps.KmlLayerStatus.OK) {
alert(“Error loading KML: ” + kmlLayer.getStatus());
}
});
}
// Call the initMap function when the window loads
window.onload = initMap;
</script>
</body>
</html>