From d9d6dcd2a56e209863c73e25b950f35f36876658 Mon Sep 17 00:00:00 2001
From: Alex Elmekeev <55494848+aelmekeev@users.noreply.github.com>
Date: Sun, 22 Sep 2024 13:40:25 +0100
Subject: [PATCH] Migrate from decommissioned google.maps.Marker (#167)

---
 css/map.css    | 22 ++++++++++++++++++++++
 js/map.js      | 49 ++++++++++++++++++++++++-------------------------
 map/index.html |  2 +-
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/css/map.css b/css/map.css
index 48132aa..13e5cf5 100644
--- a/css/map.css
+++ b/css/map.css
@@ -28,4 +28,26 @@ body {
   line-height: 36px;
   padding-left: 7px;
   padding-right: 7px;
+}
+
+.year-marker {
+  background-color: #ec4242;
+  border-radius: 25px 25px 25px 25px;
+  color: #FFFFFF;
+  font-size: 9px;
+  padding: 10px 5px;
+  position: relative;
+}
+
+.year-marker::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 94%;
+  transform: translate(-50%, 0);
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #ec4242;
 }
\ No newline at end of file
diff --git a/js/map.js b/js/map.js
index a4d7dd9..a381b1b 100644
--- a/js/map.js
+++ b/js/map.js
@@ -38,15 +38,16 @@ function TodoFilterControl(controlDiv) {
   })
 }
 
-var start, end, longpress
+var start, end, lastClicked
 let map
-let markers = []
+let markers = {}
 
-function toggleTODOMarkers(showOnlyTODO) {
-  for (const marker of markers) {
+function toggleTODOMarkers(showOnlyTODO) {  
+  for (const year in markers) {
+    const marker = markers[year]
     whenOnlyTODO = showOnlyTODO && (marker.todo || marker.replacement)
     whenNotOnlyTODO = !showOnlyTODO && !marker.replacement
-    marker.setMap(whenNotOnlyTODO || whenOnlyTODO ? map : null)
+    marker.mapMarker.setMap(whenNotOnlyTODO || whenOnlyTODO ? map : null)
   }
 }
 
@@ -86,6 +87,7 @@ function initMap() {
     restriction: data.config.borders ? {
       latLngBounds: data.config.borders,
     } : null,
+    mapId: '58733f12c8d8eb66' // https://console.cloud.google.com/google/maps-apis/studio/maps?project=year-on-facade
   })
 
   setCenter(map, year)
@@ -103,36 +105,33 @@ function initMap() {
 
   for (const year in points) {
     const title = year.slice(0, 4)
-    const marker = new google.maps.Marker({
+
+    const yearMarker = document.createElement('div')
+    yearMarker.className = 'year-marker'
+    yearMarker.textContent = title
+
+    const marker = new google.maps.marker.AdvancedMarkerElement({
       position: points[year].latlng,
       map: year.length == 4 ? map : null, // hide replacement initially
       title,
-      label: {
-        text: title,
-        color: 'white',
-        fontSize: '9px',
-      },
-      todo: points[year].notes.startsWith('TODO'),
-      replacement: year.length != 4,
+      content: yearMarker,
     })
     marker.addListener('click', () => {
-      if (longpress) {
+      if (lastClicked == year) {
         const currentUrl = window.location.href
-        window.location.href = `${currentUrl
+        window.location.assign(`${currentUrl
           .replace('/map', '/item')
-          .replace(/[\?&]year=\d+_?/, '')}&year=${marker.getTitle()}`
+          .replace(/[\?&]year=\d+_?/, '')}&year=${marker.title}`)
       } else {
         map.setZoom(15)
-        map.setCenter(marker.getPosition())
+        map.setCenter(marker.position)
+        lastClicked = year
       }
     })
-    marker.addListener('mousedown', () => {
-      start = new Date().getTime()
-    })
-    marker.addListener('mouseup', () => {
-      end = new Date().getTime()
-      longpress = end - start < 500 ? false : true
-    })
-    markers.push(marker)
+    markers[year] = {
+      mapMarker: marker,
+      todo: points[year].notes.startsWith('TODO'),
+      replacement: year.length != 4,
+    }
   }
 }
diff --git a/map/index.html b/map/index.html
index 6dec761..d5904ed 100644
--- a/map/index.html
+++ b/map/index.html
@@ -24,7 +24,7 @@
     document.head.appendChild(mainScript);
 
     const mapScript = document.createElement('script');
-    mapScript.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCoiKEmUCSlurpp6Qs5aCLt1O5x4WnKWKw&callback=initMap&v=weekly'
+    mapScript.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCoiKEmUCSlurpp6Qs5aCLt1O5x4WnKWKw&callback=initMap&v=weekly&libraries=marker'
     mapScript.defer = false;
     mapScript.async = false;
     document.head.appendChild(mapScript);