@@ -941,7 +1005,7 @@
const infowindow = new google.maps.InfoWindow();
// Initialize the SearchBox
- const input = document.getElementById('pac-input');
+/* const input = document.getElementById('pac-input');
const searchBox = new google.maps.places.SearchBox(input);
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
@@ -974,7 +1038,148 @@
infowindow.open(map, marker);
fetchStreets(lat, lng);
- });
+ }); */
+
+
+ const input = document.getElementById("pac-input");
+ const suggestions = document.getElementById("suggestions");
+
+ const autocompleteService = new google.maps.places.AutocompleteService();
+ const placesService = new google.maps.places.PlacesService(map);
+
+ let debounceTimer = null;
+
+ input.addEventListener("input", function () {
+
+ clearTimeout(debounceTimer);
+
+ const query = this.value.trim();
+
+ // Hide suggestions
+ if (query.length < 5) {
+
+ suggestions.style.display = "none";
+ suggestions.innerHTML = "";
+
+ return;
+ }
+
+ debounceTimer = setTimeout(function () {
+
+ autocompleteService.getPlacePredictions({
+
+ input: query,
+ bounds: map.getBounds()
+
+ }, showPredictions);
+
+ }, 500);
+
+ });
+
+ function showPredictions(predictions, status) {
+
+ suggestions.innerHTML = "";
+
+ if (
+ status !== google.maps.places.PlacesServiceStatus.OK ||
+ !predictions ||
+ predictions.length === 0
+ ) {
+
+ suggestions.style.display = "none";
+ return;
+ }
+
+ const ul = document.createElement("ul");
+
+ predictions.forEach(function (prediction) {
+
+ const li = document.createElement("li");
+
+ li.innerHTML = prediction.description;
+
+ li.onclick = function () {
+
+ input.value = prediction.description;
+
+ suggestions.style.display = "none";
+
+ loadPlace(prediction.place_id);
+
+ };
+
+ ul.appendChild(li);
+
+ });
+
+ suggestions.appendChild(ul);
+
+ suggestions.style.display = "block";
+
+ }
+
+ function loadPlace(placeId) {
+
+ placesService.getDetails({
+
+ placeId: placeId,
+ fields: [
+ "geometry",
+ "formatted_address",
+ "name"
+ ]
+
+ }, function (place, status) {
+
+ if (status !== google.maps.places.PlacesServiceStatus.OK)
+ return;
+
+ if (marker)
+ marker.setMap(null);
+
+ marker = new google.maps.Marker({
+
+ map: map,
+ position: place.geometry.location
+
+ });
+
+ const lat = place.geometry.location.lat().toFixed(6);
+ const lng = place.geometry.location.lng().toFixed(6);
+
+ document.getElementById("latitude_field").value = lat;
+ document.getElementById("longitude_field").value = lng;
+
+ map.setCenter(place.geometry.location);
+ map.setZoom(15);
+
+ infowindow.setContent(
+ "Latitude : " + lat +
+ "
Longitude : " + lng
+ );
+
+ infowindow.open(map, marker);
+
+ fetchStreets(lat, lng);
+
+ });
+
+ }
+
+ document.addEventListener("click", function (e) {
+
+ if (
+ !suggestions.contains(e.target) &&
+ e.target !== input
+ ) {
+
+ suggestions.style.display = "none";
+
+ }
+
+ });
+
map.addListener("click", function (event) {
const clickedLatLng = event.latLng;
diff --git a/src/main/resources/templates/modules/public/form.html b/src/main/resources/templates/modules/public/form.html
index 74ecf65..9e49333 100644
--- a/src/main/resources/templates/modules/public/form.html
+++ b/src/main/resources/templates/modules/public/form.html
@@ -100,7 +100,7 @@
max-width: 100%;
}
- #pac-input {
+/* #pac-input {
position: absolute;
top: 10px;
left: 50%;
@@ -124,8 +124,20 @@
background-color: white;
border-radius: 4px;
padding: 0;
- /* Removed extra padding to match the input width */
- }
+ } */
+
+ #pac-input {
+
+ width: 100%;
+ padding: 10px;
+
+ border: 1px solid #ccc;
+ border-radius: 4px;
+
+ font-size: 15px;
+
+ box-sizing: border-box;
+ }
#search-box {
width: 100%;
@@ -139,7 +151,7 @@
/* Makes sure padding is considered in width */
}
- #suggestions {
+ /* #suggestions {
border: 1px solid #ccc;
border-radius: 4px;
max-height: 200px;
@@ -148,9 +160,7 @@
background-color: white;
display: none;
width: 100%;
- /* Matches the width of the container and input */
box-sizing: border-box;
- /* Ensures the width includes borders and padding */
}
#suggestions ul {
@@ -166,7 +176,59 @@
#suggestions ul li:hover {
background-color: #f0f0f0;
- }
+ } */
+
+ #suggestions {
+
+ width: 100%;
+
+ display: none;
+
+ background: #fff;
+
+ border: 1px solid #ccc;
+
+ border-top: none;
+
+ max-height: 220px;
+
+ overflow-y: auto;
+
+ box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
+ }
+
+ #suggestions ul {
+
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ #suggestions li {
+
+ padding: 10px 12px;
+
+ cursor: pointer;
+
+ border-bottom: 1px solid #eee;
+ }
+
+ #suggestions li:hover {
+
+ background: #f5f5f5;
+ }
+
+ #search-container {
+
+ position: absolute;
+ top: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+
+ width: 420px;
+
+ z-index: 1000;
+ }
.multi-select-dropdown {
position: relative;
@@ -408,13 +470,14 @@
-->
+
+
+
@@ -900,6 +963,8 @@
document.getElementById("backBtn").addEventListener("click", function () {
window.location.href = "/greencommittee/home";
});
+
+
//Maximum file size (10 MB)
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
@@ -951,7 +1016,7 @@
const infowindow = new google.maps.InfoWindow();
// Initialize the SearchBox
- const input = document.getElementById('pac-input');
+/* const input = document.getElementById('pac-input');
const searchBox = new google.maps.places.SearchBox(input);
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
@@ -984,7 +1049,146 @@
infowindow.open(map, marker);
fetchStreets(lat, lng);
- });
+ }); */
+
+ const input = document.getElementById("pac-input");
+ const suggestions = document.getElementById("suggestions");
+
+ const autocompleteService = new google.maps.places.AutocompleteService();
+ const placesService = new google.maps.places.PlacesService(map);
+
+ let debounceTimer = null;
+
+ input.addEventListener("input", function () {
+
+ clearTimeout(debounceTimer);
+
+ const query = this.value.trim();
+
+ // Hide suggestions
+ if (query.length < 5) {
+
+ suggestions.style.display = "none";
+ suggestions.innerHTML = "";
+
+ return;
+ }
+
+ debounceTimer = setTimeout(function () {
+
+ autocompleteService.getPlacePredictions({
+
+ input: query,
+ bounds: map.getBounds()
+
+ }, showPredictions);
+
+ }, 500);
+
+ });
+
+ function showPredictions(predictions, status) {
+
+ suggestions.innerHTML = "";
+
+ if (
+ status !== google.maps.places.PlacesServiceStatus.OK ||
+ !predictions ||
+ predictions.length === 0
+ ) {
+
+ suggestions.style.display = "none";
+ return;
+ }
+
+ const ul = document.createElement("ul");
+
+ predictions.forEach(function (prediction) {
+
+ const li = document.createElement("li");
+
+ li.innerHTML = prediction.description;
+
+ li.onclick = function () {
+
+ input.value = prediction.description;
+
+ suggestions.style.display = "none";
+
+ loadPlace(prediction.place_id);
+
+ };
+
+ ul.appendChild(li);
+
+ });
+
+ suggestions.appendChild(ul);
+
+ suggestions.style.display = "block";
+
+ }
+
+ function loadPlace(placeId) {
+
+ placesService.getDetails({
+
+ placeId: placeId,
+ fields: [
+ "geometry",
+ "formatted_address",
+ "name"
+ ]
+
+ }, function (place, status) {
+
+ if (status !== google.maps.places.PlacesServiceStatus.OK)
+ return;
+
+ if (marker)
+ marker.setMap(null);
+
+ marker = new google.maps.Marker({
+
+ map: map,
+ position: place.geometry.location
+
+ });
+
+ const lat = place.geometry.location.lat().toFixed(6);
+ const lng = place.geometry.location.lng().toFixed(6);
+
+ document.getElementById("latitude_field").value = lat;
+ document.getElementById("longitude_field").value = lng;
+
+ map.setCenter(place.geometry.location);
+ map.setZoom(15);
+
+ infowindow.setContent(
+ "Latitude : " + lat +
+ "
Longitude : " + lng
+ );
+
+ infowindow.open(map, marker);
+
+ fetchStreets(lat, lng);
+
+ });
+
+ }
+
+ document.addEventListener("click", function (e) {
+
+ if (
+ !suggestions.contains(e.target) &&
+ e.target !== input
+ ) {
+
+ suggestions.style.display = "none";
+
+ }
+
+ });
map.addListener("click", function (event) {
const clickedLatLng = event.latLng;
@@ -1660,6 +1864,8 @@
}
});
});
+
+