Geocode the address attribute if it's present

projects/plugins/jetpack/changelog/add-map-block-mapkit-address-attribute

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Mapkit support for the address attribute

projects/plugins/jetpack/extensions/blocks/map/component/mapbox.js

@@ -382,6 +382,7 @@ MapBoxComponent.defaultProps = {
 	markerColor: 'red',
 	apiKey: null,
 	mapCenter: {},
+	address: null,
 };
 
 export default MapBoxComponent;

projects/plugins/jetpack/extensions/blocks/map/component/mapkit.js

@@ -11,6 +11,7 @@ import {
 	useMapkitOnMapTap,
 	useMapkitZoom,
 	useMapkitPoints,
+	useMapkitAddressLookup,
 } from '../mapkit/hooks';
 import { createCalloutElementCallback } from '../mapkit-utils';
 import InfoWindow from './info-window';
@@ -53,11 +54,13 @@ const MapkitComponent = forwardRef( ( props, mapRef ) => {
 
 const MapkitHelpers = memo(
 	( {
+		address,
 		mapCenter,
 		mapStyle,
 		zoom,
 		onSetMapCenter,
 		onSetZoom,
+		onSetPoints,
 		points,
 		markerColor,
 		onMarkerClick,
@@ -73,6 +76,7 @@ const MapkitHelpers = memo(
 		} = useMapkit();
 		// Save these in a ref to prevent unwanted rerenders
 		const onMarkerClickRef = useRef( onMarkerClick );
+		const onSetPointsRef = useRef( onSetPoints );
 
 		const onSelect = useCallback(
 			marker => {
@@ -104,6 +108,8 @@ const MapkitHelpers = memo(
 				map.setCenterAnimated( previousCenter );
 			}
 		} );
+
+		useMapkitAddressLookup( address, onSetPointsRef );
 		return null;
 	}
 );
@@ -119,6 +125,7 @@ MapkitComponent.defaultProps = {
 	onError: () => {},
 	markerColor: 'red',
 	mapCenter: {},
+	address: null,
 };
 
 export default MapkitComponent;

projects/plugins/jetpack/extensions/blocks/map/edit.js

@@ -232,6 +232,7 @@ class MapEdit extends Component {
 			onResizeStart,
 		} = this.props;
 		const {
+			address,
 			mapDetails,
 			points,
 			zoom,
@@ -350,6 +351,7 @@ class MapEdit extends Component {
 						<div className="wp-block-jetpack-map__map_wrapper">
 							<Map
 								ref={ this.mapRef }
+								address={ address }
 								scrollToZoom={ allowScrollToZoom }
 								showFullscreenButton={ showFullscreenButton }
 								mapStyle={ mapStyle || 'default' }

projects/plugins/jetpack/extensions/blocks/map/mapkit/hooks/index.js

@@ -235,6 +235,37 @@ const useMapkitOnMapTap = onMapTap => {
 	}, [ loaded, map, previousCenter, onMapTapRef ] );
 };
 
+const useMapkitAddressLookup = ( address, onSetPointsRef ) => {
+	const { mapkit, map } = useMapkit();
+
+	useEffect( () => {
+		if ( mapkit && map && address?.length ) {
+			const geocoder = new mapkit.Geocoder();
+			geocoder.lookup( address, ( error, data ) => {
+				if ( data?.results?.length ) {
+					const place = data.results[ 0 ];
+					const title = place.formattedAddress;
+					const point = {
+						placeTitle: title,
+						title: title,
+						caption: title,
+						coordinates: {
+							longitude: place.coordinate.longitude,
+							latitude: place.coordinate.latitude,
+						},
+						// mapkit doesn't give us an id, so we'll make one containing the place name and coordinates
+						id: `${ title } ${ Number( place.coordinate.latitude ).toFixed( 2 ) } ${ Number(
+							place.coordinate.longitude
+						).toFixed( 2 ) }`,
+					};
+
+					onSetPointsRef.current( [ point ] );
+				}
+			} );
+		}
+	}, [ mapkit, map, address, onSetPointsRef ] );
+};
+
 export {
 	useMapkit,
 	useMapkitSetup,
@@ -245,4 +276,5 @@ export {
 	useMapkitPoints,
 	useMapkitOnMapLoad,
 	useMapkitOnMapTap,
+	useMapkitAddressLookup,
 };