Repository: symfony/ux
Pull request #2049 (2024-08-12 11:56:39)

fix: warning and code formatting on Autocomplete
| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no
| Issues        | -
| License       | MIT

Fix broken formatting on https://symfony.com/bundles/ux-autocomplete/current/index.html#passing-extra-options-to-the-ajax-powered-autocomplete

Current result:

> ![image](https://github.com/user-attachments/assets/cd7d7105-cf31-4bca-9374-29e8b3f49ebf)

Follow-up of:

- #1702


alexislefebvre: I fixed other issues with code formatting.

Patch:
diff --git a/src/Autocomplete/doc/index.rst b/src/Autocomplete/doc/index.rst
index 449f407f..def22586 100644
--- a/src/Autocomplete/doc/index.rst
+++ b/src/Autocomplete/doc/index.rst
@@ -290,13 +290,13 @@ Passing Extra Options to the Ajax-powered Autocomplete
 Autocomplete field options are not preserved when the field is rendered on an Ajax call. So, features like exclude some options
 based on the current form data are not possible by default. To partially avoid this limitation, the `extra_options` option was added.
 
-::warning
+.. warning::
 
-    Only scalar values (`string`, `integer`, `float`, `boolean`), `null` and `arrays` (consisted from the same types as mentioned before) can be passed as extra options.
+    Only scalar values (``string``, ``integer``, ``float``, ``boolean``), ``null`` and ``array`` (consisted from the same types as mentioned before) can be passed as extra options.
 
-Considering the following example, when the form type is rendered for the first time, it will use the `query_builder` defined
-while adding a `food` field to the `FoodForm`. However, when the Ajax is used to fetch the results, on the consequent renders,
-the default `query_builder` will be used::
+Considering the following example, when the form type is rendered for the first time, it will use the ``query_builder`` defined
+while adding a ``food`` field to the ``FoodForm``. However, when the Ajax is used to fetch the results, on the consequent renders,
+the default ``query_builder`` will be used::
 
     // src/Form/FoodForm.php
     // ...
@@ -323,8 +323,8 @@ the default `query_builder` will be used::
     }
 
 If some food can be consisted of other foods, we might want to exclude the "root" food from the list of available foods.
-To achieve this, we can remove the `query_builder` option from the above example and pass the `excluded_foods` extra option
-to the `FoodAutocompleteField`::
+To achieve this, we can remove the ``query_builder`` option from the above example and pass the ``excluded_foods`` extra option
+to the ``FoodAutocompleteField``::
 
     // src/Form/FoodForm.php
     // ...
@@ -345,8 +345,8 @@ to the `FoodAutocompleteField`::
         }
     }
 
-The magic of the `extra_options` is that it will be passed to the `FoodAutocompleteField` every time an Ajax call is made.
-So now, we can just use the `excluded_foods` extra option in the default `query_builder` of the `FoodAutocompleteField`::
+The magic of the ``extra_options`` is that it will be passed to the ``FoodAutocompleteField`` every time an Ajax call is made.
+So now, we can just use the ``excluded_foods`` extra option in the default ``query_builder`` of the ``FoodAutocompleteField``::
 
     // src/Form/FoodAutocompleteField.php
     // ...
@@ -602,7 +602,7 @@ If you need to pass extra options to the autocompleter, you can do so by impleme
 
 .. tip::
 
-    If you want to know **why** you might need to use the `extra options` feature, see :ref:`passing-extra-options-to-the-ajax-powered-autocomplete`.
+    If you want to know **why** you might need to use the ``extra_options`` feature, see :ref:`passing-extra-options-to-the-ajax-powered-autocomplete`.
 
 .. code-block:: diff
 
diff --git a/src/Map/assets/dist/abstract_map_controller.d.ts b/src/Map/assets/dist/abstract_map_controller.d.ts
index 142c2f69..e7a25773 100644
--- a/src/Map/assets/dist/abstract_map_controller.d.ts
+++ b/src/Map/assets/dist/abstract_map_controller.d.ts
@@ -4,8 +4,8 @@ export type Point = {
     lng: number;
 };
 export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
-    center: Point | null;
-    zoom: number | null;
+    center: Point;
+    zoom: number;
     fitBoundsToMarkers: boolean;
     markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     options: Options;
@@ -35,10 +35,11 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
     protected map: Map;
     protected markers: Array<Marker>;
     protected infoWindows: Array<InfoWindow>;
+    initialize(): void;
     connect(): void;
     protected abstract doCreateMap({ center, zoom, options, }: {
-        center: Point | null;
-        zoom: number | null;
+        center: Point;
+        zoom: number;
         options: MapOptions;
     }): Map;
     createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
@@ -52,5 +53,5 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
         marker: Marker;
     }): InfoWindow;
     protected abstract doFitBoundsToMarkers(): void;
-    protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
+    private dispatchEvent;
 }
diff --git a/src/Map/assets/dist/abstract_map_controller.js b/src/Map/assets/dist/abstract_map_controller.js
index 9d2e3024..324a29ce 100644
--- a/src/Map/assets/dist/abstract_map_controller.js
+++ b/src/Map/assets/dist/abstract_map_controller.js
@@ -6,6 +6,7 @@ class default_1 extends Controller {
         this.markers = [];
         this.infoWindows = [];
     }
