Changes in map script in both dept and public form

2 months ago · 91166a787d
2 changed files with 436 additions and 25 deletions
--- a/src/main/resources/templates/modules/department/form.html
+++ b/src/main/resources/templates/modules/department/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,12 +176,65 @@

        #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;
        }
        
+        
+
        .dropdown-checkbox-menu {
            position: absolute;
            background: #fff;
@ -419,13 +482,14 @@
                </div>-->

                <div id="mapContainer" style="position: relative; height: 300px;">
-                    <input id="pac-input" class="controls" type="text" placeholder="Search location">
-                    <div id="googleMap" style="height: 100%; width: 100%;"></div>
-                </div>
-                <div id="search-container">
+                 <div id="search-container">
+                    <input id="pac-input" class="controls" type="text" placeholder="Search location - please enter minimum of 5 characters">                 
                    <!-- <input type="text" id="search-box" placeholder="Search for a location..."> -->
                    <div id="suggestions"></div>
                </div>
+                    <div id="googleMap" style="height: 100%; width: 100%;"></div>
+                </div>
+               

                <div class="row mb-3 mt-3" style="row-gap:10px;">
                    <div class="col-md-3">
@ -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 +
+        				"<br>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;
--- 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 @@
 		      </div> -->

                <div id="mapContainer" style="position: relative; height: 300px;">
-                    <input id="pac-input" class="controls" type="text" placeholder="Search location">
-                    <div id="googleMap" style="height: 100%; width: 100%;"></div>
-                </div>
                <div id="search-container">
+                     <input id="pac-input" class="controls" type="text" placeholder="Search location - please enter minimum of 5 characters">               
                    <!-- <input type="text" id="search-box" placeholder="Search for a location..."> -->
                    <div id="suggestions"></div>
                </div>
+                    <div id="googleMap" style="height: 100%; width: 100%;"></div>
+                </div>
+                

                <div class="row mb-3 mt-4" style="row-gap:10px;">
                    <div class="col-md-3">
@ -901,6 +964,8 @@
            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 +
+        				"<br>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 @@
                }
            });
        });
+        
+       
    </script>
 </body>