feat: add initial location picker to person update

people/templates/people/person/update.html

@@ -1,5 +1,29 @@
 {% extends 'base.html' %}
 
+{% block extra_head %}
+    {% load staticfiles %}
+    <script type="application/javascript">
+        const data = [
+            {
+                name: '{{ person.name }}',
+                lat: '{{ answer_set.latitude }}',
+                lng: '{{ answer_set.longitude }}'
+            },
+        ]
+
+        const settings = {
+            zoom: 8,
+            centre_lat: '{{ answer_set.latitude }}',
+            centre_lng: '{{ answer_set.longitude }}',
+        }
+    </script>
+
+    <script src="{% static 'js/location_picker.js' %}"></script>
+
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ settings.GOOGLE_MAPS_API_KEY }}&callback=initMap"
+                        type="text/javascript"></script>
+{% endblock %}
+
 {% block content %}
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
@@ -22,11 +46,20 @@
         {% csrf_token %}
 
         {% load bootstrap4 %}
-        {% bootstrap_form form %}
+        {% bootstrap_form form exclude='latitude,longitude' %}
+
+        {% bootstrap_field form.latitude %}
+        {% bootstrap_field form.longitude %}
 
         {% buttons %}
             <button class="btn btn-success" type="submit">Submit</button>
         {% endbuttons %}
     </form>
 
+    <hr>
+
+    <div id="map" style="height: 800px; width: 100%"></div>
+
+    <hr>
+
 {% endblock %}