Google Map: Center info window arrow on marker icon

WordPress · Oct 13, 2023 · f605ad7 · f605ad7
1 parent 6456a77
commit f605ad7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/mu-plugins/blocks/google-map/index.php b/mu-plugins/blocks/google-map/index.php
@@ -46,14 +46,16 @@ function render( $attributes, $content, $block ) {
 
 	$attributes['markerIcon'] = array(
 		'markerUrl'           => plugins_url( 'images/map-marker.svg', __FILE__ ),
-		'markerAnchorXOffset' => 34,
 		'markerHeight'        => 68,
 		'markerWidth'         => 68,
+		'markerAnchorYOffset' => -5,
 		'clusterUrl'          => plugins_url( 'images/cluster-background.svg', __FILE__ ),
 		'clusterWidth'        => 38,
 		'clusterHeight'       => 38,
 	);
 
+	$attributes['markerIcon']['markerAnchorXOffset'] = $attributes['markerIcon']['markerWidth'] / -4;
+
 	wp_add_inline_script(
 		$block->block_type->view_script_handles[0],
 		sprintf(

diff --git a/mu-plugins/blocks/google-map/src/components/map.js b/mu-plugins/blocks/google-map/src/components/map.js
@@ -60,9 +60,8 @@ export default function Map( { apiKey, markers: rawMarkers, icon } ) {
 
 		googleMap.current = map;
 		googleMapsApi.current = maps;
-
 		infoWindow.current = new maps.InfoWindow( {
-			pixelOffset: new maps.Size( -icon.markerIconAnchorXOffset, 0 ),
+			pixelOffset: new maps.Size( icon.markerAnchorXOffset, icon.markerAnchorYOffset ),
 		} );
 
 		combinedMarkers = combineDuplicateLocations( rawMarkers );