+    initialize() { }
     connect() {
         const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
         this.dispatchEvent('pre-connect', { options });
@@ -34,6 +35,9 @@ class default_1 extends Controller {
         this.infoWindows.push(infoWindow);
         return infoWindow;
     }
+    dispatchEvent(name, payload = {}) {
+        this.dispatch(name, { prefix: 'ux:map', detail: payload });
+    }
 }
 default_1.values = {
     providerOptions: Object,
diff --git a/src/Map/assets/src/abstract_map_controller.ts b/src/Map/assets/src/abstract_map_controller.ts
index 802b6477..633ce7e0 100644
--- a/src/Map/assets/src/abstract_map_controller.ts
+++ b/src/Map/assets/src/abstract_map_controller.ts
@@ -3,8 +3,8 @@ import { Controller } from '@hotwired/stimulus';
 export type Point = { lat: number; lng: number };
 
 export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
-    center: Point | null;
-    zoom: number | null;
+    center: Point;
+    zoom: number;
     fitBoundsToMarkers: boolean;
     markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     options: Options;
@@ -66,6 +66,8 @@ export default abstract class<
     protected markers: Array<Marker> = [];
     protected infoWindows: Array<InfoWindow> = [];
 
+    initialize() {}
+
     connect() {
         const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
 
@@ -91,8 +93,8 @@ export default abstract class<
         zoom,
         options,
     }: {
-        center: Point | null;
-        zoom: number | null;
+        center: Point;
+        zoom: number;
         options: MapOptions;
     }): Map;
 
@@ -134,5 +136,7 @@ export default abstract class<
 
     protected abstract doFitBoundsToMarkers(): void;
 
-    protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
+    private dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
+        this.dispatch(name, { prefix: 'ux:map', detail: payload });
+    }
 }
