old-web/app/views/location.ejs

<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.
  </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"
    />
  </div>
</div>

<div class="row center-align">
  <div class="col s12">
    <div id="map"></div>
  </div>
</div>

<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
      >
    </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" />
  <input type="hidden" name="locationInput" id="locationInput" />
  <input type="hidden" name="locationInputData" id="locationInputData" />
</form>

<script>
  let autocomplete;
  let map;
  let places;
  let geocoder;

  function locateMe() {
    if (navigator.geolocation) {
      function 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 = {
      north: 45.7,
      south: 41.69,
      west: 15.55,
      east: 20.77
    };
    const SARAJEVO_COORDINATES = {
      lat: 43.85,
      lng: 18.41
    };

    const mapElement = document.getElementById("map");
    const restrictMapPanningToBosniaOnly = {
      latLngBounds: BOSNIA_BOUNDS,
      strictBounds: true
    };
    const initialMapParams = {
      center: SARAJEVO_COORDINATES,
      zoom: 12,
      restriction: restrictMapPanningToBosniaOnly,
      mapTypeControl: false,
      panControl: false,
      zoomControl: true,
      streetViewControl: false
    };
    map = new google.maps.Map(mapElement, initialMapParams);

    const inputElement = document.getElementById("autocompleteInput");
    const restrictAutocompleteResultsToBosniaOnly = { country: "ba" };
    const initialAutocompleteParams = {
      types: ["geocode"],
      componentRestrictions: restrictAutocompleteResultsToBosniaOnly,
      fields: ["geometry", "types", "address_components"]
    };

    autocomplete = new google.maps.places.Autocomplete(
      inputElement,
      initialAutocompleteParams
    );
    autocomplete.bindTo("bounds", map);
    autocomplete.addListener("place_changed", onPlaceChanged);
    pacSelectFirst(inputElement);
    addLocateMeButton(map);

    //After map initialization we check if area is already selected
    //If yes we bound map to show already selected area
    const boundsSelected = <%- boundsSelected %>;
    const selectedLatLngBounds = <%- JSON.stringify(selectedLatLngBounds) %>;

    if (boundsSelected) {
      boundMapToSelected(map, selectedLatLngBounds);
    }
  }

  function addLocateMeButton(map) {
    var parent = document.createElement("div");
    parent.className = "locate-me-container";

    var a = document.createElement("a");
    a.id = "locateMe";
    a.className = "btn-floating";

    var i = document.createElement("i");
    i.innerText = "gps_fixed";
    i.className = "material-icons right";

    a.appendChild(i);
    a.addEventListener("click", locateMe);
    parent.appendChild(a);

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(parent);
  }

  function onPlaceChanged() {
    const place = autocomplete.getPlace();
    if (place.geometry) {
      map.fitBounds(place.geometry.viewport);
      map.setZoom(map.getZoom() + 1);
      $("#locationInputData").val(JSON.stringify(place));
    }
  }

  function pacSelectFirst(input) {
    // store the original event binding function
    const _addEventListener = input.addEventListener
      ? input.addEventListener
      : input.attachEvent;

    function addEventListenerWrapper(type, listener) {
      // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
      // and then trigger the original listener.
      if (type == "keydown") {
        const originalListener = listener;
        listener = function(event) {
          const suggestionSelected = $(".pac-item-selected").length > 0;
          if (event.key == "Enter" && !suggestionSelected) {
            const simulatedDownArrow = $.Event("keydown", {
              keyCode: 40,
              which: 40
            });
            originalListener.apply(input, [simulatedDownArrow]);
          }

          originalListener.apply(input, [event]);
        };
      }

      _addEventListener.apply(input, [type, listener]);
    }

    input.addEventListener = addEventListenerWrapper;
    input.attachEvent = addEventListenerWrapper;
  }
  function boundMapToSelected(map, selectedLatLngBounds) {

    const swBound = new google.maps.LatLng(
      selectedLatLngBounds.swLat,
      selectedLatLngBounds.swLng
    );
    const neBound = new google.maps.LatLng(
      selectedLatLngBounds.neLat,
      selectedLatLngBounds.neLng
    );
    let bounds = new google.maps.LatLngBounds();
    bounds.extend(swBound);
    bounds.extend(neBound);

    map.fitBounds(bounds);
  }

  $(document).ready(function() {
    $("#submit").click(function() {
      const mapBounds = map.getBounds();

      $("#north").val(mapBounds.getNorthEast().lat());
      $("#south").val(mapBounds.getSouthWest().lat());
      $("#east").val(mapBounds.getNorthEast().lng());
      $("#west").val(mapBounds.getSouthWest().lng());

      $("#locationInput").val(
        document.getElementById("autocompleteInput").value
      );

      $("#form-map-output").submit();
    });
  });
</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>