Google Map: Support multiple instances on same page

WordPress · Nov 14, 2023 · ddfafd6 · ddfafd6
1 parent bfa544e
commit ddfafd6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 24 deletions.
diff --git a/mu-plugins/blocks/google-map/README.md b/mu-plugins/blocks/google-map/README.md
@@ -36,3 +36,9 @@ array(
 	2 => (object) array ( 'id' => '72189909', 'type' => 'wordcamp', 'title' => 'WordCamp Jinja 2023', 'url' => 'https://jinja.wordcamp.org/2023/', 'meetup' => NULL, 'location' => 'Jinja City, Uganda', 'latitude' => '0.5862795', 'longitude' => '33.4589384', 'timestamp' => 1693803600, ),
 )
 ```
+
+If you have a small number of markers, you can manually json-encode them and then put them directly in the post content:
+
+```html
+<!-- wp:wporg/google-map {"id":"wp20","apiKey":"WORDCAMP_DEV_GOOGLE_MAPS_API_KEY","markers":[{"id":"72190010","type":"meetup","title":"ONLINE DISCUSSION- Learn about your DIVI Theme- Divisociety.com","url":"https://www.meetup.com/milwaukee-wordpress-meetup/events/292286293","meetup":"Greater Milwaukee Area WordPress Meetup","location":"online","latitude":"43.04","longitude":"-87.92","tz_offset":"-21600","timestamp":1700006400},{"id":"72190007","type":"meetup","title":"Meetup Virtual - SEO MÃ¡s allÃ¡ del ranking","url":"https://www.meetup.com/wpsanjose/events/294644892","meetup":"WordPress Meetup San JosÃ©","location":"online","latitude":"9.93","longitude":"-84.08","tz_offset":"-21600","timestamp":1700010000},{"id":"72190008","type":"meetup","title":"WordPress Developer Night - #IEWP","url":"https://www.meetup.com/inlandempirewp/events/292287676","meetup":"Inland Empire WordPress Meetup Group","location":"online","latitude":"33.99","longitude":"-117.37","tz_offset":"-28800","timestamp":1700017200}]} /-->
+```
diff --git a/mu-plugins/blocks/google-map/index.php b/mu-plugins/blocks/google-map/index.php
@@ -32,8 +32,6 @@ function init() {
  * @return string Returns the block markup.
  */
 function render( $attributes, $content, $block ) {
-	$attributes['id'] = 'wp-block-wporg-google-map-' . $attributes['id'];
-
 	if ( ! empty( $attributes['apiKey'] ) ) {
 		// See README for why this has to be a constant.
 		$attributes['apiKey'] = constant( $attributes['apiKey'] );
@@ -53,25 +51,25 @@ function render( $attributes, $content, $block ) {
 
 	$attributes['markerIcon']['markerAnchorXOffset'] = $attributes['markerIcon']['markerWidth'] / -4;
 
-	wp_add_inline_script(
-		$block->block_type->view_script_handles[0],
-		sprintf(
-			'const wporgGoogleMap = %s;',
-			wp_json_encode( $attributes )
-		),
-		'before'
-	);
-
-	wp_add_inline_script(
-		$block->block_type->editor_script_handles[0],
-		sprintf(
-			'const wporgGoogleMap = %s;',
-			wp_json_encode( $attributes )
-		),
-		'before'
-	);
+	$handles = array( $block->block_type->view_script_handles[0], $block->block_type->editor_script_handles[0] );
+
+	foreach ( $handles as $handle ) {
+		wp_add_inline_script(
+			$handle,
+			sprintf(
+				'var wporgGoogleMap = wporgGoogleMap || {};
+				wporgGoogleMap["%s"] = %s;',
+				$attributes['id'],
+				wp_json_encode( $attributes )
+			),
+			'before'
+		);
+	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'id' => $attributes['id'] ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array(
+		'id'          => 'wp-block-wporg-google-map-' . $attributes['id'],
+		'data-map-id' => $attributes['id'],
+	) );
 
 	ob_start();
 

diff --git a/mu-plugins/blocks/google-map/src/front.js b/mu-plugins/blocks/google-map/src/front.js
@@ -11,15 +11,19 @@ import { createRoot } from '@wordpress/element';
 import Main from './components/main';
 
 const init = () => {
-	const wrapper = document.getElementById( wporgGoogleMap.id );
+	const containers = document.querySelectorAll( '.wp-block-wporg-google-map' );
 
-	if ( ! wrapper ) {
+	if ( ! containers.length ) {
 		throw "Map container element isn't present in the DOM.";
 	}
 
-	const root = createRoot( wrapper );
+	let root;
 
-	root.render( <Main { ...wporgGoogleMap } /> );
+	for ( const container of containers ) {
+		root = createRoot( container );
+
+		root.render( <Main { ...wporgGoogleMap[ container.dataset.mapId ] } /> );
+	}
 };
 
 document.addEventListener( 'DOMContentLoaded', init );