Update map when the car is driving

assets/js/hooks.js

@@ -58,16 +58,7 @@ function createMap(opts) {
 
 export const SimpleMap = {
   mounted() {
-    const $position = this.el.parentElement.querySelector(".position");
-
-    let marker;
-    const setView = () => {
-      if (marker) map.removeLayer(marker);
-      const [lat, lng] = $position.value.split(",");
-      const location = new LatLng(lat, lng);
-      map.setView(location, 17);
-      marker = new Marker(location, { icon }).addTo(map);
-    };
+    const $position = document.querySelector(`#position_${this.el.dataset.id}`);
 
     const map = createMap({
       zoomControl: false,
@@ -78,14 +69,25 @@ export const SimpleMap = {
       scrollWheelZoom: false,
       tap: false
     });
-    $position.addEventListener("change", setView);
+
+    let marker;
+    const setView = () => {
+      if (marker) map.removeLayer(marker);
+      const [lat, lng] = $position.value.split(",");
+      const location = new LatLng(lat, lng);
+      map.setView(location, 17);
+      marker = new Marker(location, { icon }).addTo(map);
+    };
+
     setView();
+
+    $position.addEventListener("change", setView);
   }
 };
 
 export const TriggerChange = {
   updated() {
-    this.el.dispatchEvent(new CustomEvent("change", {}));
+    this.el.dispatchEvent(new CustomEvent("change"));
   }
 };
 

lib/teslamate_web/templates/car/summary.html.leex

@@ -1,18 +1,19 @@
 <div class="car card">
    <div class="card-image">
-    <figure class="<%= if false, do: 'is-hidden' %>">
+    <figure>
         <div
           id="map"
           style="height: 150px; position: relative;"
+          data-id="<%= @car.id %>"
           phx-update="ignore"
           phx-hook="SimpleMap"
         />
-        <%= text_input :position, "#{@car.id}", value: "#{@summary.latitude},#{@summary.longitude}",
-                                                phx_hook: "TriggerChange",
-                                                class: "position is-hidden",
-                                                disabled: true
-        %>
     </figure>
+    <%= text_input :position, "#{@car.id}", value: "#{@summary.latitude},#{@summary.longitude}",
+                                            phx_hook: "TriggerChange",
+                                            class: "is-hidden",
+                                            disabled: true
+    %>
   </div>
   <div class="card-content">
     <div class="media is-flex mb-5">