mirror of
https://github.com/sstent/StuTracker.git
synced 2026-01-26 02:22:01 +00:00
50 lines
1.3 KiB
HTML
50 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Google Map with KML Data</title>
|
|
<style>
|
|
/* Ensure the map container takes up the full page */
|
|
#map {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
|
<script>
|
|
function initMap() {
|
|
// Create the map centered at a specific location
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
|
center: {lat: 0, lng: 0},
|
|
zoom: 2
|
|
});
|
|
|
|
// Load the KML file
|
|
var kmlLayer = new google.maps.KmlLayer({
|
|
url: 'https://share.garmin.com/Feed/Share/NDB92',
|
|
map: map
|
|
});
|
|
|
|
// Handle KML layer errors
|
|
kmlLayer.addListener('status_changed', function() {
|
|
if (kmlLayer.getStatus() !== 'OK') {
|
|
alert('Failed to load KML: ' + kmlLayer.getStatus());
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="initMap()">
|
|
<div id="map"></div>
|
|
</body>
|
|
</html>
|