<!DOCTYPE html> <html lang=”da”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Google Kort med Tegning</title> <script src=”https://maps.googleapis.com/maps/api/js?key=DIN_API_NØGLE&libraries=drawing”></script> <style> #map { height: 500px; width: 100%; } </style> </head> <body> <h3>Brug kortet til at tegne et område</h3> <div id=”map”></div> <textarea id=”text” placeholder=”Tilføj tekst her”></textarea> <button id=”save”>Gem område og tekst</button> <script> let map; let drawingManager; let selectedShape; function initMap() { map = new google.maps.Map(document.getElementById(“map”), { center: { lat: 55.6761, lng: 12.5683 }, // København zoom: 10, }); drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [‘polygon’], }, polygonOptions: { fillColor: ‘#ffffff’, fillOpacity: 0.5, strokeWeight: 2, }, }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, ‘polygoncomplete’, (polygon) => { if (selectedShape) { selectedShape.setMap(null); } selectedShape = polygon; }); } document.getElementById(‘save’).addEventListener(‘click’, () => { if(selectedShape){ const text = document.getElementById(“text”).value; const path = selectedShape.getPath().getArray().map(latLng => latLng.toUrlValue()).join(‘;’); alert(`Område (vektorer): ${path}\nTilføjet tekst: ${text}`); // Her kan du tilføje kode til at gemme data til en server eller database. } else { alert(‘Tegn først et område!’); } }); window.onload = initMap; </script> </body> </html>