diff --git a/src/Map/doc/index.rst b/src/Map/doc/index.rst
index 2e75e88c..78f63d1c 100644
--- a/src/Map/doc/index.rst
+++ b/src/Map/doc/index.rst
@@ -78,11 +78,8 @@ A map is created by calling ``new Map()``. You can configure the center, zoom, a
         {
             // 1. Create a new map instance
             $myMap = (new Map());
-                // Explicitly set the center and zoom
                 ->center(new Point(46.903354, 1.888334))
                 ->zoom(6)
-                // Or automatically fit the bounds to the markers
-                ->fitBoundsToMarkers()
             ;
     
             // 2. You can add markers
diff --git a/src/Map/src/Bridge/Google/README.md b/src/Map/src/Bridge/Google/README.md
index 0d6bd01e..449db09b 100644
--- a/src/Map/src/Bridge/Google/README.md
+++ b/src/Map/src/Bridge/Google/README.md
@@ -10,21 +10,19 @@ UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default
 # With options
 UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?version=weekly
 UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?language=fr&region=FR
-UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default??libraries[]=geometry&libraries[]=places
 ```
 
 Available options:
 
-| Option      | Description                                                                                                                        | Default                                                     |
-|-------------|------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------|
-| `id`        | The id of the script tag                                                                                                           | `__googleMapsScriptId`                                      |
-| `language`  | Force language, see [list of supported languages](https://developers.google.com/maps/faq#languagesupport) specified in the browser | The user's preferred language                               |
-| `region`    | Unicode region subtag identifiers compatible with [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1)                           |                                                             |
-| `nonce`     | Use a cryptographic nonce attribute                                                                                                |                                                             |
-| `retries`   | The number of script load retries                                                                                                  | 3                                                           |
-| `url`       | Custom url to load the Google Maps API script                                                                                      | `https://maps.googleapis.com/maps/api/js`                   |
-| `version`   | The release channels or version numbers                                                                                            | `weekly`                                                    |
-| `libraries` | The additional libraries to load, see [list of supported libraries](https://googlemaps.github.io/js-api-loader/types/Library.html) | `['maps', 'marker']`, those two libraries are always loaded |
+| Option     | Description                                                                                                                        | Default                                   |
+|------------|------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------|
+| `id`       | The id of the script tag                                                                                                           | `__googleMapsScriptId`                    |
+| `language` | Force language, see [list of supported languages](https://developers.google.com/maps/faq#languagesupport) specified in the browser | The user's preferred language             |
+| `region`   | Unicode region subtag identifiers compatible with [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1)                           |                                           |
+| `nonce`    | Use a cryptographic nonce attribute                                                                                                |                                           |
+| `retries`  | The number of script load retries                                                                                                  | 3                                         |
+| `url`      | Custom url to load the Google Maps API script                                                                                      | `https://maps.googleapis.com/maps/api/js` |
+| `version`  | The release channels or version numbers                                                                                            | `weekly`                                  |
 
 ## Map options
 
@@ -80,60 +78,6 @@ $googleOptions = (new GoogleOptions())
 // Add the custom options to the map
 $map->options($googleOptions);
 ```
-## Use cases
-
-Below are some common or advanced use cases when using a map.
-
-### Customize the marker
-
-A common use case is to customize the marker. You can listen to the `ux:map:marker:before-create` event to customize the marker before it is created.
-
-Assuming you have a map with a custom controller:
-```twig
-{{ render_map(map, {'data-controller': 'my-map' }) }}
-```
-
-You can create a Stimulus controller to customize the markers before they are created:
-```js
-// assets/controllers/my_map_controller.js
-import {Controller} from "@hotwired/stimulus";
-
-export default class extends Controller
-{
-    connect() {
-        this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
-    }
-
-    disconnect() {
-        // Always remove listeners when the controller is disconnected
-        this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
-    }
-
-    _onMarkerBeforeCreate(event) {
-        // You can access the marker definition and the google object
-        // Note: `definition.rawOptions` is the raw options object that will be passed to the `google.maps.Marker` constructor. 
-        const { definition, google } = event.detail;
-
-        // 1. To use a custom image for the marker 
-        const beachFlagImg = document.createElement("img");
-        // Note: instead of using an hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`.
-        beachFlagImg.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
-        definition.rawOptions =  { 
-            content: beachFlagImg
-        }
-      
-        // 2. To use a custom glyph for the marker
-        const pinElement = new google.maps.marker.PinElement({
-            // Note: instead of using an hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`. 
-            glyph: new URL('https://maps.gstatic.com/mapfiles/place_api/icons/v2/museum_pinlet.svg'), 
-            glyphColor: "white",
-        });
-        definition.rawOptions = {
-            content: pinElement.element,
-        }
-    }
-}
-```
 
 ## Resources
 
diff --git a/src/Map/src/Bridge/Google/assets/dist/map_controller.d.ts b/src/Map/src/Bridge/Google/assets/dist/map_controller.d.ts
index 9a8da864..406671b9 100644
--- a/src/Map/src/Bridge/Google/assets/dist/map_controller.d.ts
+++ b/src/Map/src/Bridge/Google/assets/dist/map_controller.d.ts
@@ -7,12 +7,11 @@ export default class extends AbstractMapController<MapOptions, google.maps.Map,
     static values: {
         providerOptions: ObjectConstructor;
     };
-    providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;
+    providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version'>;
     connect(): Promise<void>;
-    protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
     protected doCreateMap({ center, zoom, options, }: {
-        center: Point | null;
-        zoom: number | null;
+        center: Point;
+        zoom: number;
         options: MapOptions;
     }): google.maps.Map;
     protected doCreateMarker(definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>): google.maps.marker.AdvancedMarkerElement;
diff --git a/src/Map/src/Bridge/Google/assets/dist/map_controller.js b/src/Map/src/Bridge/Google/assets/dist/map_controller.js
index 5a741632..03f2ed92 100644
--- a/src/Map/src/Bridge/Google/assets/dist/map_controller.js
+++ b/src/Map/src/Bridge/Google/assets/dist/map_controller.js
@@ -1,42 +1,24 @@
 import AbstractMapController from '@symfony/ux-map/abstract-map-controller';
 import { Loader } from '@googlemaps/js-api-loader';
 
-let _google;
+let loader;
+let library;
 class default_1 extends AbstractMapController {
     async connect() {
-        if (!_google) {
-            _google = { maps: {} };
-            let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
-            const loader = new Loader(loaderOptions);
-            libraries = ['core', ...libraries.filter((library) => library !== 'core')];
-            const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
-            librariesImplementations.map((libraryImplementation, index) => {
-                const library = libraries[index];
-                if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
-                    _google.maps[library] = libraryImplementation;
-                }
-                else {
-                    _google.maps = { ..._google.maps, ...libraryImplementation };
-                }
-            });
+        if (!loader) {
+            loader = new Loader(this.providerOptionsValue);
         }
+        const { Map: _Map, InfoWindow } = await loader.importLibrary('maps');
+        const { AdvancedMarkerElement } = await loader.importLibrary('marker');
+        library = { _Map, AdvancedMarkerElement, InfoWindow };
         super.connect();
     }
-    dispatchEvent(name, payload = {}) {
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: {
-                ...payload,
-                google: _google,
-            },
-        });
-    }
     doCreateMap({ center, zoom, options, }) {
         options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
         options.mapTypeControl = typeof options.mapTypeControlOptions !== 'undefined';
         options.streetViewControl = typeof options.streetViewControlOptions !== 'undefined';
         options.fullscreenControl = typeof options.fullscreenControlOptions !== 'undefined';
-        return new _google.maps.Map(this.element, {
+        return new library._Map(this.element, {
             ...options,
             center,
             zoom,
@@ -44,7 +26,7 @@ class default_1 extends AbstractMapController {
     }
     doCreateMarker(definition) {
         const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
-        const marker = new _google.maps.marker.AdvancedMarkerElement({
+        const marker = new library.AdvancedMarkerElement({
             position,
             title,
             ...otherOptions,
@@ -58,7 +40,7 @@ class default_1 extends AbstractMapController {
     }
     doCreateInfoWindow({ definition, marker, }) {
         const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
-        const infoWindow = new _google.maps.InfoWindow({
+        const infoWindow = new library.InfoWindow({
             headerContent: this.createTextOrElement(headerContent),
             content: this.createTextOrElement(content),
             ...otherOptions,
diff --git a/src/Map/src/Bridge/Google/assets/src/map_controller.ts b/src/Map/src/Bridge/Google/assets/src/map_controller.ts
index 1e1a1a06..2712903d 100644
--- a/src/Map/src/Bridge/Google/assets/src/map_controller.ts
+++ b/src/Map/src/Bridge/Google/assets/src/map_controller.ts
@@ -28,7 +28,12 @@ type MapOptions = Pick<
     | 'fullscreenControlOptions'
 >;
 
-let _google: typeof google;
+let loader: Loader;
+let library: {
+    _Map: typeof google.maps.Map;
+    AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement;
+    InfoWindow: typeof google.maps.InfoWindow;
+};
 
 export default class extends AbstractMapController<
     MapOptions,
@@ -42,47 +47,19 @@ export default class extends AbstractMapController<
 
     declare providerOptionsValue: Pick<
         LoaderOptions,
-        'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'
+        'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version'
     >;
 
     async connect() {
-        if (!_google) {
-            _google = { maps: {} };
-
-            let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
-
-            const loader = new Loader(loaderOptions);
-
-            // We could have used `loader.load()` to correctly load libraries, but this method is deprecated in favor of `loader.importLibrary()`.
-            // But `loader.importLibrary()` is not a 1-1 replacement for `loader.load()`, we need to re-build the `google.maps` object ourselves,
-            // see https://github.com/googlemaps/js-api-loader/issues/837 for more information.
-            libraries = ['core', ...libraries.filter((library) => library !== 'core')]; // Ensure 'core' is loaded first
-            const librariesImplementations = await Promise.all(
-                libraries.map((library) => loader.importLibrary(library))
-            );
-            librariesImplementations.map((libraryImplementation, index) => {
-                const library = libraries[index];
-
-                // The following libraries are in a sub-namespace
-                if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
-                    _google.maps[library] = libraryImplementation;
-                } else {
-                    _google.maps = { ..._google.maps, ...libraryImplementation };
-                }
-            });
+        if (!loader) {
+            loader = new Loader(this.providerOptionsValue);
         }
 
-        super.connect();
-    }
+        const { Map: _Map, InfoWindow } = await loader.importLibrary('maps');
+        const { AdvancedMarkerElement } = await loader.importLibrary('marker');
+        library = { _Map, AdvancedMarkerElement, InfoWindow };
 
-    protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: {
-                ...payload,
-                google: _google,
-            },
-        });
+        super.connect();
     }
 
     protected doCreateMap({
@@ -90,8 +67,8 @@ export default class extends AbstractMapController<
         zoom,
         options,
     }: {
-        center: Point | null;
-        zoom: number | null;
+        center: Point;
+        zoom: number;
         options: MapOptions;
     }): google.maps.Map {
         // We assume the following control options are enabled if their options are set
@@ -100,7 +77,7 @@ export default class extends AbstractMapController<
         options.streetViewControl = typeof options.streetViewControlOptions !== 'undefined';
         options.fullscreenControl = typeof options.fullscreenControlOptions !== 'undefined';
 
-        return new _google.maps.Map(this.element, {
+        return new library._Map(this.element, {
             ...options,
             center,
             zoom,
@@ -112,7 +89,7 @@ export default class extends AbstractMapController<
     ): google.maps.marker.AdvancedMarkerElement {
         const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
 
-        const marker = new _google.maps.marker.AdvancedMarkerElement({
+        const marker = new library.AdvancedMarkerElement({
             position,
             title,
             ...otherOptions,
@@ -139,7 +116,7 @@ export default class extends AbstractMapController<
     }): google.maps.InfoWindow {
         const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
 
-        const infoWindow = new _google.maps.InfoWindow({
+        const infoWindow = new library.InfoWindow({
             headerContent: this.createTextOrElement(headerContent),
             content: this.createTextOrElement(content),
             ...otherOptions,
diff --git a/src/Map/src/Bridge/Google/composer.json b/src/Map/src/Bridge/Google/composer.json
index 0160a0bd..21a6a464 100644
--- a/src/Map/src/Bridge/Google/composer.json
+++ b/src/Map/src/Bridge/Google/composer.json
@@ -2,7 +2,7 @@
     "name": "symfony/ux-google-map",
     "type": "symfony-ux-map-bridge",
     "description": "Symfony UX Map GoogleMaps Bridge",
-    "keywords": ["symfony-ux", "google-maps", "map"],
+    "keywords": ["google-maps", "map", "symfony", "ux"],
     "homepage": "https://symfony.com",
     "license": "MIT",
     "authors": [
diff --git a/src/Map/src/Bridge/Google/src/Renderer/GoogleRenderer.php b/src/Map/src/Bridge/Google/src/Renderer/GoogleRenderer.php
index 808278ab..fb214676 100644
--- a/src/Map/src/Bridge/Google/src/Renderer/GoogleRenderer.php
+++ b/src/Map/src/Bridge/Google/src/Renderer/GoogleRenderer.php
@@ -37,10 +37,6 @@ final readonly class GoogleRenderer extends AbstractRenderer
         private ?int $retries = null,
         private ?string $url = null,
         private ?string $version = null,
-        /**
-         * @var array<'core'|'maps'|'places'|'geocoding'|'routes'|'marker'|'geometry'|'elevation'|'streetView'|'journeySharing'|'drawing'|'visualization'>
-         */
-        private array $libraries = [],
     ) {
         parent::__construct($stimulusHelper);
     }
@@ -60,7 +56,6 @@ final readonly class GoogleRenderer extends AbstractRenderer
             'retries' => $this->retries,
             'url' => $this->url,
             'version' => $this->version,
-            'libraries' => $this->libraries,
         ]) + ['apiKey' => $this->apiKey];
     }
 
@@ -82,7 +77,6 @@ final readonly class GoogleRenderer extends AbstractRenderer
                 'retries' => $this->retries,
                 'url' => $this->url,
                 'version' => $this->version,
-                'libraries' => $this->libraries,
             ]))
         );
     }
diff --git a/src/Map/src/Bridge/Google/src/Renderer/GoogleRendererFactory.php b/src/Map/src/Bridge/Google/src/Renderer/GoogleRendererFactory.php
index a391f676..04a39925 100644
--- a/src/Map/src/Bridge/Google/src/Renderer/GoogleRendererFactory.php
+++ b/src/Map/src/Bridge/Google/src/Renderer/GoogleRendererFactory.php
@@ -41,7 +41,6 @@ final class GoogleRendererFactory extends AbstractRendererFactory implements Ren
             retries: $dsn->getOption('retries'),
             url: $dsn->getOption('url'),
             version: $dsn->getOption('version', 'weekly'),
-            libraries: ['maps', 'marker', ...$dsn->getOption('libraries', [])],
         );
     }
 
diff --git a/src/Map/src/Bridge/Leaflet/README.md b/src/Map/src/Bridge/Leaflet/README.md
index 219cf511..5948f4df 100644
--- a/src/Map/src/Bridge/Leaflet/README.md
+++ b/src/Map/src/Bridge/Leaflet/README.md
@@ -37,59 +37,6 @@ $leafletOptions = (new LeafletOptions())
 $map->options($leafletOptions);
 ```
 
-## Use cases
-
-Below are some common or advanced use cases when using a map.
-
-### Customize the marker
-
-A common use case is to customize the marker. You can listen to the `ux:map:marker:before-create` event to customize the marker before it is created.
-
-Assuming you have a map with a custom controller:
-```twig
-{{ render_map(map, {'data-controller': 'my-map' }) }}
-```
-
-You can create a Stimulus controller to customize the markers before they are created:
-```js
-// assets/controllers/my_map_controller.js
-import {Controller} from "@hotwired/stimulus";
-
-export default class extends Controller
-{
-    connect() {
-        this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
-    }
-
-    disconnect() {
-        // Always remove listeners when the controller is disconnected
-        this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
-    }
-
-    _onMarkerBeforeCreate(event) {
-        // You can access the marker definition and the Leaflet object
-        // Note: `definition.rawOptions` is the raw options object that will be passed to the `L.marker` constructor. 
-        const { definition, L } = event.detail;
-
-        // Use a custom icon for the marker
-        const redIcon = L.icon({
-          // Note: instead of using an hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`.
-          iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png',
-          shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
-          iconSize: [38, 95], // size of the icon
-          shadowSize: [50, 64], // size of the shadow
-          iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
-          shadowAnchor: [4, 62],  // the same for the shadow
-          popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
-        })
-  
-        definition.rawOptions = {
-          icon: redIcon,
-        }
-    }
-}
-```
-
 ## Resources
 
 - [Documentation](https://symfony.com/bundles/ux-map/current/index.html)
diff --git a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts
index c152fb4c..ce794285 100644
--- a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts
+++ b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts
@@ -1,7 +1,7 @@
 import AbstractMapController from '@symfony/ux-map/abstract-map-controller';
 import type { Point, MarkerDefinition } from '@symfony/ux-map/abstract-map-controller';
 import 'leaflet/dist/leaflet.min.css';
-import * as L from 'leaflet';
+import { type Map as LeafletMap, Marker, type Popup } from 'leaflet';
 import type { MapOptions as LeafletMapOptions, MarkerOptions, PopupOptions } from 'leaflet';
 type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
     tileLayer: {
@@ -10,19 +10,18 @@ type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
         options: Record<string, unknown>;
     };
 };
-export default class extends AbstractMapController<MapOptions, typeof L.Map, MarkerOptions, typeof L.Marker, typeof L.Popup, PopupOptions> {
+export default class extends AbstractMapController<MapOptions, typeof LeafletMap, MarkerOptions, Marker, Popup, PopupOptions> {
     connect(): void;
-    protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
-    protected doCreateMap({ center, zoom, options, }: {
-        center: Point | null;
-        zoom: number | null;
+    protected doCreateMap({ center, zoom, options }: {
+        center: Point;
+        zoom: number;
         options: MapOptions;
-    }): L.Map;
-    protected doCreateMarker(definition: MarkerDefinition): L.Marker;
+    }): LeafletMap;
+    protected doCreateMarker(definition: MarkerDefinition): Marker;
     protected doCreateInfoWindow({ definition, marker, }: {
         definition: MarkerDefinition['infoWindow'];
-        marker: L.Marker;
-    }): L.Popup;
+        marker: Marker;
+    }): Popup;
     protected doFitBoundsToMarkers(): void;
 }
 export {};
diff --git a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js
index be7f8e4c..3e8d3b80 100644
--- a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js
+++ b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js
@@ -1,11 +1,11 @@
 import AbstractMapController from '@symfony/ux-map/abstract-map-controller';
 import 'leaflet/dist/leaflet.min.css';
-import * as L from 'leaflet';
+import { Marker, divIcon, map, tileLayer, marker } from 'leaflet';
 
 class map_controller extends AbstractMapController {
     connect() {
-        L.Marker.prototype.options.icon = L.divIcon({
-            html: '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" clip-rule="evenodd" viewBox="0 0 500 820"><defs><linearGradient id="__sf_ux_map_gradient_marker_fill" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -37.57 37.57 0 416.45 541)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#126FC6"/><stop offset="1" stop-color="#4C9CD1"/></linearGradient><linearGradient id="__sf_ux_map_gradient_marker_border" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -19.05 19.05 0 414.48 522.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2E6C97"/><stop offset="1" stop-color="#3883B7"/></linearGradient></defs><circle cx="252.31" cy="266.24" r="83.99" fill="#fff"/><path fill="url(#__sf_ux_map_gradient_marker_fill)" stroke="url(#__sf_ux_map_gradient_marker_border)" stroke-width="1.1" d="M416.54 503.61c-6.57 0-12.04 5.7-12.04 11.87 0 2.78 1.56 6.3 2.7 8.74l9.3 17.88 9.26-17.88c1.13-2.43 2.74-5.79 2.74-8.74 0-6.18-5.38-11.87-11.96-11.87Zm0 7.16a4.69 4.69 0 1 1-.02 9.4 4.69 4.69 0 0 1 .02-9.4Z" transform="translate(-7889.1 -9807.44) scale(19.54)"/></svg>',
+        Marker.prototype.options.icon = divIcon({
+            html: '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" clip-rule="evenodd" viewBox="0 0 500 820"><defs><linearGradient id="a" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -37.57 37.57 0 416.45 541)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#126FC6"/><stop offset="1" stop-color="#4C9CD1"/></linearGradient><linearGradient id="b" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -19.05 19.05 0 414.48 522.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2E6C97"/><stop offset="1" stop-color="#3883B7"/></linearGradient></defs><circle cx="252.31" cy="266.24" r="83.99" fill="#fff"/><path fill="url(#a)" stroke="url(#b)" stroke-width="1.1" d="M416.54 503.61c-6.57 0-12.04 5.7-12.04 11.87 0 2.78 1.56 6.3 2.7 8.74l9.3 17.88 9.26-17.88c1.13-2.43 2.74-5.79 2.74-8.74 0-6.18-5.38-11.87-11.96-11.87Zm0 7.16a4.69 4.69 0 1 1-.02 9.4 4.69 4.69 0 0 1 .02-9.4Z" transform="translate(-7889.1 -9807.44) scale(19.54)"/></svg>',
             iconSize: [25, 41],
             iconAnchor: [12.5, 41],
             popupAnchor: [0, -41],
@@ -13,34 +13,25 @@ class map_controller extends AbstractMapController {
         });
         super.connect();
     }
-    dispatchEvent(name, payload = {}) {
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: {
-                ...payload,
-                leaflet: L,
-            },
-        });
-    }
-    doCreateMap({ center, zoom, options, }) {
-        const map = L.map(this.element, {
+    doCreateMap({ center, zoom, options }) {
+        const map$1 = map(this.element, {
             ...options,
-            center: center === null ? undefined : center,
-            zoom: zoom === null ? undefined : zoom,
+            center,
+            zoom,
         });
-        L.tileLayer(options.tileLayer.url, {
+        tileLayer(options.tileLayer.url, {
             attribution: options.tileLayer.attribution,
             ...options.tileLayer.options,
-        }).addTo(map);
-        return map;
+        }).addTo(map$1);
+        return map$1;
     }
     doCreateMarker(definition) {
         const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
-        const marker = L.marker(position, { title, ...otherOptions, ...rawOptions }).addTo(this.map);
+        const marker$1 = marker(position, { title, ...otherOptions, ...rawOptions }).addTo(this.map);
         if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, marker });
+            this.createInfoWindow({ definition: infoWindow, marker: marker$1 });
         }
-        return marker;
+        return marker$1;
     }
     doCreateInfoWindow({ definition, marker, }) {
         const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
diff --git a/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts b/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts
index 7cccc569..71230b14 100644
--- a/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts
+++ b/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts
@@ -1,7 +1,15 @@
 import AbstractMapController from '@symfony/ux-map/abstract-map-controller';
 import type { Point, MarkerDefinition } from '@symfony/ux-map/abstract-map-controller';
 import 'leaflet/dist/leaflet.min.css';
-import * as L from 'leaflet';
+import {
+    map as createMap,
+    tileLayer as createTileLayer,
+    marker as createMarker,
+    divIcon,
+    type Map as LeafletMap,
+    Marker,
+    type Popup,
+} from 'leaflet';
 import type { MapOptions as LeafletMapOptions, MarkerOptions, PopupOptions } from 'leaflet';
 
 type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
@@ -10,46 +18,31 @@ type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
 
 export default class extends AbstractMapController<
     MapOptions,
-    typeof L.Map,
+    typeof LeafletMap,
     MarkerOptions,
-    typeof L.Marker,
-    typeof L.Popup,
+    Marker,
+    Popup,
     PopupOptions
 > {
     connect(): void {
-        L.Marker.prototype.options.icon = L.divIcon({
-            html: '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" clip-rule="evenodd" viewBox="0 0 500 820"><defs><linearGradient id="__sf_ux_map_gradient_marker_fill" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -37.57 37.57 0 416.45 541)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#126FC6"/><stop offset="1" stop-color="#4C9CD1"/></linearGradient><linearGradient id="__sf_ux_map_gradient_marker_border" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -19.05 19.05 0 414.48 522.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2E6C97"/><stop offset="1" stop-color="#3883B7"/></linearGradient></defs><circle cx="252.31" cy="266.24" r="83.99" fill="#fff"/><path fill="url(#__sf_ux_map_gradient_marker_fill)" stroke="url(#__sf_ux_map_gradient_marker_border)" stroke-width="1.1" d="M416.54 503.61c-6.57 0-12.04 5.7-12.04 11.87 0 2.78 1.56 6.3 2.7 8.74l9.3 17.88 9.26-17.88c1.13-2.43 2.74-5.79 2.74-8.74 0-6.18-5.38-11.87-11.96-11.87Zm0 7.16a4.69 4.69 0 1 1-.02 9.4 4.69 4.69 0 0 1 .02-9.4Z" transform="translate(-7889.1 -9807.44) scale(19.54)"/></svg>',
+        Marker.prototype.options.icon = divIcon({
+            html: '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" clip-rule="evenodd" viewBox="0 0 500 820"><defs><linearGradient id="a" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -37.57 37.57 0 416.45 541)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#126FC6"/><stop offset="1" stop-color="#4C9CD1"/></linearGradient><linearGradient id="b" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -19.05 19.05 0 414.48 522.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2E6C97"/><stop offset="1" stop-color="#3883B7"/></linearGradient></defs><circle cx="252.31" cy="266.24" r="83.99" fill="#fff"/><path fill="url(#a)" stroke="url(#b)" stroke-width="1.1" d="M416.54 503.61c-6.57 0-12.04 5.7-12.04 11.87 0 2.78 1.56 6.3 2.7 8.74l9.3 17.88 9.26-17.88c1.13-2.43 2.74-5.79 2.74-8.74 0-6.18-5.38-11.87-11.96-11.87Zm0 7.16a4.69 4.69 0 1 1-.02 9.4 4.69 4.69 0 0 1 .02-9.4Z" transform="translate(-7889.1 -9807.44) scale(19.54)"/></svg>',
             iconSize: [25, 41],
             iconAnchor: [12.5, 41],
             popupAnchor: [0, -41],
             className: '',
         });
-
         super.connect();
     }
 
-    protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: {
-                ...payload,
-                leaflet: L,
-            },
-        });
-    }
-
-    protected doCreateMap({
-        center,
-        zoom,
-        options,
-    }: { center: Point | null; zoom: number | null; options: MapOptions }): L.Map {
-        const map = L.map(this.element, {
+    protected doCreateMap({ center, zoom, options }: { center: Point; zoom: number; options: MapOptions }): LeafletMap {
+        const map = createMap(this.element, {
             ...options,
-            center: center === null ? undefined : center,
-            zoom: zoom === null ? undefined : zoom,
+            center,
+            zoom,
         });
 
-        L.tileLayer(options.tileLayer.url, {
+        createTileLayer(options.tileLayer.url, {
             attribution: options.tileLayer.attribution,
             ...options.tileLayer.options,
         }).addTo(map);
@@ -57,10 +50,10 @@ export default class extends AbstractMapController<
         return map;
     }
 
-    protected doCreateMarker(definition: MarkerDefinition): L.Marker {
+    protected doCreateMarker(definition: MarkerDefinition): Marker {
         const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
 
-        const marker = L.marker(position, { title, ...otherOptions, ...rawOptions }).addTo(this.map);
+        const marker = createMarker(position, { title, ...otherOptions, ...rawOptions }).addTo(this.map);
 
         if (infoWindow) {
             this.createInfoWindow({ definition: infoWindow, marker });
@@ -74,8 +67,8 @@ export default class extends AbstractMapController<
         marker,
     }: {
         definition: MarkerDefinition['infoWindow'];
-        marker: L.Marker;
-    }): L.Popup {
+        marker: Marker;
+    }): Popup {
         const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
 
         marker.bindPopup([headerContent, content].filter((x) => x).join('<br>'), { ...otherOptions, ...rawOptions });
@@ -96,7 +89,7 @@ export default class extends AbstractMapController<
         }
 
         this.map.fitBounds(
-            this.markers.map((marker: L.Marker) => {
+            this.markers.map((marker: Marker) => {
                 const position = marker.getLatLng();
 
                 return [position.lat, position.lng];
diff --git a/src/Map/src/Bridge/Leaflet/composer.json b/src/Map/src/Bridge/Leaflet/composer.json
index 16aa04b5..a6d916b4 100644
--- a/src/Map/src/Bridge/Leaflet/composer.json
+++ b/src/Map/src/Bridge/Leaflet/composer.json
@@ -2,7 +2,7 @@
     "name": "symfony/ux-leaflet-map",
     "type": "symfony-ux-map-bridge",
     "description": "Symfony UX Map Leaflet Bridge",
-    "keywords": ["symfony-ux", "leaflet", "map"],
+    "keywords": ["leaflet", "map", "symfony", "ux"],
     "homepage": "https://symfony.com",
     "license": "MIT",
     "authors": [
diff --git a/src/Map/src/Map.php b/src/Map/src/Map.php
index 834e0d3d..77ad7656 100644
--- a/src/Map/src/Map.php
+++ b/src/Map/src/Map.php
@@ -85,18 +85,16 @@ final class Map
 
     public function toArray(): array
     {
-        if (!$this->fitBoundsToMarkers) {
-            if (null === $this->center) {
-                throw new InvalidArgumentException('The map "center" must be explicitly set when not enabling "fitBoundsToMarkers" feature.');
-            }
-
-            if (null === $this->zoom) {
-                throw new InvalidArgumentException('The map "zoom" must be explicitly set when not enabling "fitBoundsToMarkers" feature.');
-            }
+        if (null === $this->center) {
+            throw new InvalidArgumentException('The center of the map must be set.');
+        }
+
+        if (null === $this->zoom) {
+            throw new InvalidArgumentException('The zoom of the map must be set.');
         }
 
         return [
-            'center' => $this->center?->toArray(),
+            'center' => $this->center->toArray(),
             'zoom' => $this->zoom,
             'fitBoundsToMarkers' => $this->fitBoundsToMarkers,
             'options' => (object) ($this->options?->toArray() ?? []),


Test patch:
diff --git a/src/Map/assets/test/abstract_map_controller.test.ts b/src/Map/assets/test/abstract_map_controller.test.ts
index 0beadef2..1c174771 100644
--- a/src/Map/assets/test/abstract_map_controller.test.ts
+++ b/src/Map/assets/test/abstract_map_controller.test.ts
@@ -2,16 +2,8 @@ import { Application } from '@hotwired/stimulus';
 import { getByTestId, waitFor } from '@testing-library/dom';
 import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
 import AbstractMapController from '../src/abstract_map_controller.ts';
-import * as L from 'leaflet';
 
 class MyMapController extends AbstractMapController {
-    protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: payload,
-        });
-    }
-
     doCreateMap({ center, zoom, options }) {
         return { map: 'map', center, zoom, options };
     }
diff --git a/src/Map/src/Bridge/Google/assets/test/map_controller.test.ts b/src/Map/src/Bridge/Google/assets/test/map_controller.test.ts
index 1db8edff..ebaf6375 100644
--- a/src/Map/src/Bridge/Google/assets/test/map_controller.test.ts
+++ b/src/Map/src/Bridge/Google/assets/test/map_controller.test.ts
@@ -40,7 +40,7 @@ describe('GoogleMapsController', () => {
               data-testid="map"
               data-controller="check google" 
               style="height&#x3A;&#x20;700px&#x3B;&#x20;margin&#x3A;&#x20;10px" 
-              data-google-provider-options-value="&#x7B;&quot;version&quot;&#x3A;&quot;weekly&quot;,&quot;libraries&quot;&#x3A;&#x5B;&quot;maps&quot;,&quot;marker&quot;&#x5D;,&quot;apiKey&quot;&#x3A;&quot;&quot;&#x7D;" 
+              data-google-provider-options-value="&#x7B;&quot;language&quot;&#x3A;&quot;fr&quot;,&quot;region&quot;&#x3A;&quot;FR&quot;,&quot;retries&quot;&#x3A;10,&quot;version&quot;&#x3A;&quot;weekly&quot;,&quot;apiKey&quot;&#x3A;&quot;&quot;&#x7D;" 
               data-google-view-value="&#x7B;&quot;center&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;zoom&quot;&#x3A;4,&quot;fitBoundsToMarkers&quot;&#x3A;true,&quot;options&quot;&#x3A;&#x7B;&quot;mapId&quot;&#x3A;&quot;YOUR_MAP_ID&quot;,&quot;gestureHandling&quot;&#x3A;&quot;auto&quot;,&quot;backgroundColor&quot;&#x3A;null,&quot;disableDoubleClickZoom&quot;&#x3A;false,&quot;zoomControl&quot;&#x3A;true,&quot;zoomControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;22&#x7D;,&quot;mapTypeControl&quot;&#x3A;true,&quot;mapTypeControlOptions&quot;&#x3A;&#x7B;&quot;mapTypeIds&quot;&#x3A;&#x5B;&#x5D;,&quot;position&quot;&#x3A;14,&quot;style&quot;&#x3A;0&#x7D;,&quot;streetViewControl&quot;&#x3A;true,&quot;streetViewControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;22&#x7D;,&quot;fullscreenControl&quot;&#x3A;true,&quot;fullscreenControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;20&#x7D;&#x7D;,&quot;markers&quot;&#x3A;&#x5B;&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Paris&quot;,&quot;infoWindow&quot;&#x3A;null&#x7D;,&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;45.764,&quot;lng&quot;&#x3A;4.8357&#x7D;,&quot;title&quot;&#x3A;&quot;Lyon&quot;,&quot;infoWindow&quot;&#x3A;&#x7B;&quot;headerContent&quot;&#x3A;&quot;&lt;b&gt;Lyon&lt;&#x5C;&#x2F;b&gt;&quot;,&quot;content&quot;&#x3A;&quot;The&#x20;French&#x20;town&#x20;in&#x20;the&#x20;historic&#x20;Rh&#x5C;u00f4ne-Alpes&#x20;region,&#x20;located&#x20;at&#x20;the&#x20;junction&#x20;of&#x20;the&#x20;Rh&#x5C;u00f4ne&#x20;and&#x20;Sa&#x5C;u00f4ne&#x20;rivers.&quot;,&quot;position&quot;&#x3A;null,&quot;opened&quot;&#x3A;false,&quot;autoClose&quot;&#x3A;true&#x7D;&#x7D;&#x5D;&#x7D;"
           ></div>
         `);
