90 lines
2.6 KiB
Plaintext
90 lines
2.6 KiB
Plaintext
<div class="row center-align">
|
|
<h2>U kojem naselju tražite nekretninu?</h2>
|
|
</div>
|
|
|
|
<div class="row center-align" >
|
|
<div id="floating-panel">
|
|
<input id="address" type="textbox" value="">
|
|
<input id="submit" type="button" value="Trazi">
|
|
</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="btnsubmit" 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 />
|
|
</form>
|
|
<script>
|
|
|
|
|
|
var map;
|
|
var municipality = "<%= municipality%>";
|
|
var defaultAddress = document.getElementById('address');
|
|
|
|
var BOSNIA_BOUNDS = {
|
|
north: 45.70,
|
|
south: 41.69,
|
|
west: 15.55,
|
|
east: 20.77,
|
|
};
|
|
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: { lat: -34.397, lng: 150.644 },
|
|
zoom: 11,
|
|
restriction: {
|
|
latLngBounds: BOSNIA_BOUNDS,
|
|
strictBounds: false,
|
|
},
|
|
});
|
|
var geocoder = new google.maps.Geocoder();
|
|
|
|
document.getElementById('submit').addEventListener('click', function () {
|
|
geocodeAddress(geocoder, map);
|
|
});
|
|
|
|
function geocodeAddress(geocoder, resultsMap) {
|
|
var address = document.getElementById('address').value;
|
|
geocoder.geocode({ 'address': address }, function (results, status) {
|
|
if (status === 'OK') {
|
|
resultsMap.setCenter(results[0].geometry.location);
|
|
var marker = new google.maps.Marker({
|
|
map: resultsMap,
|
|
position: results[0].geometry.location
|
|
});
|
|
} else {
|
|
alert('Geocode was not successful for the following reason: ' + status);
|
|
}
|
|
});
|
|
}
|
|
|
|
defaultAddress.value = municipality;
|
|
geocodeAddress(geocoder, map);
|
|
|
|
$(document).ready(() => {
|
|
$("#btnsubmit").click(() => {
|
|
var bounds = map.getBounds();
|
|
|
|
$("#north").val(bounds.na.l);
|
|
$("#south").val(bounds.na.j);
|
|
$("#east").val(bounds.ia.l);
|
|
$("#west").val(bounds.ia.j);
|
|
|
|
$("#form-map-output").submit();
|
|
});
|
|
});
|
|
|
|
|
|
}
|
|
</script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAna8ohfV2HBMcxGk_29vqxU5Z_bDickqg&callback=initMap"
|
|
async defer></script>
|
|
</div> |