{"id":2659,"date":"2025-11-24T08:23:21","date_gmt":"2025-11-24T08:23:21","guid":{"rendered":"https:\/\/kampinis.lt\/?page_id=2659"},"modified":"2025-11-24T21:28:13","modified_gmt":"2025-11-24T21:28:13","slug":"maps-rectangle","status":"publish","type":"page","link":"https:\/\/kampinis.lt\/en\/maps-rectangle\/","title":{"rendered":"Maps rectangle"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2659\" class=\"elementor elementor-2659\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c212f1 e-flex e-con-boxed e-con e-parent\" data-id=\"0c212f1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-738ba56 elementor-widget elementor-widget-fynode-page-banner\" data-id=\"738ba56\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"fynode-page-banner.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"site-page-header klb-page-banner style-1\"><div class=\"container\"><div class=\"site-page-header-inner\"><h1 class=\"entry-title\">LAIKAS PASIRINKTI \u017dEM\u0116LAP\u012e<\/h1><div class=\"entry-description\"><p>Pa\u017eym\u0117kite kokio mastelio \u017eem\u0117lapio nor\u0117tum\u0117te? M\u016bs\u0173 rekomenduojamas dydis - 1 kv. kilometras.<\/p><\/div><!-- New Arrival --><\/div><!-- site-page-header-inner --><\/div><!-- container --><\/div><!-- site-page-header -->\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<div class=\"elementor-element elementor-element-bd3448d e-flex e-con-boxed e-con e-parent\" data-id=\"bd3448d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72dd62e elementor-widget elementor-widget-html\" data-id=\"72dd62e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Toolbar -->\n<div id=\"toolbar\" style=\"  display:flex;  align-items:center;  gap:10px;  padding:10px 20px;  background: rgba(255, 255, 255, 0.4);   backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);  border-radius: 12px;  box-shadow: 0 4px 20px rgba(0,0,0,0.15);  position:absolute;  top:10px;  left:50%;  transform:translateX(-50%);  z-index:10;  min-width:900px;  max-width:95%;  justify-content: space-between;\">\n  <button id=\"pan-btn\" style=\"background:black;color:white;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;font-weight:600;transition:0.2s;\">Judinti \u017eem\u0117lap\u012f <br>ar formas<\/button>\n  <button id=\"rect-btn\" style=\"background:black;color:white;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;font-weight:600;transition:0.2s;\">Pie\u0161ti <br>sta\u010diakamp\u012f<\/button>\n  <button id=\"square-btn\" style=\"background:black;color:white;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;font-weight:600;transition:0.2s;\">Pie\u0161ti <br>Kvadrat\u0105<\/button>\n  <input id=\"address-input\" type=\"text\" placeholder=\"Ie\u0161koti adreso\" style=\"flex:1;padding:8px 12px;border-radius:6px;border:1px solid rgba(0,0,0,0.2);outline:none;font-size:14px;\">\n  <div id=\"overlay-area\" style=\"    background: rgba(0,0,0,0.8);    color: #fff;    padding:6px 12px;    border-radius:8px;    font-weight:700;    font-size:16px;    white-space: nowrap;  \">Pasirinktas plotas:<br> 0 km\u00b2<\/div>\n<\/div>\n\n<!-- Map container -->\n<div id=\"map-container\" style=\"position:relative;width:100%;height:1125px;margin:0 auto;border-radius:12px;overflow:hidden;\">\n  <div id=\"map\" style=\"width:100%;height:100%;\"><\/div>\n<\/div>\n\n<script>\n(function(){\n  let map, drawingManager, currentOverlay;\n  let currentMode = null;\n\n  function initMap() {\n    const defaultCenter = { lat: 54.6872, lng: 25.2797 };\n    map = new google.maps.Map(document.getElementById('map'), { center: defaultCenter, zoom: 12 });\n\n    \/\/ SearchBox\n    const input = document.getElementById('address-input');\n    const searchBox = new google.maps.places.SearchBox(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\n    drawingManager = new google.maps.drawing.DrawingManager({\n      drawingMode: null,\n      drawingControl: false,\n      rectangleOptions: { draggable:true, editable:true }\n    });\n    drawingManager.setMap(map);\n\n    \/\/ Toolbar buttons\n    document.getElementById('pan-btn').addEventListener('click', () => {\n      currentMode = null;\n      drawingManager.setDrawingMode(null);\n    });\n    document.getElementById('rect-btn').addEventListener('click', () => {\n      currentMode = 'rectangle';\n      drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);\n    });\n    document.getElementById('square-btn').addEventListener('click', () => {\n      currentMode = 'square';\n      drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);\n    });\n\n    \/\/ CF7 hidden input\n    const hiddenInput = document.getElementById('map-json');\n    const areaDiv = document.getElementById('overlay-area');\n\n    function collectData() {\n      const center = map.getCenter();\n      const zoom = map.getZoom();\n      let rectBounds = null;\n      if(currentOverlay){\n        const b = currentOverlay.getBounds();\n        rectBounds = {\n          north: b.getNorthEast().lat(),\n          east: b.getNorthEast().lng(),\n          south: b.getSouthWest().lat(),\n          west: b.getSouthWest().lng()\n        };\n      }\n      return {\n        timestamp: new Date().toISOString(),\n        zoom,\n        center:{lat:center.lat(), lng:center.lng()},\n        rectangle: rectBounds\n      };\n    }\n\n    function updateHiddenField() {\n      if(hiddenInput) hiddenInput.value = JSON.stringify(collectData(), null, 2);\n    }\n\n    \/\/ Calculate overlay area\n    function updateOverlayArea() {\n      if(!currentOverlay) {\n        areaDiv.textContent = \"Pasirinktas plotas: 0 km\u00b2\";\n        return;\n      }\n      const bounds = currentOverlay.getBounds();\n      const ne = bounds.getNorthEast();\n      const sw = bounds.getSouthWest();\n\n      const rectCoords = [\n        new google.maps.LatLng(sw.lat(), sw.lng()),\n        new google.maps.LatLng(sw.lat(), ne.lng()),\n        new google.maps.LatLng(ne.lat(), ne.lng()),\n        new google.maps.LatLng(ne.lat(), sw.lng())\n      ];\n\n      const rectPolygon = new google.maps.Polygon({ paths: rectCoords });\n      const areaMeters2 = google.maps.geometry.spherical.computeArea(rectPolygon.getPath());\n      const areaKm2 = (areaMeters2 \/ 1000000).toFixed(2);\n\n      areaDiv.textContent = \"Pasirinktas plotas: \" + areaKm2 + \" km\u00b2\";\n    }\n\n    google.maps.event.addListener(drawingManager, 'rectanglecomplete', rect => {\n      if(currentOverlay) currentOverlay.setMap(null);\n      currentOverlay = rect;\n\n      if(currentMode === 'square'){\n        const sw = rect.getBounds().getSouthWest();\n        const ne = rect.getBounds().getNorthEast();\n        const latDist = google.maps.geometry.spherical.computeDistanceBetween(\n          new google.maps.LatLng(sw.lat(), sw.lng()),\n          new google.maps.LatLng(ne.lat(), sw.lng())\n        );\n        const lngDist = google.maps.geometry.spherical.computeDistanceBetween(\n          new google.maps.LatLng(sw.lat(), sw.lng()),\n          new google.maps.LatLng(sw.lat(), ne.lng())\n        );\n        const sizeMeters = Math.max(latDist, lngDist);\n        const newNeLat = google.maps.geometry.spherical.computeOffset(sw, sizeMeters, 0);\n        const newNeLng = google.maps.geometry.spherical.computeOffset(sw, sizeMeters, 90);\n        rect.setBounds(new google.maps.LatLngBounds(\n          new google.maps.LatLng(sw.lat(), sw.lng()),\n          new google.maps.LatLng(newNeLat.lat(), newNeLng.lng())\n        ));\n        rect.addListener('bounds_changed', () => {\n          const sw2 = rect.getBounds().getSouthWest();\n          const ne2 = rect.getBounds().getNorthEast();\n          const latDist2 = google.maps.geometry.spherical.computeDistanceBetween(\n            new google.maps.LatLng(sw2.lat(), sw2.lng()),\n            new google.maps.LatLng(ne2.lat(), sw2.lng())\n          );\n          const lngDist2 = google.maps.geometry.spherical.computeDistanceBetween(\n            new google.maps.LatLng(sw2.lat(), sw2.lng()),\n            new google.maps.LatLng(sw2.lat(), ne2.lng())\n          );\n          const maxDist = Math.max(latDist2, lngDist2);\n          const correctedNeLat = google.maps.geometry.spherical.computeOffset(sw2, maxDist, 0);\n          const correctedNeLng = google.maps.geometry.spherical.computeOffset(sw2, maxDist, 90);\n          rect.setBounds(new google.maps.LatLngBounds(\n            new google.maps.LatLng(sw2.lat(), sw2.lng()),\n            new google.maps.LatLng(correctedNeLat.lat(), correctedNeLng.lng())\n          ));\n          updateHiddenField();\n          updateOverlayArea();\n        });\n      }\n\n      updateHiddenField();\n      updateOverlayArea();\n    });\n\n    map.addListener('center_changed', () => { updateHiddenField(); updateOverlayArea(); });\n    map.addListener('zoom_changed', () => { updateHiddenField(); updateOverlayArea(); });\n  }\n\n  window.initMap = initMap;\n})();\n<\/script>\n\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBxesXxFsk5jxJNPv17TwP5j9bSPb-OgwA&libraries=places,drawing,geometry&callback=initMap\" async defer><\/script>\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<div class=\"elementor-element elementor-element-68abc48 e-flex e-con-boxed e-con e-parent\" data-id=\"68abc48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-ad96684 e-con-full e-flex e-con e-child\" data-id=\"ad96684\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c9624b e-con-full e-flex e-con e-child\" data-id=\"9c9624b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5eea397 elementor-widget elementor-widget-fynode-contact-form-7\" data-id=\"5eea397\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"fynode-contact-form-7.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"klb-contact-form contact-form-wrapper\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2695-o1\" lang=\"lt-LT\" dir=\"ltr\" data-wpcf7-id=\"2695\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/2659#wpcf7-f2695-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Kontakt\u0173 forma\" novalidate=\"novalidate\" data-status=\"init\" data-trp-original-action=\"\/en\/wp-json\/wp\/v2\/pages\/2659#wpcf7-f2695-o1\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2695\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.4\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"lt_LT\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2695-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"J\u016bs\u0173 u\u017esakymo numeris\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n<\/p>\n<p><label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"map-style\"><span class=\"wpcf7-form-control wpcf7-radio\"><span class=\"wpcf7-list-item first last\"><label><input type=\"radio\" name=\"map-style\" value=\"Juodai balta\" \/><span class=\"wpcf7-list-item-label\">Juodai balta<\/span><\/label><\/span><\/span><\/span><br \/>\n<img decoding=\"async\" src=\"http:\/\/kampinis.lt\/wp-content\/uploads\/2025\/11\/pvz-juodai-balta.png\" alt=\"JB\" style=\"width:300px;height:auto;margin-left:5px;\" \/><br \/>\n<\/label>\n<\/p>\n<p><label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"map-style\"><span class=\"wpcf7-form-control wpcf7-radio\"><span class=\"wpcf7-list-item first last\"><label><input type=\"radio\" name=\"map-style\" value=\"Spalvota\" \/><span class=\"wpcf7-list-item-label\">Spalvota<\/span><\/label><\/span><\/span><\/span><br \/>\n<img decoding=\"async\" src=\"http:\/\/kampinis.lt\/wp-content\/uploads\/2025\/11\/pvz-spalvotas-.png\" alt=\"Spalvota\" style=\"width:300px;height:auto;margin-left:5px;\" \/><br \/>\n<\/label>\n<\/p>\n<p><label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"map-style\"><span class=\"wpcf7-form-control wpcf7-radio\"><span class=\"wpcf7-list-item first last\"><label><input type=\"radio\" name=\"map-style\" value=\"Visa balta\" \/><span class=\"wpcf7-list-item-label\">Visa balta<\/span><\/label><\/span><\/span><\/span><br \/>\n<img decoding=\"async\" src=\"http:\/\/kampinis.lt\/wp-content\/uploads\/2025\/11\/pvz-visas-baltas.png\" alt=\"Visa balta\" style=\"width:300px;height:auto;margin-left:5px;\" \/><br \/>\n<\/label>\n<\/p>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-comment\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Papildomi komentarai\u2026\" name=\"your-comment\"><\/textarea><\/span>\n<\/p>\n<input class=\"wpcf7-form-control wpcf7-hidden\" id=\"map-json\" value=\"\" type=\"hidden\" name=\"map-json\" \/>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Si\u0173sti \u017eem\u0117lap\u012f gamybai\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/div>\n<\/div><!-- contact-form -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca6d39f e-con-full e-flex e-con e-child\" data-id=\"ca6d39f\" data-element_type=\"container\" data-e-type=\"container\">\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>LAIKAS PASIRINKTI \u017dEM\u0116LAP\u012e Pa\u017eym\u0117kite kokio mastelio \u017eem\u0117lapio nor\u0117tum\u0117te? M\u016bs\u0173 rekomenduojamas dydis \u2013 1 kv. kilometras. Judinti \u017eem\u0117lap\u012f ar formas Pie\u0161ti sta\u010diakamp\u012f Pie\u0161ti Kvadrat\u0105 Pasirinktas plotas: 0 km\u00b2 Juodai balta Spalvota Visa balta<\/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-2659","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2659","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=2659"}],"version-history":[{"count":208,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2659\/revisions"}],"predecessor-version":[{"id":2892,"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/pages\/2659\/revisions\/2892"}],"wp:attachment":[{"href":"https:\/\/kampinis.lt\/en\/wp-json\/wp\/v2\/media?parent=2659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}