Merge pull request #353 from dgmstuart/dgms/more-map-fixes

More fixes for maps

.env.example

@@ -11,6 +11,9 @@ FACEBOOK_APP_ID=
 # Get this by signing up for a google cloud account:
 # https://developers.google.com/maps/documentation/javascript/tutorial
 GOOGLE_MAPS_JAVASCRIPT_API_KEY=
+# ...and create one of these in your cloud console:
+# https://console.cloud.google.com/google/maps-apis/studio/maps/
+GOOGLE_MAPS_MAP_ID=
 
 # Bypass login in development
 SKIP_LOGIN=true

app/assets/stylesheets/website/_map.scss

@@ -41,27 +41,32 @@ body.socials {
     }
   }
 
-  ul.listing_info {
+  ul.info-listings {
     margin-top: 15px;
 
     li {
       /* padding to allow for the bottom border applied to the link it contains on hover */
       padding-bottom: 1px;
     }
 
+    .info-listing {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 8px;
+    }
+
     .social_date {
-      display: block;
-      float: left;
-      width: 190px;
+      font-weight: bold;
+      min-width: 80px;
+      max-width: 30%;
     }
 
     .event_details {
-      display: block;
-      margin-left: 190px;
-      max-width: 400px;
+      flex-grow: 1;
     }
 
     .day {
+      font-weight: bold;
       margin-right: 5px;
     }
 

app/helpers/map_helper.rb

@@ -6,7 +6,7 @@ def map_update_control_link(text, query, selected:, url:)
       class: (:selected if selected),
       data: {
         action: "map#update:prevent map-menu#choose:prevent",
-        map_target: "updateControl",
+        map_menu_target: "updateControl",
         url:
       }
     }

app/javascript/controllers/map_controller.js

@@ -3,40 +3,33 @@ import { Map } from '../maps/map'
 
 // Connects to data-controller="map"
 export default class extends Controller {
-  static targets = [ "map", "updateControl" ]
+  static targets = [ "map" ]
   static values = {
     apiKey: String,
+    mapId: String,
     config: Object,
     markers: Array
   }
-  static classes = [ "selected" ]
 
   #map = null
 
   connect() {
     this.#map = new Map({
       apiKey: this.apiKeyValue,
+      mapId: this.mapIdValue,
       config: this.configValue,
       initialMarkers: this.markersValue.map(this._markerData),
       mapElement: this.mapTarget
     })
   }
 
   update(event) {
-    this._setSelected(event.target)
     this._updateFromUrl({
       url: event.target.dataset.url,
       callback: this._updateWithVenues.bind(this)
     })
   }
 
-  _setSelected(updateControl) {
-    this.updateControlTargets.forEach((element) => {
-      element.classList.remove(this.selectedClass)
-    })
-    updateControl.classList.add(this.selectedClass)
-  }
-
   _updateWithVenues(venues) {
     const markersData = venues.map(this._markerData)
     this.#map.updateMarkers(markersData)
@@ -57,7 +50,7 @@ export default class extends Controller {
       lat: venue.position.lat,
       lng: venue.position.lng,
       title: venue.title,
-      icon: venue.icon,
+      highlighted: venue.highlighted,
       content: venue.infoWindowContent
     }
   }

app/javascript/controllers/map_menu_controller.js

@@ -2,15 +2,30 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="map-menu"
 export default class extends Controller {
-  static targets = [ "menu", "currentlyShown" ]
-  static classes = [ "open" ]
+  static targets = [ "menu", "currentlyShown", "updateControl" ]
+  static classes = [ "open", "selected" ]
+
+  connect() {
+    const selected = this.updateControlTargets.find(el => el.classList.contains(this.selectedClass))
+    if (selected) {
+      this.currentlyShownTarget.textContent = selected.text
+    }
+  }
 
   toggle(event) {
     this.menuTarget.classList.toggle(this.openClass)
   }
 
   choose(event) {
+    this._setSelected(event.target)
     this.menuTarget.classList.remove(this.openClass)
     this.currentlyShownTarget.textContent = event.target.text
   }
+
+  _setSelected(updateControl) {
+    this.updateControlTargets.forEach((element) => {
+      element.classList.remove(this.selectedClass)
+    })
+    updateControl.classList.add(this.selectedClass)
+  }
 }

app/javascript/maps/map.js