diff --git a/src/Map/src/Bridge/Google/tests/GoogleRendererFactoryTest.php b/src/Map/src/Bridge/Google/tests/GoogleRendererFactoryTest.php
index eac705cf..98542249 100644
--- a/src/Map/src/Bridge/Google/tests/GoogleRendererFactoryTest.php
+++ b/src/Map/src/Bridge/Google/tests/GoogleRendererFactoryTest.php
@@ -32,19 +32,14 @@ final class GoogleRendererFactoryTest extends RendererFactoryTestCase
     public static function createRenderer(): iterable
     {
         yield [
-            'google://*******************@default/?version=weekly&libraries%5B0%5D=maps&libraries%5B1%5D=marker',
+            'google://*******************@default/?version=weekly',
             'google://GOOGLE_MAPS_API_KEY@default',
         ];
 
         yield [
-            'google://*******************@default/?version=quartly&libraries%5B0%5D=maps&libraries%5B1%5D=marker',
+            'google://*******************@default/?version=quartly',
             'google://GOOGLE_MAPS_API_KEY@default?version=quartly',
         ];
-
-        yield [
-            'google://*******************@default/?version=quartly&libraries%5B0%5D=maps&libraries%5B1%5D=marker&libraries%5B2%5D=geometry',
-            'google://GOOGLE_MAPS_API_KEY@default?version=quartly&libraries[]=geometry',
-        ];
     }
 
     public static function unsupportedSchemeRenderer(): iterable
