Banner

Πληκτρολόγησε την διευθήνση σου και βρες την υπηρεσία που σου ταιριαζεί!

Χάρτης Υπηρεσιών

Embed

<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Χάρτης Ακτίνας Υπηρεσιών Παράδοσης</title>
<style>
  .map-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh; /* Full viewport height */
  }

  .left-side {
    flex: 1;
    padding: 20px;
    position: relative;
    box-sizing: border-box; /* Include padding in width/height calculations */
  }

  .right-side {
    flex: 2;
    height: 100%; /* Full height */
    box-sizing: border-box; /* Include padding in width/height calculations */
  }

  #map {
    height: 100%;
    width: 100%;
  }

  .left-side p {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .left-side h1, .left-side h2 {
    font-size: 24px;
    margin: 10px 0;
  }

  #suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    z-index: 10;
    max-height: 150px;
    overflow-y: auto;
  }

  .suggestion-item {
    padding: 10px;
    cursor: pointer;
  }

  .suggestion-item:hover {
    background-color: #ddd;
  }

  @media (max-width: 768px) {
    .map-container {
      flex-direction: column;
    }
    .right-side {
      order: -1;
      height: 300px; /* Adjust height for mobile */
    }
  }

  #submitBtn {
  margin-top: 10px;
  padding: 10px 12px; /* Adjusted padding to fit the text better */
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px; /* Adjusted font size to ensure text fits */
  white-space: nowrap; /* Prevents text from wrapping */
}

#addressInput {
  width: calc(100% - 122px); /* Adjusted width to accommodate the button */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

  #submitBtn:hover {
    background-color: #0056b3;
  }
#redirectBtn {
    display: none; /* Hide button initially */
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
  }

  #redirectBtn:hover {
    background-color: #0056b3;
  }
  #addressInput {
    width: calc(100% - 100px); /* Adjust width to accommodate the button */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
  }

  .input-container {
    display: flex;
    align-items: center;
  }

  #statusMessage {
    margin-top: 10px;
    font-size: 18px;
    color: #007bff;
  }

  #redirectBtn {
    display: none; /* Initially hidden */
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
  }

  #redirectBtn:hover {
    background-color: #218838;
  }
</style>
</head>
<body>
  <div class="map-container">
    <div class="left-side">
      <h1>Χάρτης Ακτίνας Υπηρεσιών Παράδοσης</h1>
      <h2>Εισάγετε τη διεύθυνσή σας:</h2>
      <div class="input-container">
        <input type="text" id="addressInput" placeholder="Εισάγετε περιοχή/διεύθηνση παράδοσης.">
        <button id="submitBtn">Έλεγχος</button>
      </div>
      <div class="info-box">
        <p>🟪 Μωβ περιοχή χάρτι - Long Distance Delivery</p>
        <p>🟩 Πράσινη περιοχή χάρτι - Standard Delivery</p>
      </div>
      <p id="statusMessage"></p>
      <button id="redirectBtn">Order Now!</button>
    </div>
    <div class="right-side">
      <div id="map"></div>
    </div>
