97 lines
2.9 KiB
Plaintext
97 lines
2.9 KiB
Plaintext
<% include partials/navBar %>
|
|
|
|
<div class="row center-align">
|
|
<div id="floating-panel">
|
|
<div id="locationField">
|
|
<input id="autocompleteInput" placeholder="Lokacija..." type="text" />
|
|
</div>
|
|
</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="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;
|
|
|
|
function initMap() {
|
|
const BOSNIA_BOUNDS = {
|
|
north: 45.70,
|
|
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: false,
|
|
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);
|
|
}
|
|
|
|
function onPlaceChanged() {
|
|
const place = autocomplete.getPlace();
|
|
if (place.geometry) {
|
|
map.panTo(place.geometry.location);
|
|
map.setZoom(15);
|
|
$("#locationInputData").val(JSON.stringify(place));
|
|
}
|
|
}
|
|
|
|
$(document).ready(() => {
|
|
$("#submit").click(() => {
|
|
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=AIzaSyAna8ohfV2HBMcxGk_29vqxU5Z_bDickqg&language=bs&libraries=places&callback=initMap" async
|
|
defer></script>
|
|
</div>
|