GithubHelp home page GithubHelp logo

Comments (13)

thomasschadron avatar thomasschadron commented on May 23, 2024 1

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

from iframemanager.

orestbida avatar orestbida commented on May 23, 2024 1

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.

from iframemanager.

orestbida avatar orestbida commented on May 23, 2024

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.

from iframemanager.

thomasschadron avatar thomasschadron commented on May 23, 2024

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

from iframemanager.

orestbida avatar orestbida commented on May 23, 2024

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

from iframemanager.

thomasschadron avatar thomasschadron commented on May 23, 2024

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

from iframemanager.

orestbida avatar orestbida commented on May 23, 2024

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.

from iframemanager.

rabandy avatar rabandy commented on May 23, 2024

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

from iframemanager.

rabandy avatar rabandy commented on May 23, 2024

Hi @orestbida,

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

from iframemanager.

5ulo avatar 5ulo commented on May 23, 2024

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

from iframemanager.

5ulo avatar 5ulo commented on May 23, 2024

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.

from iframemanager.

stale avatar stale commented on May 23, 2024

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.

from iframemanager.

stale avatar stale commented on May 23, 2024

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.

from iframemanager.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.