Initial version

geogame/templates/main/round.html

@@ -0,0 +1,89 @@
+{% 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 %}