iframemanager icon indicating copy to clipboard operation
iframemanager copied to clipboard

Published 20 hours ago • verified publisher icon orestbida

Could this concept be used with Google Maps

Open thomasschadron opened this issue 2 years ago • 11 comments

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

thomasschadron avatar 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.

orestbida avatar 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

thomasschadron avatar Dec 12 '21 17:12 thomasschadron

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

orestbida avatar 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 :-)

thomasschadron avatar 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" ... ?

thomasschadron avatar 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.

orestbida avatar 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:

image

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: image

rabandy avatar 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.

orestbida avatar Feb 27 '22 13:02 orestbida

Hi @orestbida,

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

rabandy avatar 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

5ulo avatar 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:

  1. 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>
  1. 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>
  1. 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.

5ulo avatar Jul 12 '22 17:07 5ulo