old-web/app/views/publishLocation.ejs

<div class="row center-align">
    <h3 class="custom-h3">
        Izaberite lokaciju nekretnine na mapi. 
    </h3>
    <span>(Kliknite ili prevucite oznaku.)</span>
  </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>
  
    <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="lat" id="lat" />
    <input type="hidden" name="lng" id="lng" />

    <input type="hidden" name="locationInput" id="locationInput" />
    <input type="hidden" name="locationInputData" id="locationInputData" />
  
  <script>
    let autocomplete;
    let map;
    let places;
    let geocoder;
    let marker =false; //Initialy no marker on map
  
    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);
      //Add event listener to position marker on map
      google.maps.event.addListener(map, 'click', positionMarker);
      
    }

    function positionMarker(event) {
        let clickedLocation = event.latLng;
        if(marker === false){
            marker = new google.maps.Marker({
                position: clickedLocation,
                map: map,
                draggable: true 
            });
            google.maps.event.addListener(marker, 'dragend', function(event){
                markerLocation();
            });
        } else{
            marker.setPosition(clickedLocation);
        }
    }

    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;
    }
      
  
  </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>