refactor: prep for fallback to organisation latlng

people/static/js/map.js

@@ -1,6 +1,6 @@
 const marker_fill_alpha = 1.0;
 const marker_edge_colour = 'white';
-const marker_fill_colour =  'gray';
+const marker_fill_colour = 'gray';
 
 // Size of the arrow markers used on the map
 const marker_scale = 9;
@@ -10,63 +10,93 @@ const marker_label_offset = 0.27 * marker_scale;
 const marker_edge_alpha = 1.0;
 const marker_edge_width = 1.0;
 
-let map = null
+let map = null;
+let selected_marker_info = null;
+
+function createMarker(map, marker_data) {
+    // Get the lat-long position from the data
+    const lat_lng = new google.maps.LatLng(marker_data.lat, marker_data.lng);
+
+    const marker = new google.maps.Marker({
+        position: lat_lng,
+        map: map,
+        icon: {
+            path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
+            strokeColor: marker_edge_colour,
+            strokeWeight: marker_edge_width,
+            strokeOpacity: marker_edge_alpha,
+            fillColor: marker_fill_colour,
+            fillOpacity: marker_fill_alpha,
+            scale: marker_scale,
+            labelOrigin: new google.maps.Point(0, -marker_label_offset)
+        },
+    });
+
+    marker.info = new google.maps.InfoWindow({
+        content: "<div id='content'>" +
+            "<h3><a href=" + marker_data.url + ">" + marker_data.name.replace('&apos;', "'") + "</a></h3>" +
+            "</div>"
+    });
+
+    // We bind a listener to the current marker so that if it's clicked, it checks for an open info window,
+    // closes it, then opens the info window attached to it specifically. Then sets that as the last window.
+    google.maps.event.addListener(marker, 'click', function () {
+        if (selected_marker_info) {
+            selected_marker_info.close();
+        }
+
+        selected_marker_info = this.info;
+        this.info.open(map, this);
+    })
+
+    return marker;
+}
+
+function search_missing_locations(map, markers_data) {
+    service = new google.maps.places.PlacesService(map)
+
+    for (let data of markers_data) {
+        if (data.organisation !== null && (data.lat === null || data.lng === null)) {
+            let query = data.organisation;
+            if (data.country !== null) {
+                query += ' ' + data.country;
+            }
+
+            const request = {
+                query: query,
+                fields: ['name', 'geometry'],
+            };
+
+            service.findPlaceFromQuery(request, (results, status) => {
+                if (status === google.maps.places.PlacesServiceStatus.OK) {
+                    for (let i = 0; i < results.length; i++) {
+                        // createMarker(results[i]);
+                        console.log(results[i])
+                    }
+                    map.setCenter(results[0].geometry.location);
+                }
+            });
+
+            break;
+        }
+    }
+}
 
 // The function called when Google Maps starts up
 function initMap() {
-    // const centre_latlng = new google.maps.LatLng(settings.centre_lat, settings.centre_lng);
-    // The map, centered at Soton
     map = new google.maps.Map(
         // document.getElementById('map'), { zoom: settings.zoom, center: centre_latlng });
         document.getElementById('map'));
 
     const bounds = new google.maps.LatLngBounds()
     const markers_data = JSON.parse(
-        document.getElementById('map-markers').textContent
-        ).filter(data => data.lat !== null && data.lng !== null);
+        document.getElementById('map-markers').textContent)
+    search_missing_locations(map, markers_data);
 
     // For each data entry in the json...
-    for (const pin_data of markers_data) {
-        // Get the lat-long position from the data
-        const lat_lng = new google.maps.LatLng(pin_data.lat, pin_data.lng);
-        console.log(lat_lng)
-
-        // Generate a new marker
-        const marker = new google.maps.Marker({
-            position: lat_lng,
-            map: map,
-            icon: {
-                path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
-                strokeColor: marker_edge_colour,
-                strokeWeight: marker_edge_width,
-                strokeOpacity: marker_edge_alpha,
-                fillColor: marker_fill_colour,
-                fillOpacity: marker_fill_alpha,
-                scale: marker_scale,
-                labelOrigin: new google.maps.Point(0, -marker_label_offset)
-            },
-        });
-
-        console.log(marker)
-
+    for (const marker_data of markers_data) {
+        const marker = createMarker(map, marker_data);
         bounds.extend(marker.position)
-
-        // Build the info window content to tell the user the last time it was visited.
-        marker.info = new google.maps.InfoWindow({
-            content: "<div id='content'>" +
-                "<h3><a href=" + pin_data.url + ">" + pin_data.name.replace('&apos;', "'") + "</a></h3>" +
-                "</div>"
-        });
-
-        // We bind a listener to the current marker so that if it's clicked, it checks for an open info window,
-        // closes it, then opens the info window attached to it specifically. Then sets that as the last window.
-        google.maps.event.addListener(marker, 'click', function () {
-            if (last_info) {
-                last_info.close();
-            }
-            last_info = this.info;
-            this.info.open(map, this);
-        })
     }
 
     map.fitBounds(bounds)
@@ -75,10 +105,6 @@ function initMap() {
         map.setZoom(max_zoom)
     }
 
-
-    // Set the last info window to null
-    var last_info = null;
-
     setTimeout(setMaxZoom, 100)
 }
 

people/templates/people/person/map.html

@@ -7,7 +7,7 @@
     <script src="{% static 'js/map.js' %}"></script>
 
     <script async defer
-            src="https://maps.googleapis.com/maps/api/js?key={{ settings.GOOGLE_MAPS_API_KEY }}&callback=initMap"
+            src="https://maps.googleapis.com/maps/api/js?key={{ settings.GOOGLE_MAPS_API_KEY }}&libraries=places&callback=initMap"
             type="text/javascript"></script>
 {% endblock %}
 

people/views/person.py

@@ -106,15 +106,21 @@ def get_map_data(person: models.Person) -> typing.Dict[str, typing.Any]:
     try:
         latitude = answer_set.latitude or None
         longitude = answer_set.longitude or None
+        organisation = answer_set.organisation.name or None
+        country = answer_set.country_of_residence.name or None
 
     except AttributeError:
         latitude = None
         longitude = None
+        organisation = None
+        country = None
 
     return {
         'name': person.name,
         'lat': latitude,
         'lng': longitude,
+        'organisation': organisation,
+        'country': country,
         'url': reverse('people:person.detail', kwargs={'pk': person.pk})
     }