{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- META -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>Service Inquiry Community</title>
<!-- FONT -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700" rel="stylesheet">
{% include 'base/css.html' %}
</head>
<body>
{% include 'includes/header.html' %}
{% block base_head %}{% endblock %}
{% block content %}{% endblock %}
{% include 'includes/footer.html' %}
{% include 'base/js.html' %}
{% block javascript %}
{% endblock %}
<script>
// suppose the `id` attribute of element is `message_container`.
var message_ele = document.getElementsByClassName("messages");
setTimeout(function(){
// message_ele.style.display = "none";
$('.messages').css('display', 'none');
}, 3000);
// Timeout is 3 sec, you can change it
var input = document.getElementById( 'file-upload' );
var infoArea = document.getElementById( 'file-upload-filename' );
input.addEventListener( 'change', showFileName );
function showFileName( event ) {
// the change event gives us the input it occurred in
var input = event.srcElement;
// the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here.
var fileName = input.files[0].name;
// use fileName however fits your app best, i.e. add it into a div
infoArea.textContent = ' ' + fileName;
}
</script>
<style>
.gmap3 {
margin: 20px auto;
border: 1px dashed #C0C0C0;
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGajOunLufQqrMvTt1ov35C7Ci5o9VPII"></script>
<script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <form id="location-form">
<input type="text" id="location-input" class="form-control form-control-lg">
<br>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form> -->
<div class="card-block" id="formatted-address"></div>
<div class="card-block" id="address-components"></div>
<div class="card-block" id="geometry"></div>
<script>
// Call Geocode
// geocode();
// Get location form
//var locationForm = document.getElementById('location-form');
// Listen for submiot
//locationForm.addEventListener('submit', geocode);
$(function() {
//function geocode(e){
// Prevent actual submit
//e.preventDefault();
var map;
var location = document.getElementById('location-input').value;
axios.get('https://maps.googleapis.com/maps/api/geocode/json',{
params:{
address:location,
key:'AIzaSyBGajOunLufQqrMvTt1ov35C7Ci5o9VPII'
}
}).then(function(response) {
// Log full response
console.log(response);
// Formatted Address
var formattedAddress = response.data.results[0].formatted_address;
var formattedAddressOutput = `
<ul class="list-group">
<li class="list-group-item">${formattedAddress}</li>
</ul>
`;
// Address Components
var addressComponents = response.data.results[0].address_components;
var addressComponentsOutput = '<ul class="list-group">';
for(var i = 0;i < addressComponents.length;i++){
addressComponentsOutput += `
<li class="list-group-item"><strong>${addressComponents[i].types[0]}</strong>: ${addressComponents[i].long_name}</li>
`;
}
addressComponentsOutput += '</ul>';
// Geometry
var lat = response.data.results[0].geometry.location.lat;
var lng = response.data.results[0].geometry.location.lng;
// var latlng = new google.maps.LatLng(lat, lng);
// var mapOptions = {
// zoom: 8,
// center: latlng
// }
var locationRio = {lat: lat, lng: lng};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: locationRio,
gestureHandling: 'cooperative'
});
// map.setCenter(response.data.results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: locationRio,
title:location
});
var geometryOutput = `
<ul class="list-group">
<li class="list-group-item"><strong>Latitude</strong>: ${lat}</li>
<li class="list-group-item"><strong>Longitude</strong>: ${lng}</li>
</ul>
`;
// Output to app
//document.getElementById('formatted-address').innerHTML = formattedAddressOutput;
//document.getElementById('address-components').innerHTML = addressComponentsOutput;
//document.getElementById('geometry').innerHTML = geometryOutput;
})
.catch(function(error){
console.log(error);
});
});
//}
</script>
<script>
// suppose the `id` attribute of element is `message_container`.
var message_ele = document.getElementsByClassName("success");
setTimeout(function(){
// message_ele.style.display = "none";
$('.success').css('display', 'none');
}, 5000);
// Timeout is 3 sec, you can change it
</script>
</body>
</html>