Adding {data-params} manually to an iFrame?

[sebastian-marinescu]

I'm currently integrating iframemanager into my project.
While integrating Google Maps, I came across a possible issue.

This is my template:

    <div class="im-embed embed-responsive-item" 
        data-title="Google Maps"
        data-service="maps" 
        data-id="[[+query:URLEncode:default=`[[++site_name:URLEncode]],[[++contact_street:URLEncode]],[[++contact_city:URLEncode]]`]]" 
        data-params="key=[[++google_api_key]]&language=[[++cultureKey]]&zoom=[[+zoom:default=`15`]]">
    </div>

And this is my configured service:

                maps: {
                    embedUrl: 'https://www.google.com/maps/embed/v1/place?q={data-id}&{data-params}',

                    iframe: {
                        allow : 'picture-in-picture; fullscreen;'
                    },

                    languages: {
                        de: getImTranslation('de', 'Google Maps', 'https://cloud.google.com/maps-platform/terms', 'Karte'),
                        en: getImTranslation('en', 'Google Maps', 'https://cloud.google.com/maps-platform/terms', 'Map'),
                        es: getImTranslation('es', 'Google Maps', 'https://cloud.google.com/maps-platform/terms', 'Mapa'),
                        fr: getImTranslation('fr', 'Google Maps', 'https://cloud.google.com/maps-platform/terms', 'Carte'),
                        it: getImTranslation('it', 'Google Maps', 'https://cloud.google.com/maps-platform/terms', 'Carta geografica')
                    }
                },

I know that in my case, I can just change the embedUrl to https://www.google.com/maps/embed/v1/place?q={data-id} and append everything in data-params inside data-id (which I am now doing).

But my thought was to have the id and the params separate, so I can then try to use the Static Maps API (or another service) to get a static thumbnail-image.

How would you tackle this problem?