|
| 1 | +# Symfony UX Map: Google Maps |
| 2 | + |
| 3 | +[Google Maps](https://developers.google.com/maps/documentation/javascript/overview) integration for Symfony UX Map. |
| 4 | + |
| 5 | +## DSN example |
| 6 | + |
| 7 | +```dotenv |
| 8 | +UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default |
| 9 | +
|
| 10 | +# With options |
| 11 | +UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?version=weekly |
| 12 | +UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?language=fr®ion=FR |
| 13 | +``` |
| 14 | + |
| 15 | +Available options: |
| 16 | + |
| 17 | +| Option | Description | Default | |
| 18 | +|------------|------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------| |
| 19 | +| `id` | The id of the script tag | `__googleMapsScriptId` | |
| 20 | +| `language` | Force language, see [list of supported languages](https://developers.google.com/maps/faq#languagesupport) specified in the browser | The user's preferred language | |
| 21 | +| `region` | Unicode region subtag identifiers compatible with [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) | | |
| 22 | +| `nonce` | Use a cryptographic nonce attribute | | |
| 23 | +| `retries` | The number of script load retries | 3 | |
| 24 | +| `url` | Custom url to load the Google Maps API script | `https://maps.googleapis.com/maps/api/js` | |
| 25 | +| `version` | The release channels or version numbers | `weekly` | |
| 26 | + |
| 27 | +## Map options |
| 28 | + |
| 29 | +You can use the `GoogleOptions` class to configure your `Map`:: |
| 30 | + |
| 31 | +```php |
| 32 | +use Symfony\UX\Map\Bridge\Google\GoogleOptions; |
| 33 | +use Symfony\UX\Map\Bridge\Google\Option\ControlPosition; |
| 34 | +use Symfony\UX\Map\Bridge\Google\Option\FullscreenControlOptions; |
| 35 | +use Symfony\UX\Map\Bridge\Google\Option\GestureHandling; |
| 36 | +use Symfony\UX\Map\Bridge\Google\Option\MapTypeControlOptions; |
| 37 | +use Symfony\UX\Map\Bridge\Google\Option\MapTypeControlStyle; |
| 38 | +use Symfony\UX\Map\Bridge\Google\Option\StreetViewControlOptions; |
| 39 | +use Symfony\UX\Map\Bridge\Google\Option\ZoomControlOptions; |
| 40 | +use Symfony\UX\Map\Point; |
| 41 | +use Symfony\UX\Map\Map; |
| 42 | + |
| 43 | +$map = (new Map()) |
| 44 | + ->center(new Point(48.8566, 2.3522)) |
| 45 | + ->zoom(6); |
| 46 | + |
| 47 | +// To configure controls options, and some other options: |
| 48 | +$googleOptions = (new GoogleOptions()) |
| 49 | + ->mapId('YOUR_MAP_ID') |
| 50 | + ->gestureHandling(GestureHandling::GREEDY) |
| 51 | + ->backgroundColor('#f00') |
| 52 | + ->doubleClickZoom(true) |
| 53 | + ->zoomControlOptions(new ZoomControlOptions( |
| 54 | + position: ControlPosition::BLOCK_START_INLINE_END, |
| 55 | + )) |
| 56 | + ->mapTypeControlOptions(new MapTypeControlOptions( |
| 57 | + mapTypeIds: ['roadmap'], |
| 58 | + position: ControlPosition::INLINE_END_BLOCK_START, |
| 59 | + style: MapTypeControlStyle::DROPDOWN_MENU, |
| 60 | + )) |
| 61 | + ->streetViewControlOptions(new StreetViewControlOptions( |
| 62 | + position: ControlPosition::BLOCK_END_INLINE_START, |
| 63 | + )) |
| 64 | + ->fullscreenControlOptions(new FullscreenControlOptions( |
| 65 | + position: ControlPosition::INLINE_START_BLOCK_END, |
| 66 | + )) |
| 67 | +; |
| 68 | + |
| 69 | +// To disable controls: |
| 70 | +$googleOptions = (new GoogleOptions()) |
| 71 | + ->mapId('YOUR_MAP_ID') |
| 72 | + ->zoomControl(false) |
| 73 | + ->mapTypeControl(false) |
| 74 | + ->streetViewControl(false) |
| 75 | + ->fullscreenControl(false) |
| 76 | +; |
| 77 | + |
| 78 | +// Add the custom options to the map |
| 79 | +$map->options($googleOptions); |
| 80 | +``` |
| 81 | + |
| 82 | +## Resources |
| 83 | + |
| 84 | +- [Documentation](https://symfony.com/bundles/ux-map/current/index.html) |
| 85 | +- [Report issues](https://github.com/symfony/ux/issues) and |
| 86 | + [send Pull Requests](https://github.com/symfony/ux/pulls) |
| 87 | + in the [main Symfony UX repository](https://github.com/symfony/ux) |
0 commit comments