components MapView.tsx

100% Statements 6/6

100% Branches 2/2

100% Functions 1/1

100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36  
 
 
 
 
 
 
 
 
2x
 
47x
 
47x
46x
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
  // src/components/MapView.tsx
import React from 'react';
import config from '../config';
 
interface MapViewProps {
  latitude: number;
  longitude: number;
}
 
export const MapView: React.FC<MapViewProps> = ({ latitude, longitude }) => {
  // Move config access inside component to allow for dynamic updates during tests/runtime
  const apiKey = config.google.mapsEmbedApiKey;
 
  if (!apiKey) {
    return (
      <div className="text-sm text-red-500">Map view is disabled: API key is not configured.</div>
    );
  }
 
  const mapSrc = `https://www.google.com/maps/embed/v1/view?key=${apiKey}&center=${latitude},${longitude}&zoom=14`;
 
  return (
    <div className="w-full h-64 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
      <iframe
        title="Map view"
        width="100%"
        height="100%"
        style={{ border: 0 }}
        loading="lazy"
        allowFullScreen
        src={mapSrc}
      ></iframe>
    </div>
  );
};