add locate me button; fix zoom level

app/views/location.ejs

@@ -1,12 +1,15 @@
 <% include partials/navBar %>
 
 <div class="row center-align">
-  <div id="floating-panel">
+  <div class="col s11">
-    <div id="locationField">
+    <input class="col s11" id="autocompleteInput" placeholder="Lokacija..." type="text" />
-      <input id="autocompleteInput" placeholder="Lokacija..." type="text" />
-    </div>
   </div>
-  <div id="map"></div>
+  <div class="col s1">
+    <a id="locateMe" class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">gps_fixed</i></a>
+  </div>
+</div>
+<div id="map"></div>
+<br/>
 </div>
 <form method="POST" id="form-map-output">
   <div class="row center-align">
@@ -25,6 +28,27 @@
   let autocomplete;
   let map;
   let places;
+  let geocoder;
+
+  function locateMe() {
+    if (navigator.geolocation) {
+
+      const onLocationSuccess = (position) => {
+        const coordinates = position && position.coords ? position.coords : null;
+        if (coordinates){
+          const longitude = coordinates.longitude || null;
+          const latitude = coordinates.latitude || null;
+
+          if (longitude && latitude && map){
+            map.setCenter({lat: latitude, lng: longitude});
+            map.setZoom(16);
+          }
+        }
+      };
+
+      navigator.geolocation.getCurrentPosition(onLocationSuccess);
+    }
+  }
 
   function initMap() {
     const BOSNIA_BOUNDS = {
@@ -70,8 +94,7 @@
   function onPlaceChanged() {
     const place = autocomplete.getPlace();
     if (place.geometry) {
-      map.panTo(place.geometry.location);
+      map.fitBounds(place.geometry.viewport);
-      map.setZoom(15);
       $("#locationInputData").val(JSON.stringify(place));
     }
   }
@@ -89,6 +112,7 @@
 
       $("#form-map-output").submit();
     });
+    document.getElementById("locateMe").addEventListener("click", locateMe);
   });
 </script>
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAna8ohfV2HBMcxGk_29vqxU5Z_bDickqg&language=bs&libraries=places&callback=initMap" async