let autocomplete; let map; let places; let geocoder; let marker =false; //Initialy no marker on map const editingRealEstate = <%- editingRealEstate %>; 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); //Move map and marker to already selected position if in editing mode if( editingRealEstate===true) { console.log('Editujem mapu!'); setMarkerToLocation(map, editingRealEstate); } //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 setMarkerToLocation(map) { const ESTATE_COORDINATES = ( <%= locationLat %> !==0 && <%= locationLong %> !== 0 ) ? { lat: <%= locationLat %>, lng: <%= locationLong %> }: { lat: 43.85, //Set to Sarajevo if coordinates are not picked lng: 18.41 }; marker = new google.maps.Marker({ position: ESTATE_COORDINATES, map: map, draggable: true }); // google.maps.event.addListener(marker, 'dragend', function(event){ // markerLocation(); // }); //Zooming map to current location map.setCenter(ESTATE_COORDINATES); map.setZoom(13); } 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; }