90 lines
2.3 KiB
HTML
90 lines
2.3 KiB
HTML
{% extends 'game_base.html' %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{message.tags}}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
|
|
<div id="map" class="map"></div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
|
|
<div id="map2" class="map"></div>
|
|
|
|
<form 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-block">Make Guess</button>
|
|
</form>
|
|
|
|
<form action="{% url 'game:remove-coord' game_pk=game_pk round_pk=round_pk %}" method="POST">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-warning btn-block">Broken Streetview</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</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
|
|
});
|
|
};
|
|
}
|
|
|
|
</script>
|
|
|
|
<script async defer
|
|
src="https://maps.googleapis.com/maps/api/js?key={{user.api_key}}&callback=initializeMaps">
|
|
</script>
|
|
|
|
{% endblock %}
|