diff --git a/mu-plugins/blocks/google-map/README.md b/mu-plugins/blocks/google-map/README.md
index f49966770..9ab8626ab 100644
--- 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
+
+```
diff --git a/mu-plugins/blocks/google-map/index.php b/mu-plugins/blocks/google-map/index.php
index 29597af9e..0b93632da 100644
--- 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
index e6fc21f02..a9480dd98 100644
--- 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( );
+ for ( const container of containers ) {
+ root = createRoot( container );
+
+ root.render( );
+ }
};
document.addEventListener( 'DOMContentLoaded', init );