Complete initial retailer location map implementation

davewalker5 · Nov 20, 2023 · d850179 · d850179
1 parent 9cbb63e
commit d850179
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/music-catalogue-ui/components/locationMap.js b/src/music-catalogue-ui/components/locationMap.js
@@ -12,7 +12,9 @@ const LocationMap = ({ apiKey, latitude, longitude }) => {
           bootstrapURLKeys={{ key: apiKey }}
           defaultCenter={location}
           defaultZoom={15}
-        ></GoogleMapReact>
+        >
+          <div className={styles.locationMapMarker}></div>
+        </GoogleMapReact>
       </div>
     </>
   );

diff --git a/src/music-catalogue-ui/components/locationMap.module.css b/src/music-catalogue-ui/components/locationMap.module.css
@@ -3,3 +3,15 @@
   height: 300px;
   margin-bottom: 30px;
 }
+
+.locationMapMarker {
+  color: white;
+  background: red;
+  padding: 8px 8px;
+  display: inline-flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  transform: translate(-50%, -50%);
+}
diff --git a/src/music-catalogue-ui/components/retailerDetails.js b/src/music-catalogue-ui/components/retailerDetails.js
@@ -30,10 +30,6 @@ const RetailerDetails = ({ mapsApiKey, retailer, logout }) => {
       <div className={styles.retailerDetailsContainer}>
         <table className={styles.retailerDetailsTable}>
           <tbody>
-            <tr>
-              <th>API Key:</th>
-              <td>{mapsApiKey}</td>
-            </tr>
             <tr>
               <th>Address:</th>
               <td>{retailer.address1}</td>