snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/message/content/location/MapView.tsx

@@ -0,0 +1,31 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import MapViewFallback from './MapViewFallback';
+import MapViewImage from './MapViewImage';
+import { useAsyncImage } from './hooks/useAsyncImage';
+
+export type MapViewProps = {
+	latitude: number;
+	longitude: number;
+};
+
+const MapView = ({ latitude, longitude }: MapViewProps) => {
+	const googleMapsApiKey = useSetting('MapView_GMapsAPIKey', '');
+
+	const { data: imageUrl } = useAsyncImage(
+		googleMapsApiKey
+			? `https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C${latitude},${longitude}&key=${googleMapsApiKey}`
+			: undefined,
+	);
+
+	const linkUrl = `https://maps.google.com/maps?daddr=${latitude},${longitude}`;
+
+	if (!imageUrl) {
+		return <MapViewFallback linkUrl={linkUrl} />;
+	}
+
+	return <MapViewImage linkUrl={linkUrl} imageUrl={imageUrl} />;
+};
+
+export default memo(MapView);

apps/meteor/client/components/message/content/location/MapViewFallback.tsx

@@ -0,0 +1,20 @@
+import { Box, Icon } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+export type MapViewFallbackProps = {
+	linkUrl: string;
+};
+
+const MapViewFallback = ({ linkUrl }: MapViewFallbackProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Box is='span' fontScale='p2' display='inline-flex' alignItems='center' paddingBlock={4}>
+			<Icon name='map-pin' size='x20' color='hint' />
+			<ExternalLink to={linkUrl}>{t('Shared_Location')}</ExternalLink>
+		</Box>
+	);
+};
+
+export default MapViewFallback;

apps/meteor/client/components/message/content/location/MapViewImage.tsx

@@ -0,0 +1,19 @@
+import { ExternalLink } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+export type MapViewImageProps = {
+	linkUrl: string;
+	imageUrl: string;
+};
+
+const MapViewImage = ({ linkUrl, imageUrl }: MapViewImageProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<ExternalLink to={linkUrl}>
+			<img src={imageUrl} alt={t('Shared_Location')} />
+		</ExternalLink>
+	);
+};
+
+export default MapViewImage;

apps/meteor/client/components/message/content/location/hooks/useAsyncImage.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+
+export const useAsyncImage = (src: string | undefined) => {
+	return useQuery({
+		queryKey: ['async-image', src],
+		queryFn: () =>
+			new Promise<string>((resolve, reject) => {
+				if (!src) {
+					reject(new Error('No src provided'));
+					return;
+				}
+
+				const image = new Image();
+				image.addEventListener('load', () => {
+					resolve(image.src);
+				});
+				image.addEventListener('error', () => {
+					reject(new Error(`Failed to load image: ${src}`));
+				});
+				image.src = src;
+			}),
+		enabled: Boolean(src),
+		retry: false,
+	});
+};