65 lines
2.4 KiB
HTML
65 lines
2.4 KiB
HTML
|
{% block main %}
|
||
|
|
<!-- Your form markup -->
|
||
|
|
<form name="searchForm" method="post">
|
||
|
|
<fieldset class="uk-fieldset">
|
||
|
|
<div class="uk-margin">
|
||
|
|
{% if home or work or fav1 or fav2 or fav3 %}
|
||
|
|
<select class="uk-select" name="fav_val">
|
||
|
|
<option value="favorites">Select Saved Destinations</option>
|
||
|
|
{% if home %} <option value="home">Home: {{home}}</option> {% endif %}
|
||
|
|
{% if work %} <option value="work">Work: {{work}}</option> {% endif %}
|
||
|
|
{% if fav1 %} <option value="fav1">Favorite 1: {{fav1}}</option> {% endif %}
|
||
|
|
{% if fav2 %} <option value="fav2">Favorite 2: {{fav2}}</option> {% endif %}
|
||
|
|
{% if fav3 %} <option value="fav3">Favorite 3: {{fav3}}</option> {% endif %}
|
||
|
|
</select>
|
||
|
|
{% endif %}
|
||
|
|
<input class="uk-input" type="text" name="addr_val" id="pac-input" placeholder="Search a place">
|
||
|
|
<input class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="submit" value="Search">
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
<!-- Include the Google Maps Places API script conditionally with JavaScript -->
|
||
|
|
<script>
|
||
|
|
// attach gmap_key to variable
|
||
|
|
let gmap = "{{gmap_key}}";
|
||
|
|
|
||
|
|
// Check if gmap_key is defined
|
||
|
|
if (gmap && gmap !== "None") {
|
||
|
|
var script = document.createElement('script');
|
||
|
|
script.src = 'https://maps.googleapis.com/maps/api/js?key={{gmap_key}}&libraries=places&callback=initAutocomplete';
|
||
|
|
script.async = true;
|
||
|
|
script.defer = true;
|
||
|
|
document.head.appendChild(script);
|
||
|
|
|
||
|
|
// Define the callback function for place_changed
|
||
|
|
function onPlaceChanged() {
|
||
|
|
var place = autocomplete.getPlace();
|
||
|
|
|
||
|
|
// Check if the place has a formatted address
|
||
|
|
if (place.formatted_address) {
|
||
|
|
// Set the value of the input field to the formatted address
|
||
|
|
document.getElementById('pac-input').value = place.formatted_address;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Define the autocomplete variable
|
||
|
|
var autocomplete;
|
||
|
|
|
||
|
|
// Define the initAutocomplete function with initial bounds
|
||
|
|
function initAutocomplete() {
|
||
|
|
var center = new google.maps.LatLng({{lat}}, {{lon}});
|
||
|
|
var bounds = new google.maps.Circle({ center: center, radius: 5000 }).getBounds();
|
||
|
|
|
||
|
|
autocomplete = new google.maps.places.Autocomplete(
|
||
|
|
document.getElementById('pac-input'),
|
||
|
|
{
|
||
|
|
bounds: bounds // Set initial bounds here
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
autocomplete.addListener('place_changed', onPlaceChanged);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|