Added google maps step

app/views/municipality.ejs

@@ -8,7 +8,7 @@
   <ul class="collection with-header">
     <% for(const municipality of municipalities) { %>
     <li class="collection-item">
-      <div id="<%= municipality.id %>" onclick="saveAndSubmit(this.id)"><%= municipality.name %>
+      <div val="<%= municipality.name %>" id="<%= municipality.id %>" onclick="saveAndSubmit(this.id, municipality.name)"><%= municipality.name %>
         <a href="#" class="secondary-content">
           <i class="material-icons">send</i>
         </a>
@@ -17,12 +17,14 @@
     <% } %>
   </ul>
   <input type="hidden" name="municipality" id="municipality" />
+  <input type="hidden" name="municipalityname" id="municipalityname" />
 </div>
 </form>
 
 <script>
-   function saveAndSubmit(id) {
+   function saveAndSubmit(id, name) {
      $("#municipality").val(id);
+     $("#municipalityname").val(name);
      $("#form-municipality").submit();
    }
 </script>

app/views/neighborhoodMap.ejs

@@ -0,0 +1,90 @@
+<div class="row center-align">
+  <h2>U kojem naselju tražite nekretninu?</h2>
+</div>
+
+<div class="row center-align" >
+  <div id="floating-panel">
+    <input id="address" type="textbox" value="">
+    <input id="submit" type="button" value="Trazi">
+  </div>
+  <div id="map"></div>
+</div>
+  <form method="POST" id="form-map-output">
+    <div class="row center-align">
+      <div class="col s6 push-s3">
+        <a id="btnsubmit" href="#" class="welcome-center-button waves-effect waves-light btn">
+          Dalje
+        </a>
+      </div>
+    </div>
+    <input type="hidden" name="north" id=north />
+    <input type="hidden" name="south" id=south />
+    <input type="hidden" name="east" id=east />
+    <input type="hidden" name="west" id=west />
+  </form>
+  <script>
+
+
+    var map;
+    var municipality = "<%= municipality%>";
+    var defaultAddress = document.getElementById('address');
+
+    var BOSNIA_BOUNDS = {
+      north: 45.70,
+      south: 41.69,
+      west: 15.55,
+      east: 20.77,
+    };
+
+    function initMap() {
+      map = new google.maps.Map(document.getElementById('map'), {
+        center: { lat: -34.397, lng: 150.644 },
+        zoom: 11,
+        restriction: {
+          latLngBounds: BOSNIA_BOUNDS,
+          strictBounds: false,
+        },
+      });
+      var geocoder = new google.maps.Geocoder();
+
+      document.getElementById('submit').addEventListener('click', function () {
+        geocodeAddress(geocoder, map);
+      });
+
+      function geocodeAddress(geocoder, resultsMap) {
+        var address = document.getElementById('address').value;
+        geocoder.geocode({ 'address': address }, function (results, status) {
+          if (status === 'OK') {
+            resultsMap.setCenter(results[0].geometry.location);
+            var marker = new google.maps.Marker({
+              map: resultsMap,
+              position: results[0].geometry.location
+            });
+          } else {
+            alert('Geocode was not successful for the following reason: ' + status);
+          }
+        });
+      }
+
+      defaultAddress.value = municipality;
+      geocodeAddress(geocoder, map);
+
+      $(document).ready(() => {
+        $("#btnsubmit").click(() => {
+          var bounds = map.getBounds();
+
+          $("#north").val(bounds.na.l);
+          $("#south").val(bounds.na.j);
+          $("#east").val(bounds.ia.l);
+          $("#west").val(bounds.ia.j);
+
+          $("#form-map-output").submit();
+        });
+      });
+
+
+    }
+  </script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAna8ohfV2HBMcxGk_29vqxU5Z_bDickqg&callback=initMap"
+    async defer></script>
+</div>