</div>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVKVDwU-L_3jk9lHbboFIviidG9RVSwUs&libraries=geometry,places&callback=initMap" async defer></script>
  <script>
    let map;
    let autocomplete;
    let serviceAreaPolygon;
    let extendedServiceAreas = [];
    let longDistanceDeliveryAreas = [];

    const serviceAreaPolygonCoords =  [
  { lat: 40.648723, lng: 22.9216127 },
  { lat: 40.6391496, lng: 22.9192954 },
  { lat: 40.6383029, lng: 22.9319122 },
  { lat: 40.6254059, lng: 22.9488206 },
  { lat: 40.6235167, lng: 22.9493356 },
  { lat: 40.6210412, lng: 22.953112 },
  { lat: 40.6102911, lng: 22.9517387 },
  { lat: 40.6106701, lng: 22.962735 },
  { lat: 40.6120384, lng: 22.9810165 },
  { lat: 40.6152961, lng: 22.985308 },
  { lat: 40.6221368, lng: 22.982304 },
  { lat: 40.6315823, lng: 22.9743218 },
  { lat: 40.6347739, lng: 22.9719187 },
  { lat: 40.6384865, lng: 22.9599884 },
  { lat: 40.6430454, lng: 22.9635933 },
  { lat: 40.6591295, lng: 22.968271 },
  { lat: 40.6679838, lng: 22.9469854 },
  { lat: 40.6639474, lng: 22.9349693 },
  { lat: 40.648723, lng: 22.9216127 }
];

    const extendedServiceArea1Coords =[
  { lat: 40.6107725, lng: 22.9639783 },
  { lat: 40.6106701, lng: 22.962735 },
  { lat: 40.6102911, lng: 22.9517387 },
  { lat: 40.598889, lng: 22.9486679 },
  { lat: 40.600274, lng: 22.9572937 },
  { lat: 40.6014794, lng: 22.9644177 },
  { lat: 40.6107725, lng: 22.9639783 }
];

    const extendedServiceArea2Coords = [
  { lat: 40.6384865, lng: 22.9599884 },
  { lat: 40.6395482, lng: 22.959676 },
  { lat: 40.6430454, lng: 22.9635933 },
  { lat: 40.6591295, lng: 22.968271 },
  { lat: 40.6679838, lng: 22.9469854 },
  { lat: 40.6639474, lng: 22.9349693 },
  { lat: 40.6519218, lng: 22.9243138 },
  { lat: 40.6384865, lng: 22.9599884 }
];

    const extendedServiceArea3Coords = [
  { lat: 40.6014794, lng: 22.9644177 },
  { lat: 40.602534, lng: 22.9851229 },
  { lat: 40.6120384, lng: 22.9810165 },
  { lat: 40.6107725, lng: 22.9639783 },
  { lat: 40.6014794, lng: 22.9644177 }
];

    const extendedServiceArea4Coords = [
  { lat: 40.5991357, lng: 22.9508251 },
  { lat: 40.5972458, lng: 22.952016 },
  { lat: 40.5953558, lng: 22.9533356 },
  { lat: 40.5941094, lng: 22.9491405 },
  { lat: 40.5913081, lng: 22.946778 },
  { lat: 40.5902565, lng: 22.9514141 },
  { lat: 40.5894994, lng: 22.9545672 },
  { lat: 40.5914616, lng: 22.966296 },
  { lat: 40.6014794, lng: 22.9644392 },
  { lat: 40.5991357, lng: 22.9508251 }
];

    const longDistanceDelivery1Coords = [
  { lat: 40.6391496, lng: 22.9192954 },
  { lat: 40.648723, lng: 22.9216127 },
  { lat: 40.6639474, lng: 22.9349693 },
  { lat: 40.6679838, lng: 22.9469854 },
  { lat: 40.6600291, lng: 22.9662288 },
  { lat: 40.6846362, lng: 22.9614223 },
  { lat: 40.7153498, lng: 22.9579891 },
  { lat: 40.7392862, lng: 22.9222835 },
  { lat: 40.7370821, lng: 22.8754092 },
  { lat: 40.7033784, lng: 22.8385128 },
  { lat: 40.7299208, lng: 22.7183498 },
  { lat: 40.6049231, lng: 22.721783 },
  { lat: 40.6338496, lng: 22.8503574 },
  { lat: 40.6516944, lng: 22.8996242 },
  { lat: 40.6391496, lng: 22.9192954 }
];

    const longDistanceDelivery2Coords = [
  { lat: 40.6152961, lng: 22.985308 },
  { lat: 40.6120384, lng: 22.9810165 },
  { lat: 40.602534, lng: 22.9851229 },
  { lat: 40.6014794, lng: 22.9644177 },
  { lat: 40.5913244, lng: 22.9664118 },
  { lat: 40.5894994, lng: 22.9545672 },
  { lat: 40.5913081, lng: 22.946778 },
  { lat: 40.5808952, lng: 22.937401 },
  { lat: 40.5539515, lng: 22.9794866 },
  { lat: 40.518166, lng: 22.9928182 },
  { lat: 40.5040708, lng: 22.9732488 },
  { lat: 40.5212978, lng: 22.9540227 },
  { lat: 40.5014603, lng: 22.8609822 },
  { lat: 40.5056371, lng: 22.8300832 },
  { lat: 40.4993718, lng: 22.8170369 },
  { lat: 40.4737823, lng: 22.8390096 },
  { lat: 40.4690811, lng: 22.8530858 },
  { lat: 40.4345959, lng: 22.8613255 },
  { lat: 40.4170852, lng: 22.8870748 },
  { lat: 40.4191763, lng: 22.9378865 },
  { lat: 40.4652939, lng: 22.9440663 },
  { lat: 40.4580908, lng: 22.9832303 },
  { lat: 40.4612255, lng: 23.0038296 },
  { lat: 40.4893003, lng: 23.0029713 },
  { lat: 40.4762437, lng: 23.0426251 },
  { lat: 40.4784635, lng: 23.0711209 },
  { lat: 40.5203647, lng: 23.0606495 },
  { lat: 40.5501709, lng: 23.0538183 },
  { lat: 40.5558889, lng: 23.0298293 },
  { lat: 40.5704948, lng: 23.0243361 },
  { lat: 40.5914524, lng: 23.0437768 },
  { lat: 40.5996317, lng: 23.0138647 },
  { lat: 40.6103186, lng: 23.0109465 },
  { lat: 40.618072, lng: 23.0065691 },
  { lat: 40.6152961, lng: 22.985308 }
];

    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 40.640063, lng: 22.944419 },
        zoom: 12
      });

      serviceAreaPolygon = new google.maps.Polygon({
        paths: serviceAreaPolygonCoords,
        strokeColor: "#00FF00",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#90EE90", // Light green
        fillOpacity: 0.35
      });

      extendedServiceAreas = [
        new google.maps.Polygon({
          paths: extendedServiceArea1Coords,
          strokeColor: "#ADFF2F",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#ADFF2F", // Yellowish green
          fillOpacity: 0.35
        }),
        new google.maps.Polygon({
          paths: extendedServiceArea2Coords,
          strokeColor: "#ADFF2F",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#ADFF2F", // Yellowish green
          fillOpacity: 0.35
        }),
        new google.maps.Polygon({
          paths: extendedServiceArea3Coords,
          strokeColor: "#ADFF2F",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#ADFF2F", // Yellowish green
          fillOpacity: 0.35
        }),
        new google.maps.Polygon({
          paths: extendedServiceArea4Coords,
          strokeColor: "#ADFF2F",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#ADFF2F", // Yellowish green
          fillOpacity: 0.35
        })
      ];

      longDistanceDeliveryAreas = [
        new google.maps.Polygon({
          paths: longDistanceDelivery1Coords,
          strokeColor: "#800080",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#D8BFD8", // Light purple
          fillOpacity: 0.35
        }),
        new google.maps.Polygon({
          paths: longDistanceDelivery2Coords,
          strokeColor: "#800080",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#D8BFD8", // Light purple
          fillOpacity: 0.35
        })
      ];

      serviceAreaPolygon.setMap(map);
      extendedServiceAreas.forEach(area => area.setMap(map));
      longDistanceDeliveryAreas.forEach(area => area.setMap(map));

      autocomplete = new google.maps.places.Autocomplete(document.getElementById('addressInput'));
      autocomplete.bindTo('bounds', map);

      document.getElementById('submitBtn').addEventListener('click', () => {
        geocodeAddress();
      });
    }

    function geocodeAddress() {
      const address = document.getElementById('addressInput').value;
      const geocoder = new google.maps.Geocoder();

      geocoder.geocode({ 'address': address }, (results, status) => {
        if (status === 'OK') {
          const position = results[0].geometry.location;
          map.setCenter(position);

          let message = '';
          let buttonLink = '';

          if (google.maps.geometry.poly.containsLocation(position, serviceAreaPolygon)) {
            message = 'Η περιοχή βρίσκεται εντός της κανονικής ζώνης παράδοσης - Standard Delivery.';
            buttonLink = 'https://form.jotform.com/VivliaSKG/vivliaskg-order'; // Replace with your actual link
          } else if (extendedServiceAreas.some(area => google.maps.geometry.poly.containsLocation(position, area))) {
            message = 'Η περιοχή βρίσκεται εντός της κανονικής ζώνης παράδοσης - Standard Delivery.';
            buttonLink = 'https://form.jotform.com/VivliaSKG/vivliaskg-order'; // Replace with your actual link
          } else if (longDistanceDeliveryAreas.some(area => google.maps.geometry.poly.containsLocation(position, area))) {
            message = 'Η περιοχή βρίσκεται εντός της ζώνης μακρινής παράδοσης - Long Distance Delivery.';
            buttonLink = 'https://vivliaskg.com/new-page'; // Replace with your actual link
          } else {
            message = 'Η περιοχή βρίσκεται εκτός ζώνης παράδοσης.';
            buttonLink = ''; // No link for out of service areas
          }

          document.getElementById('statusMessage').textContent = message;

          const redirectBtn = document.getElementById('redirectBtn');
          if (buttonLink) {
            redirectBtn.style.display = 'block';
            redirectBtn.onclick = () => window.location.href = buttonLink;
          } else {
            redirectBtn.style.display = 'none';
          }
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }

    document.getElementById("submitBtn").addEventListener("click", function() {
      const address = document.getElementById("addressInput").value;
      checkAddressWithinServiceArea(address);
    });

 
  </script>
</body>
</html>

Χάρτης Υπηρεσιών

Χάρτης Ακτίνας Υπηρεσιών Παράδοσης

Εισάγετε τη διεύθυνσή σας:

Μας εμπιστεύονται φοιητητές απο:

Συχνές Ερωτήσεις!