iframemanager Could this concept be used with Google Maps

Hello, could this concept be used to get approval first with Google Maps before publishing the maps? If so, how would you do that?

Dec 11 '21 15:12 thomasschadron

Hi @thomasschadron,

yes, you have to follow the same concept as other "video" iframes.

Here is a full example (adapted from the official iframe embed example):

html:

<div
    data-service="GoogleMaps"
    data-id="Space+Needle,Seattle+WA"
    data-autoscale
></div>

javascript:

const iframemanager = iframemanager();

iframemanager.run({
    currLang: 'en',
    
    services : {
        GoogleMaps: {
            embedUrl: 'https://www.google.com/maps/embed/v1/place?key=API_KEY&q={data-id}',
            iframe: {
                allow : 'picture-in-picture; fullscreen;'
            },
            cookie: {
                name: 'cc_maps'
            },
            languages: {
                'en' : {
                    notice: 'Notice message ...',
                    loadBtn: 'Load map',
                    loadAllBtn: 'Don\'t ask again'
                }
            }
        }
    }
});

Needless to say that you need a valid API_KEY to embed the map.

I will add this example in the docs. for future users.

Dec 11 '21 18:12 orestbida

Hello, this is awesome. Thank you for sharing your experience. You should definitly add this example to the configuration examples.

But I took it one step further. Some of our google maps configurations are somewhat complex. So I made a seperate php page for them, with in the url some dynamic querystring-parameters (like an id for the place we want to show on the map), and loaded this page in an iframe. So this would be a php (or html) service. I changed the embedUrl to embedUrl:'/include/pagetoseperategooglemapspage.php?{data-id}',

The result works fine except the iframe shows the Google Maps result with a 2-5px black border around it. The initial thumbnailpicture is rendered like it should, with no border. How could we address this problem? With some iframe property within the service? google_maps_example_border

Dec 12 '21 17:12 thomasschadron

Mhm, I would need to check a demo with the described issue, to understand what's causing it.

Dec 12 '21 22:12 orestbida

I figured it out. The

of the page which is loaded trough the iframe has to be styled correctly: <body style="margin: 0;padding 0;">. Problem solved :-)

Dec 12 '21 23:12 thomasschadron

Hello, I guess it is out of scope but is there a way to dynamically load the iframe? When I click on a button to change the map within the iframe I can change the data-id attribute with some jquery but it loads the first given data-id. Or is there a way to trigger the script again? Or is there an id reference to the iframe (<iframe id="googlmaps" ... ?

Dec 27 '21 16:12 thomasschadron

Unfortunately this is not possible currently. The plugin scans the dom once, and "prepares" the iframes to be loaded on demand. It is not aware of any change which might occur after its initialization.

Dec 29 '21 22:12 orestbida

Hello, I'm trying to embed a google maps iframe without the API. It works, but the point on the map is not selected like it is on the normal iframe. Is there a solution for this? Thank you very much. @orestbida

Standard iframe: <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2659.4482749804133!2d11.644969316034478!3d48.19798087922823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479e7499e2d4c67f%3A0x32f7f02c5e77043a!2sM%C3%BCnchner+Str.+123%2C+85774+Unterf%C3%B6hring%2C+Germany!5e0!3m2!1sen!2sin!4v1565347252768!5m2!1sen!2sin" width="100%" height="457" frameborder="0" style="border:0"></iframe> Output:

With iframemanager: <div data-service="googlemaps" data-id="!1m18!1m12!1m3!1d2659.4482749804133!2d11.644969316034478!3d48.19798087922823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479e7499e2d4c67f%3A0x32f7f02c5e77043a!2sM%C3%BCnchner+Str.+123%2C+85774+Unterf%C3%B6hring%2C+Germany!5e0!3m2!1sen!2sin!4v1565347252768!5m2!1sen!2sin" data-autoscale> </div> Configuration: manager.run({ currLang: 'en', services : { googlemaps : { embedUrl: 'https://www.google.com/maps/embed?pb={data-id}', iframe : { allow : 'picture-in-picture; fullscreen;', }, cookie : { name : 'cc_maps' }, languages : { en : { notice: 'Notice message ...', loadBtn: 'Load map', loadAllBtn: 'Don\'t ask again' } } } } });;

Output:

Feb 27 '22 12:02 rabandy

Hi @rabandy,

it looks like the url is partly encoded. While this is fine when it is set as the iframe's src, things might break when the data-id attribute is parsed by the javascript code.

As of now you will have to fix this manually, by decoding the url (or part of the url) before placing it inside the data-id attribute.

For example, this string (encoded): !1m18!1m12!1m3!1d2659.4482749804133!2d11.644969316034478!3d48.19798087922823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479e7499e2d4c67f%3A0x32f7f02c5e77043a!2sM%C3%BCnchner+Str.+123%2C+85774+Unterf%C3%B6hring%2C+Germany!5e0!3m2!1sen!2sin!4v1565347252768!5m2!1sen!2sin

would become like this (decoded): !1m18!1m12!1m3!1d2659.4482749804133!2d11.644969316034478!3d48.19798087922823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479e7499e2d4c67f:0x32f7f02c5e77043a!2sMünchner Str. 123, 85774 Unterföhring, Germany!5e0!3m2!1sen!2sin!4v1565347252768!5m2!1sen!2sin

I used this online tool to decode the string.

Let me know if this fixes the issue, since I haven't tested it properly.

This fix will be included in the next v1.1 so that you won't need to manually decode the string each time.

Feb 27 '22 13:02 orestbida

Hi @orestbida,

it works like a charm. Thank you very much for your fast reply.

Feb 27 '22 13:02 rabandy

As @orestbida points the string needs to be decoded and fortunately you don't need to do that manually. embedUrl: 'https://www.google.com/maps/embed/v1/place?key=API_KEY&q='+decodeURIComponent('{data-id}'),

edit: I tested it out and it does not work, because the string passed to the decode function is only {data-id} and not the actual URI string. So the decoding must be done in the main iframemanager script or allowing function inside embedUrl the same way as in thumbnailUrl

Jun 15 '22 14:06 5ulo

Okay, so this is my very ugly solution how to make it work with Google Maps JS API together with iframemanager + cookieconsent plugin... very basic example:

initMap (must be before gmap api src)

<script type="text/plain" data-cookiecategory="targeting">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: XX.XXXX, lng: YY.YYYY },
  });
  const trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}
</script>

gmap API

<script type="text/plain" data-cookiecategory="targeting"
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap&libraries=&v=weekly"
    async
    ></script>

Add iframe's data-service div inside div where the GMap will be drawn. In my case it is #gmap

<div class="post__map" id="map">
    <div data-service="googlemaps" height="100%" data-id="" data-autoscale></div>
</div>

After enabling the iframe the gmap api will be called and overwrites everything inside #gmap. I know, this is not the best solution but hey, it is working.

Jul 12 '22 17:07 5ulo

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Dec 14 '22 00:12 stale[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Jan 13 '23 02:01 stale[bot]

iframemanager iframemanager copied to clipboard

Could this concept be used with Google Maps

iframemanager
iframemanager copied to clipboard