diff --git a/src/Map/tests/MapTest.php b/src/Map/tests/MapTest.php
index c108e8f6..293aa973 100644
--- a/src/Map/tests/MapTest.php
+++ b/src/Map/tests/MapTest.php
@@ -24,7 +24,7 @@ class MapTest extends TestCase
     public function testCenterValidation(): void
     {
         self::expectException(InvalidArgumentException::class);
-        self::expectExceptionMessage('The map "center" must be explicitly set when not enabling "fitBoundsToMarkers" feature.');
+        self::expectExceptionMessage('The center of the map must be set.');
 
         $map = new Map();
         $map->toArray();
@@ -33,7 +33,7 @@ class MapTest extends TestCase
     public function testZoomValidation(): void
     {
         self::expectException(InvalidArgumentException::class);
-        self::expectExceptionMessage('The map "zoom" must be explicitly set when not enabling "fitBoundsToMarkers" feature.');
+        self::expectExceptionMessage('The zoom of the map must be set.');
 
         $map = new Map(
             center: new Point(48.8566, 2.3522)
@@ -41,23 +41,6 @@ class MapTest extends TestCase
         $map->toArray();
     }
 
-    public function testZoomAndCenterCanBeOmittedIfFitBoundsToMarkers(): void
-    {
-        $map = new Map(
-            fitBoundsToMarkers: true
-        );
-
-        $array = $map->toArray();
-
-        self::assertSame([
-            'center' => null,
-            'zoom' => null,
-            'fitBoundsToMarkers' => true,
-            'options' => $array['options'],
-            'markers' => [],
-        ], $array);
-    }
-
     public function testWithMinimumConfiguration(): void
     {
         $map = new Map();