WIP Idea to implement bound map to be equal to selected

app/controllers/location.js

@@ -4,9 +4,28 @@ const getLocation = async (req, res) => {
   const title = "Odaberite lokaciju";
   const nextStep = req.query.nextStep || "/";
 
+  //Check if location data already exists
+  //If it does then  get location is called through edit field query
+  //and map should show already selected location not initial map
+  let selectedLatLngBounds = 0;
+
+  const searchRequest = await currentSearchRequest(req);
+
+  if (!searchRequest || !searchRequest.dataValues) {
+    res.render("notFound", { title: " " });
+    return;
+  }
+  const selectedArea = searchRequest.areaToSearch;
+  const sw = selectedArea.coordinates[0][3];
+  const ne = selectedArea.coordinates[0][1];
+  if (sw[0] && ne[0]) {
+    selectedLatLngBounds = [sw, ne];
+  }
+
   res.render("location", {
     nextStep,
-    title
+    title,
+    selectedLatLngBounds
   });
 };
 

app/views/location.ejs

@@ -1,13 +1,17 @@
 <div class="row center-align">
   <h3>
-  Područje na mapi će biti uključeno u pretragu. Namjestite mapu na ulice
-  koje želite da budu vidljive.
+    Područje na mapi će biti uključeno u pretragu. Namjestite mapu na ulice koje
+    želite da budu vidljive.
   </h3>
 </div>
 
 <div class="row center-align">
   <div class="col s12 m12 l12 xl12">
-    <input id="autocompleteInput" placeholder="Unesite grad, naselje ili ulicu..." type="text" />
+    <input
+      id="autocompleteInput"
+      placeholder="Unesite grad, naselje ili ulicu..."
+      type="text"
+    />
   </div>
 </div>
 
@@ -17,12 +21,17 @@
   </div>
 </div>
 
-<br>
+<br />
 
 <form method="POST" id="form-map-output">
   <div class="row center-align">
     <div class="col s6 push-s3">
-      <a id="submit" href="#" class="welcome-center-button waves-effect waves-light btn">Dalje</a>
+      <a
+        id="submit"
+        href="#"
+        class="welcome-center-button waves-effect waves-light btn"
+        >Dalje</a
+      >
     </div>
   </div>
   <input type="hidden" name="north" id="north" />
@@ -87,6 +96,13 @@
     };
     map = new google.maps.Map(mapElement, initialMapParams);
 
+    //After map initialization we check if area is already selected
+    //If yes we bound map to show selected area
+    console.log(<%= selectedLatLngBounds[0] %>);
+    if (<%= selectedLatLngBounds %>) {
+      map.fitBounds(<%= selectedLatLngBounds %>);
+    }
+
     const inputElement = document.getElementById('autocompleteInput');
     const restrictAutocompleteResultsToBosniaOnly = {'country': 'ba'};
     const initialAutocompleteParams = {
@@ -177,5 +193,8 @@
     });
   });
 </script>
-<script src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.API_MAP_KEY %>&language=bs&libraries=places&callback=initMap" async
-  defer></script>
+<script
+  src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.API_MAP_KEY %>&language=bs&libraries=places&callback=initMap"
+  async
+  defer
+></script>