Last active
September 29, 2025 21:37
-
-
Save ramsesoriginal/1a374ebd273049c0df07badde46e36d9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Clean map with MyMaps KML</title> | |
| <meta name="viewport" content="initial-scale=1, width=device-width" /> | |
| <style> | |
| /* full-screen map */ | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map { | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| /* optional: small attribution / link in corner */ | |
| .top-right { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| z-index: 5; | |
| background: rgba(255,255,255,0.9); | |
| padding: 6px 8px; | |
| border-radius: 6px; | |
| font-family: Arial, sans-serif; | |
| font-size: 13px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div class="top-right">Map: My custom layers (KML)</div> | |
| <script> | |
| // Put your style JSON here (yours from the message) | |
| const cleanStyle = [ | |
| { | |
| "featureType": "administrative.land_parcel", | |
| "stylers": [{"visibility": "off"}] | |
| }, | |
| { | |
| "featureType": "administrative.neighborhood", | |
| "stylers": [{"visibility": "off"}] | |
| }, | |
| { | |
| "featureType": "poi", | |
| "elementType": "labels.text", | |
| "stylers": [{"visibility": "off"}] | |
| }, | |
| { | |
| "featureType": "road", | |
| "elementType": "labels", | |
| "stylers": [{"visibility": "off"}] | |
| }, | |
| { | |
| "featureType": "water", | |
| "elementType": "labels.text", | |
| "stylers": [{"visibility": "off"}] | |
| } | |
| ]; | |
| // Replace these two values | |
| const KML_URL = "https://www.google.com/maps/d/kml?mid=1ZEpKKCIiUBABCfUGlaOUnsR63N6op90&forcekml=1"; // or your hosted KML | |
| // NOTE: If the KML_URL returns a 404 or won't load, make sure the My Map is shared publicly or host the KML yourself. | |
| function initMap() { | |
| // center fallback (will be overridden by KML if preserveViewport:true) | |
| const center = { lat: 48.137154, lng: 11.576124 }; // change if you want a different center | |
| const map = new google.maps.Map(document.getElementById('map'), { | |
| center, | |
| zoom: 12, | |
| mapTypeControl: false, | |
| fullscreenControl: true, | |
| streetViewControl: false, | |
| }); | |
| // apply styled map type | |
| const styledMapType = new google.maps.StyledMapType(cleanStyle, { name: 'Clean' }); | |
| map.mapTypes.set('clean_map', styledMapType); | |
| map.setMapTypeId('clean_map'); | |
| // load your My Maps KML as overlay | |
| const kmlLayer = new google.maps.KmlLayer({ | |
| url: KML_URL, | |
| map: map, | |
| preserveViewport: false, // set true if you don't want KML to change zoom/center | |
| suppressInfoWindows: false | |
| }); | |
| kmlLayer.addListener('status_changed', () => { | |
| const status = kmlLayer.getStatus(); | |
| if (status !== google.maps.KmlLayerStatus.OK) { | |
| console.warn('KML Layer status:', status); | |
| } | |
| }); | |
| } | |
| </script> | |
| <!-- | |
| Replace YOUR_API_KEY below with your Google Maps JavaScript API key. | |
| Ensure the Maps JavaScript API is enabled for the key in Google Cloud Console. | |
| --> | |
| <script async | |
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfnPhMYm4EINfiKro3OrMRuMD0hTuJ9-Q&callback=initMap&v=weekly"> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment