PHPackages symfony/ux-google-map - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. symfony/ux-google-map ActiveSymfony-ux-map-bridge[Utility & Helpers](/categories/utility) symfony/ux-google-map ===================== Symfony UX Map GoogleMaps Bridge v2.34.0(1mo ago)933.7k—2.3%1MITPHPPHP >=8.1 Since Aug 9Pushed 1mo ago3 watchersCompare [ Source](https://github.com/symfony/ux-google-map)[ Packagist](https://packagist.org/packages/symfony/ux-google-map)[ Docs](https://symfony.com)[ Fund](https://symfony.com/sponsor)[ GitHub Sponsors](https://github.com/fabpot)[ RSS](/packages/symfony-ux-google-map/feed)WikiDiscussions 2.x Synced 1mo ago READMEChangelog (2)Dependencies (12)Versions (28)Used By (0) Symfony UX Map: Google Maps =========================== [](#symfony-ux-map-google-maps) [Google Maps](https://developers.google.com/maps/documentation/javascript/overview) integration for Symfony UX Map. Installation ------------ [](#installation) Install the bridge using Composer and Symfony Flex: ``` composer require symfony/ux-google-map ``` If you're using WebpackEncore, install your assets and restart Encore (not needed if you're using AssetMapper): ``` npm install --force npm run watch ``` Note Alternatively, [@symfony/ux-google-map package](https://www.npmjs.com/package/@symfony/ux-google-map) can be used to install the JavaScript assets without requiring PHP. DSN example ----------- [](#dsn-example) ``` 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®ion=FR UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?libraries[]=geometry&libraries[]=places ``` Available options: OptionDescriptionDefault`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 browserThe 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 retries3`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 loadedMap options ----------- [](#map-options) You can use the `GoogleOptions` class to configure your `Map`:: ``` use Symfony\UX\Map\Bridge\Google\GoogleOptions; use Symfony\UX\Map\Bridge\Google\Option\ControlPosition; use Symfony\UX\Map\Bridge\Google\Option\FullscreenControlOptions; use Symfony\UX\Map\Bridge\Google\Option\GestureHandling; use Symfony\UX\Map\Bridge\Google\Option\MapTypeControlOptions; use Symfony\UX\Map\Bridge\Google\Option\MapTypeControlStyle; use Symfony\UX\Map\Bridge\Google\Option\StreetViewControlOptions; use Symfony\UX\Map\Bridge\Google\Option\ZoomControlOptions; use Symfony\UX\Map\Point; use Symfony\UX\Map\Map; $map = (new Map()) ->center(new Point(48.8566, 2.3522)) ->zoom(6); // To configure control options and other map options: $googleOptions = (new GoogleOptions()) // You can skip this option if you configure "ux_map.google_maps.default_map_id" // in your "config/packages/ux_map.yaml". ->mapId('YOUR_MAP_ID') ->gestureHandling(GestureHandling::GREEDY) ->backgroundColor('#f00') ->doubleClickZoom(true) ->zoomControlOptions(new ZoomControlOptions( position: ControlPosition::BLOCK_START_INLINE_END, )) ->mapTypeControlOptions(new MapTypeControlOptions( mapTypeIds: ['roadmap'], position: ControlPosition::INLINE_END_BLOCK_START, style: MapTypeControlStyle::DROPDOWN_MENU, )) ->streetViewControlOptions(new StreetViewControlOptions( position: ControlPosition::BLOCK_END_INLINE_START, )) ->fullscreenControlOptions(new FullscreenControlOptions( position: ControlPosition::INLINE_START_BLOCK_END, )) ; // To disable controls: $googleOptions = (new GoogleOptions()) ->mapId('YOUR_MAP_ID') ->zoomControl(false) ->mapTypeControl(false) ->streetViewControl(false) ->fullscreenControl(false) ; // Add the custom options to the map $map->options($googleOptions); ``` Use cases --------- [](#use-cases) Below are some common or advanced use cases when using a map. ### Customize the marker [](#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: ``` {{ ux_map(map, {'data-controller': 'my-map' }) }} ``` You can create a Stimulus controller to customize the markers before they are created: ``` // 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.bridgeOptions` 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 a 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.bridgeOptions = { content: beachFlagImg, }; // 2. To use a custom glyph for the marker const pinElement = new google.maps.marker.PinElement({ // Note: instead of using a 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.bridgeOptions = { content: pinElement.element, }; } } ``` Resources --------- [](#resources) - [Documentation](https://symfony.com/bundles/ux-map/current/index.html) - [Report issues](https://github.com/symfony/ux/issues) and [send Pull Requests](https://github.com/symfony/ux/pulls)in the [main Symfony UX repository](https://github.com/symfony/ux) ### Health Score 53 — FairBetter than 97% of packages Maintenance88 Actively maintained with recent releases Popularity36 Limited adoption so far Community19 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 75.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~21 days Total 28 Last Release 56d ago Major Versions 2.x-dev → 3.x-dev2026-03-23 PHP version history (3 changes)v2.19.0PHP >=8.3 v2.25.0PHP >=8.1 3.x-devPHP >=8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/47313?v=4)[Fabien Potencier](/maintainers/fabpot)[@fabpot](https://github.com/fabpot) --- Top Contributors [![Kocal](https://avatars.githubusercontent.com/u/2103975?v=4)](https://github.com/Kocal "Kocal (90 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (9 commits)")[![kbond](https://avatars.githubusercontent.com/u/127811?v=4)](https://github.com/kbond "kbond (3 commits)")[![sblondeau](https://avatars.githubusercontent.com/u/6573541?v=4)](https://github.com/sblondeau "sblondeau (3 commits)")[![Valmonzo](https://avatars.githubusercontent.com/u/105214243?v=4)](https://github.com/Valmonzo "Valmonzo (3 commits)")[![smnandre](https://avatars.githubusercontent.com/u/1359581?v=4)](https://github.com/smnandre "smnandre (2 commits)")[![rrr63](https://avatars.githubusercontent.com/u/46089601?v=4)](https://github.com/rrr63 "rrr63 (1 commits)")[![StevenRenaux](https://avatars.githubusercontent.com/u/59167761?v=4)](https://github.com/StevenRenaux "StevenRenaux (1 commits)")[![tacman](https://avatars.githubusercontent.com/u/619585?v=4)](https://github.com/tacman "tacman (1 commits)")[![nicolas-grekas](https://avatars.githubusercontent.com/u/243674?v=4)](https://github.com/nicolas-grekas "nicolas-grekas (1 commits)")[![chadyred](https://avatars.githubusercontent.com/u/5954673?v=4)](https://github.com/chadyred "chadyred (1 commits)")[![ker0x](https://avatars.githubusercontent.com/u/5331654?v=4)](https://github.com/ker0x "ker0x (1 commits)")[![mart-insiders](https://avatars.githubusercontent.com/u/144009141?v=4)](https://github.com/mart-insiders "mart-insiders (1 commits)")[![alexander-schranz](https://avatars.githubusercontent.com/u/1698337?v=4)](https://github.com/alexander-schranz "alexander-schranz (1 commits)")[![raphael-geffroy](https://avatars.githubusercontent.com/u/81738559?v=4)](https://github.com/raphael-geffroy "raphael-geffroy (1 commits)") --- Tags google-mapsjavascriptmapsymfonysymfony-uxuxsymfony-uxmapgoogle maps ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/symfony-ux-google-map/health.svg) ``` [![Health](https://phpackages.com/badges/symfony-ux-google-map/health.svg)](https://phpackages.com/packages/symfony-ux-google-map) ``` ### Alternatives [symfony/ux-turbo Hotwire Turbo integration for Symfony 3906.8M47](/packages/symfony-ux-turbo)[symfony/ux-leaflet-map Symfony UX Map Leaflet Bridge 13146.6k1](/packages/symfony-ux-leaflet-map)[symfony/ux-chartjs Chart.js integration for Symfony 1003.2M18](/packages/symfony-ux-chartjs)[symfony/ux-map Easily embed interactive maps in your Symfony application 18178.5k4](/packages/symfony-ux-map)[symfony/ux-react Integration of React in Symfony 371.4M3](/packages/symfony-ux-react)[symfony/ux-vue Integration of Vue.js in Symfony 35834.3k4](/packages/symfony-ux-vue) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)