117 lines
3.5 KiB
HTML
117 lines
3.5 KiB
HTML
{% extends 'game_base.html' %}
|
|
|
|
{% block content %}
|
|
|
|
{% if messages %}
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{message.tags}}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<div id="map" class="map panoramaMap"></div>
|
|
|
|
<div id="map2" class="map guessMap"></div>
|
|
|
|
<div class="mapButtons">
|
|
<button id="resizeMap" type="submit" class="btn btn-dark btn-circle btn-xl mapButton" title="Toggle Map">Map</button>
|
|
<button id="returnToStart" type="submit" class="btn btn-info btn-circle btn-xl mapButton" title="Return To Start">Start</button>
|
|
<form class="mapForm" action="{% url 'game:round-view' game_pk=game_pk round_pk=round_pk %}" method="POST">
|
|
{{ form.non_field_errors }}
|
|
{% csrf_token %}
|
|
{{form.as_p}}
|
|
<button type="submit" class="btn btn-primary btn-circle btn-xl mapButton" title="Make Your Guess">Guess</button>
|
|
</form>
|
|
|
|
<form class="mapForm" action="{% url 'game:remove-coord' game_pk=game_pk round_pk=round_pk %}" method="POST" onsubmit="return confirm('Are you sure this streetview is broken?');">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-warning btn-circle btn-xl mapButton" title="Report Broken Streetview">Broken</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function initializeMaps() {
|
|
var panorama = new google.maps.StreetViewPanorama(
|
|
document.getElementById('map'), {
|
|
position: {lat: {{lat}}, lng: {{lng}}},
|
|
addressControl: false,
|
|
linksControl: true,
|
|
enableCloseButton: false,
|
|
showRoadLabels: false,
|
|
});
|
|
|
|
var myLatLng = {lat: 0, lng: 0};
|
|
var centreLatLng = {lat: 30, lng: 0};
|
|
|
|
var map2 = new google.maps.Map(document.getElementById('map2'), {
|
|
zoom: 2,
|
|
center: centreLatLng
|
|
});
|
|
|
|
marker = new google.maps.Marker({
|
|
position: myLatLng,
|
|
map: map2,
|
|
title: 'Your Guess',
|
|
draggable:false,
|
|
});
|
|
|
|
google.maps.event.addListener(map2, 'click', function(event) {
|
|
placeMarker(event.latLng);
|
|
$("#id_guess_lat").val(event.latLng.lat());
|
|
$("#id_guess_lng").val(event.latLng.lng());
|
|
});
|
|
|
|
function placeMarker(location) {
|
|
marker.setMap(null);
|
|
marker = new google.maps.Marker({
|
|
position: location,
|
|
map: map2
|
|
});
|
|
};
|
|
|
|
function returnToStart() {
|
|
panorama.setPosition(new google.maps.LatLng({{lat}},{{lng}}));
|
|
};
|
|
|
|
document.getElementById("returnToStart").addEventListener("click", function(){
|
|
returnToStart()
|
|
});
|
|
|
|
var toggle = false
|
|
document.getElementById("resizeMap").addEventListener("click", function(){
|
|
if (toggle == true) {
|
|
console.log("show it");
|
|
toggle = false;
|
|
document.getElementById('map2').style.minHeight = "40vh";
|
|
document.getElementById('map2').style.height = "40vh";
|
|
document.getElementById('map').style.height = "53vh";
|
|
} else {
|
|
console.log("hide it");
|
|
toggle = true;
|
|
document.getElementById('map2').style.minHeight = "0vh";
|
|
document.getElementById('map2').style.height = "0vh";
|
|
document.getElementById('map').style.height = "93vh";
|
|
};
|
|
google.maps.event.trigger(panorama, 'resize');
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<script async defer
|
|
src="https://maps.googleapis.com/maps/api/js?key={{user.api_key}}&callback=initializeMaps">
|
|
</script>
|
|
|
|
{% endblock %}
|