@@ -1,18 +1,24 @@
-import { GoogleMapsApi } from './google_maps_api'
+import { Loader } from "@googlemaps/js-api-loader"
 
 export class Map {
-  constructor({ apiKey, config, initialMarkers, mapElement }) {
+  constructor({ apiKey, mapId, config, initialMarkers, mapElement }) {
     this.apiKey = apiKey;
+    this.mapId = mapId;
     this.config = config;
-    this.initialMarkers = initialMarkers;
     this.mapElement = mapElement;
 
-    const mapsApi = new GoogleMapsApi({ apiKey })
-    if (mapsApi.isLoaded()) {
-      this._initMap();
-    } else {
-      mapsApi.load(this._initMap.bind(this))
-    }
+    const loader = new Loader({
+      apiKey: apiKey,
+      version: "weekly"
+    });
+
+    loader.load().then(async () => {
+      const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
+      this.AdvancedMarkerElement = AdvancedMarkerElement;
+      this.PinElement = PinElement;
+      this.#mapInstance = await this._createMap()
+      this._createMarkers(initialMarkers)
+    })
   }
 
   #mapInstance = null
@@ -39,12 +45,12 @@ export class Map {
     this.#mapInstance.fitBounds(bounds);
   }
 
-  _createMarker({ position, title, icon, content }) {
-    const marker = new google.maps.Marker({
+  async _createMarker({ position, title, highlighted, content }) {
+    const marker = new this.AdvancedMarkerElement({
       position: position,
       title: title,
-      icon: icon,
-      map: this.#mapInstance
+      map: this.#mapInstance,
+      ...(highlighted ? { content: this._highlightedPin() } : {})
     });
 
     const infoWindow = new google.maps.InfoWindow({ content })
@@ -58,6 +64,16 @@ export class Map {
     this.#markers.push(marker)
   }
 
+  _highlightedPin() {
+    const pin =  new this.PinElement({
+      scale: 1.2,
+      background: "#3D6399",
+      borderColor: "#384f6e",
+      glyphColor: "#ffffff"
+    })
+    return pin.element
+  }
+
   _clearAllMarkers() {
     this.#markers.forEach(this._clearMarker)
   }
@@ -70,13 +86,11 @@ export class Map {
     if (this.#activeInfoWindow) { this.#activeInfoWindow.close() }
   }
 
-  _initMap() {
-    this.#mapInstance = this._createMap()
-    this._createMarkers(this.initialMarkers)
-  }
+  async _createMap() {
+    const { Map } = await google.maps.importLibrary("maps");
 
-  _createMap() {
-    return new window.google.maps.Map(this.mapElement, {
+    return new Map(this.mapElement, {
+      mapId: this.mapId,
       center: this.config.center,
       zoom: this.config.zoom,
       maxZoom: 19,

app/models/maps/markers.rb

@@ -48,14 +48,9 @@ def marker(venue:, highlighted:)
         id: venue.id,
         title: venue.name,
         position:,
+        highlighted:,
         infoWindowContent: info_window_content(venue)
-      }.tap do |options|
-        options[:icon] = highlighted_marker_icon if highlighted
-      end
-    end
-
-    def highlighted_marker_icon
-      "https://maps.google.com/mapfiles/marker_purple.png"
+      }
     end
 
     def info_window_content(venue)

app/views/layouts/map.html.erb

@@ -6,13 +6,13 @@
   <div class="map-container"
        data-controller="map"
        data-map-api-key-value='<%=ENV["GOOGLE_MAPS_JAVASCRIPT_API_KEY"]%>'
+       data-map-map-id-value='<%=ENV["GOOGLE_MAPS_MAP_ID"]%>'
        data-map-markers-value='<%= @map_markers.to_json %>'
-       data-map-config-value='<%= CITY.map_config.to_h.to_json %>'
-       data-map-selected-class='selected'>
+       data-map-config-value='<%= CITY.map_config.to_h.to_json %>'>
 
     <div id="map" data-map-target="map"></div>
 
-    <nav class="page" data-controller="map-menu" data-map-menu-open-class="open">
+    <nav class="page" data-controller="map-menu" data-map-menu-open-class="open" data-map-menu-selected-class='selected'>
       <header>
         <h1>
           <%= link_to "#{tc("site_name")}'s", root_path %>

app/views/maps/_classes_map_info.html.erb

@@ -1,8 +1,8 @@
 <%= render partial: "map_info_address", locals: { venue: } %>
 
-<ul class="listing_info">
+<ul class="info-listings">
   <% listings.each do |class_listing| %>
-    <li>
+    <li class="info-listing">
       <span class="day">
         <%= "#{ class_listing.day }:" %>
       </span>

app/views/maps/_socials_map_info.html.erb

@@ -1,14 +1,14 @@
 <%= render partial: "map_info_address", locals: { venue: } %>
 
-<ul class="listing_info">
+<ul class="info-listings">
   <% listings.each do |social_listings_row| %>
-    <li>
-      <span class="social_date">
+    <li class="info-listing">
+      <div class="social_date">
         <%= "#{ social_listings_row.date }:" %>
-      </span>
-      <span class="event_details">
+      </div>
+      <div class="event_details">
         <%= mapinfo_social_listing(social_listings_row.social_listing) %>
-      </span>
+      </div>
     </li>
   <% end %>
 </ul>

package.json

@@ -6,6 +6,7 @@
     "watch": "webpack --config webpack.config.js --watch"
   },
   "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.6",
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.4",
     "accessible-autocomplete": "^2.0.4",

yarn.lock

@@ -55,6 +55,13 @@
   resolved "https://registry.yarnpkg.com/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz#df79b7ea62c55094dc129880387864cdf41eca7c"
   integrity sha512-ZKXyJeFAzcpKM2kk8ipoGIPUqx9BX52omTGnfwjJvxOCaZTM2wtDK7zN0aIgPRbT9XYAlha0HtmZ+XKteuh0Gw==
 
+"@googlemaps/js-api-loader@^1.16.6":
+  version "1.16.6"
+  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.16.6.tgz#c89970c94b55796d51746c092f0e52953994a171"
+  integrity sha512-V8p5W9DbPQx74jWUmyYJOerhiB4C+MHekaO0ZRmc6lrOYrvY7+syLhzOWpp55kqSPeNb+qbC2h8i69aLIX6krQ==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 "@hotwired/stimulus@^3.2.2":
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
@@ -639,7 +646,7 @@ events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==