From c55a70fdeabfa41d25df038723901591922ca668 Mon Sep 17 00:00:00 2001
From: Anita Lipsky <anita@purplebugs.com>
Date: Tue, 16 Jul 2024 16:50:56 +0200
Subject: [PATCH] feat: Marker details info, not styled

---
 src/alpaca-map.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/alpaca-map.js b/src/alpaca-map.js
index dbb4baa..6301984 100644
--- a/src/alpaca-map.js
+++ b/src/alpaca-map.js
@@ -386,7 +386,6 @@ export default class AlpacaMap extends LitElement {
     this.map.setMapTypeId("styled_map");
 
     // Add markers to the map
-    
     function toggleHighlight(markerView, farm) {
       if (markerView.content.classList.contains("highlight")) {
         markerView.content.classList.remove("highlight");
@@ -408,7 +407,14 @@ export default class AlpacaMap extends LitElement {
      <div class="count">${farm?.count?.alpacas?.status?.active} 🦙</div>
     </div>
 
-    <div class="details">TO DO : Fill out details - Onclick show  Farm details  Onclick show  Farm details Onclick show  Farm details</div>
+    <div class="details">
+    <h4>${farm?.name}</h4>
+    ${farm?.city}
+    <address>${farm?.location?.google?.formatted_address}</address>
+    <address>
+    <a href="${farm?.location?.google?.directions_url_href}"  target="_blank" rel="noreferrer" title="Google directions">Directions</a>
+    </address>
+    </div>
     `;
 
       return content;