glitchr/ux-google

Google API integration for Symfony

1.0.x-dev 2026-02-17 03:03 UTC

Requires

• php: ^8.0
• google/apiclient: ^2.12
• google/recaptcha: ^1.2
• league/flysystem-bundle: ^3.1
• symfony/config: ^4.0|^5.0|^6.0|^7.0
• symfony/dependency-injection: ^4.0|^5.0|^6.0|^7.0
• symfony/framework-bundle: ^4.0|^5.0|^6.0|^7.0
• symfony/http-kernel: ^4.0|^5.0|^6.0|^7.0
• symfony/webpack-encore-bundle: ^2.1

Requires (Dev)

• phpunit/phpunit: ^8.5
• symfony/twig-bundle: ^4.0|^5.0|^6.0|^7.0
• symfony/var-dumper: ^4.0|^5.0|^6.0|^7.0

LGPL-3.0-or-later

• Marco Meyer

• symfony
• api
• recaptcha
• analytics
• google
• tag
• maps
• gtm

README

Google Maps integration with html2canvas support for Symfony applications.

Requirements

• jQuery 3.0+ must be loaded globally before this bundle's scripts
• Symfony Webpack Encore for asset compilation

Installation

1. Install dependencies:

   npm install
   

2. Build assets:

   make assets APP_DEBUG=0
   # or
   npm run prod
   

jQuery Configuration

Important: This package expects jQuery to be available globally as window.jQuery and window.$.

In your main application

Make sure your webpack.config.js treats jQuery as an external dependency:

Encore
    .addExternals({
        jquery: 'jQuery'
    })

And load jQuery from CDN in your base template before loading this bundle's scripts:

<script src="https://code.jquery.com/jquery-3.6.2.min.js"></script>
<script src="/bundles/google/maps.js"></script>

Usage

In Twig templates:

{{ google_maps("myMap", {
    "html2canvas": true,
    "style": "height:400px; width:100%;"
}) }}

Export/Suppress buttons:

{{ google_maps_export("myMap", {
    "text": "Export"
}) }}

{{ google_maps_suppress("myMap", {
    "text": "×"
}) }}

jQuery Plugin API

The bundle provides a jQuery plugin for html2canvas:

$('#myMap').html2canvas('#myMap', {
    insert: 'prepend'
}, function(canvas) {
    // Callback when canvas is ready
    console.log('Canvas generated:', canvas);
});

Troubleshooting

$.fn.html2canvas is not a function

This error means jQuery was not loaded before maps.js, or jQuery is being replaced after maps.js loads.

Solution:

1. Ensure jQuery is loaded from CDN in your base template
2. Configure Webpack to use external jQuery (see "jQuery Configuration" above)
3. Don't import jQuery in your bootstrap.js or other entry files

License

LGPL-3.0-or-later