Load Google Maps from JSON<\/title>\n<style>\n html, body { height: 100%; margin:0; padding:0; }\n body { display:flex; flex-direction:column; font-family: Arial, sans-serif; }\n #controls { padding: 10px; background: #f5f5f5; display: flex; flex-direction: column; gap: 10px; }\n #json-input { width: 100%; max-width: 600px; height: 150px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; }\n #load-btn { padding: 10px 20px; border: none; background: #0b5cff; color: white; border-radius: 4px; cursor: pointer; width: 150px; }\n #map-container { flex: 1; position: relative; height: 1000px; } \/* doubled height *\/\n #address-input { position: absolute; top: 10px; left: 10px; z-index: 5; width: 280px; padding: 8px; border-radius: 6px; border: 1px solid #ccc; background: white; }\n #map { width: 100%; height: 100%; }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"controls\">\n <textarea id=\"json-input\" placeholder=\"Paste JSON here (any formatting is accepted, including 'Map Data:')\"><\/textarea>\n <button id=\"load-btn\">Load Map<\/button>\n<\/div>\n\n<div id=\"map-container\">\n <input id=\"address-input\" type=\"text\" placeholder=\"Search address or place\">\n <div id=\"map\"><\/div>\n<\/div>\n\n<script>\nlet map, rectangle, drawingManager, searchBox;\n\n\/\/ Initialize the Google Map\nfunction initMap() {\n map = new google.maps.Map(document.getElementById('map'), {\n center: { lat: 54.6872, lng: 25.2797 },\n zoom: 12\n });\n\n \/\/ Search Box\n const input = document.getElementById('address-input');\n searchBox = new google.maps.places.SearchBox(input);\n map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);\n map.addListener('bounds_changed', () => searchBox.setBounds(map.getBounds()));\n searchBox.addListener('places_changed', () => {\n const places = searchBox.getPlaces();\n if(!places || !places[0].geometry) return;\n map.panTo(places[0].geometry.location);\n map.setZoom(15);\n });\n\n \/\/ Drawing Manager for optional rectangle editing\n drawingManager = new google.maps.drawing.DrawingManager({\n drawingMode: null,\n drawingControl: true,\n drawingControlOptions: {\n position: google.maps.ControlPosition.TOP_CENTER,\n drawingModes: ['rectangle']\n },\n rectangleOptions: { draggable:true, editable:true }\n });\n drawingManager.setMap(map);\n}\n\n\/\/ Clean JSON text and extract the object even if extra text is present\nfunction cleanJSON(raw) {\n let cleaned = raw.trim();\n\n \/\/ Remove everything before the first { and after the last }\n const firstBrace = cleaned.indexOf('{');\n const lastBrace = cleaned.lastIndexOf('}');\n if(firstBrace === -1 || lastBrace === -1) throw new Error('No JSON object found');\n cleaned = cleaned.slice(firstBrace, lastBrace + 1);\n\n \/\/ Remove wrapping quotes if present\n if((cleaned.startsWith('\"') && cleaned.endsWith('\"')) || (cleaned.startsWith(\"'\") && cleaned.endsWith(\"'\"))) {\n cleaned = cleaned.slice(1, -1);\n }\n\n \/\/ Remove escaped quotes and line breaks\n cleaned = cleaned.replace(\/\\\\'\/g, \"'\")\n .replace(\/\\\\\"\/g, '\"')\n .replace(\/\\\\n\/g, '')\n .replace(\/\\\\r\/g, '');\n\n \/\/ Remove extra whitespace\n cleaned = cleaned.replace(\/\\r?\\n|\\r\/g, '').trim();\n\n return cleaned;\n}\n\n\/\/ Load JSON and render map\nfunction loadFromJSON() {\n const raw = document.getElementById('json-input').value;\n let data;\n try {\n const cleaned = cleanJSON(raw);\n data = JSON.parse(cleaned);\n } catch(e) {\n alert('Invalid JSON! Please check formatting.');\n return;\n }\n\n \/\/ Set map center & zoom\n if(data.center && data.zoom) {\n map.setCenter({ lat:data.center.lat, lng:data.center.lng });\n map.setZoom(data.zoom);\n }\n\n \/\/ Draw rectangle if exists\n if(data.rectangle) {\n const bounds = new google.maps.LatLngBounds(\n new google.maps.LatLng(data.rectangle.south, data.rectangle.west),\n new google.maps.LatLng(data.rectangle.north, data.rectangle.east)\n );\n\n if(rectangle) rectangle.setMap(null);\n\n rectangle = new google.maps.Rectangle({\n bounds: bounds,\n editable: true,\n draggable: true,\n strokeColor: \"#FF0000\",\n strokeOpacity: 0.8,\n strokeWeight: 2,\n fillColor: \"#FF0000\",\n fillOpacity: 0.2,\n map: map\n });\n\n map.fitBounds(bounds);\n }\n}\n\n\/\/ Load map when button is clicked\ndocument.getElementById('load-btn').addEventListener('click', loadFromJSON);\n\nwindow.initMap = initMap;\n<\/script>\n\n\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBxesXxFsk5jxJNPv17TwP5j9bSPb-OgwA&libraries=places,drawing&callback=initMap\" async defer><\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Load Google Maps from JSON Load Map<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2717","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/comments?post=2717"}],"version-history":[{"count":13,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2717\/revisions"}],"predecessor-version":[{"id":2730,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2717\/revisions\/2730"}],"wp:attachment":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/media?parent=2717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nLoad Google Maps from JSON<\/title>\n<style>\n html, body { height: 100%; margin:0; padding:0; }\n body { display:flex; flex-direction:column; font-family: Arial, sans-serif; }\n #controls { padding: 10px; background: #f5f5f5; display: flex; flex-direction: column; gap: 10px; }\n #json-input { width: 100%; max-width: 600px; height: 150px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; }\n #load-btn { padding: 10px 20px; border: none; background: #0b5cff; color: white; border-radius: 4px; cursor: pointer; width: 150px; }\n #map-container { flex: 1; position: relative; height: 1000px; } \/* doubled height *\/\n #address-input { position: absolute; top: 10px; left: 10px; z-index: 5; width: 280px; padding: 8px; border-radius: 6px; border: 1px solid #ccc; background: white; }\n #map { width: 100%; height: 100%; }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"controls\">\n <textarea id=\"json-input\" placeholder=\"Paste JSON here (any formatting is accepted, including 'Map Data:')\"><\/textarea>\n <button id=\"load-btn\">Load Map<\/button>\n<\/div>\n\n<div id=\"map-container\">\n <input id=\"address-input\" type=\"text\" placeholder=\"Search address or place\">\n <div id=\"map\"><\/div>\n<\/div>\n\n<script>\nlet map, rectangle, drawingManager, searchBox;\n\n\/\/ Initialize the Google Map\nfunction initMap() {\n map = new google.maps.Map(document.getElementById('map'), {\n center: { lat: 54.6872, lng: 25.2797 },\n zoom: 12\n });\n\n \/\/ Search Box\n const input = document.getElementById('address-input');\n searchBox = new google.maps.places.SearchBox(input);\n map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);\n map.addListener('bounds_changed', () => searchBox.setBounds(map.getBounds()));\n searchBox.addListener('places_changed', () => {\n const places = searchBox.getPlaces();\n if(!places || !places[0].geometry) return;\n map.panTo(places[0].geometry.location);\n map.setZoom(15);\n });\n\n \/\/ Drawing Manager for optional rectangle editing\n drawingManager = new google.maps.drawing.DrawingManager({\n drawingMode: null,\n drawingControl: true,\n drawingControlOptions: {\n position: google.maps.ControlPosition.TOP_CENTER,\n drawingModes: ['rectangle']\n },\n rectangleOptions: { draggable:true, editable:true }\n });\n drawingManager.setMap(map);\n}\n\n\/\/ Clean JSON text and extract the object even if extra text is present\nfunction cleanJSON(raw) {\n let cleaned = raw.trim();\n\n \/\/ Remove everything before the first { and after the last }\n const firstBrace = cleaned.indexOf('{');\n const lastBrace = cleaned.lastIndexOf('}');\n if(firstBrace === -1 || lastBrace === -1) throw new Error('No JSON object found');\n cleaned = cleaned.slice(firstBrace, lastBrace + 1);\n\n \/\/ Remove wrapping quotes if present\n if((cleaned.startsWith('\"') && cleaned.endsWith('\"')) || (cleaned.startsWith(\"'\") && cleaned.endsWith(\"'\"))) {\n cleaned = cleaned.slice(1, -1);\n }\n\n \/\/ Remove escaped quotes and line breaks\n cleaned = cleaned.replace(\/\\\\'\/g, \"'\")\n .replace(\/\\\\\"\/g, '\"')\n .replace(\/\\\\n\/g, '')\n .replace(\/\\\\r\/g, '');\n\n \/\/ Remove extra whitespace\n cleaned = cleaned.replace(\/\\r?\\n|\\r\/g, '').trim();\n\n return cleaned;\n}\n\n\/\/ Load JSON and render map\nfunction loadFromJSON() {\n const raw = document.getElementById('json-input').value;\n let data;\n try {\n const cleaned = cleanJSON(raw);\n data = JSON.parse(cleaned);\n } catch(e) {\n alert('Invalid JSON! Please check formatting.');\n return;\n }\n\n \/\/ Set map center & zoom\n if(data.center && data.zoom) {\n map.setCenter({ lat:data.center.lat, lng:data.center.lng });\n map.setZoom(data.zoom);\n }\n\n \/\/ Draw rectangle if exists\n if(data.rectangle) {\n const bounds = new google.maps.LatLngBounds(\n new google.maps.LatLng(data.rectangle.south, data.rectangle.west),\n new google.maps.LatLng(data.rectangle.north, data.rectangle.east)\n );\n\n if(rectangle) rectangle.setMap(null);\n\n rectangle = new google.maps.Rectangle({\n bounds: bounds,\n editable: true,\n draggable: true,\n strokeColor: \"#FF0000\",\n strokeOpacity: 0.8,\n strokeWeight: 2,\n fillColor: \"#FF0000\",\n fillOpacity: 0.2,\n map: map\n });\n\n map.fitBounds(bounds);\n }\n}\n\n\/\/ Load map when button is clicked\ndocument.getElementById('load-btn').addEventListener('click', loadFromJSON);\n\nwindow.initMap = initMap;\n<\/script>\n\n\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBxesXxFsk5jxJNPv17TwP5j9bSPb-OgwA&libraries=places,drawing&callback=initMap\" async defer><\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Load Google Maps from JSON Load Map<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2717","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/comments?post=2717"}],"version-history":[{"count":13,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2717\/revisions"}],"predecessor-version":[{"id":2730,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2717\/revisions\/2730"}],"wp:attachment":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/media?parent=2717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}