• Ruben

    (@rubenvankempen)


    Hi there,

    How do I display an iFrame using ACF?

    I’d like to display a iFrame with a route using ACF.
    I tried all the fields, but none seems to work.

    Please help.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi @rubenvankempen,

    could you please share how did you configure the custom field and how did you write the “code” so we can see how are you doing it?

    Thread Starter Ruben

    (@rubenvankempen)

    Hi @ibonazkoitia,

    Sure, but the page isn’t public yet.

    I’m using Elementor to build my website.
    I need to use a widget text because a HTML-widget can not use ACF.

    For example I tried:
    1. Adding text
    2. Input text = ACF-field #1
    3. On the backend the input #1 is the HTML-code of the iFrame
    4. HTML-code = copied from a Google Mymaps route

    <iframe src="https://www.google.nl/maps/d/u/0/embed?mid=19vLHjM6aRJHn2JhM53aFZPxL2vZ_RwBF" width="640" height="480"></iframe>

    Result: nothing shows

    Hi @rubenvankempen,

    so the plan is to render a Google Map, here you have different options:

    – Use the Google Map ACF field

    – In the text field, just put the URL that goes in the src=””, so by code you put the iframe and just add the src=”” dynamically

    – Use the Wysiwyg Editor with the “Text” view

    The problem with Elementor may be that they escape the “HTML” code for security reasons. I have no experience with Elementor, maybe you should contact their support. Also, maybe you can use the Elementor Google Maps Widget.

    Thread Starter Ruben

    (@rubenvankempen)

    Hi @ibonazkoitia

    Indeed I want to show a route on the Google Map.
    The data comes from a ACF field, because it is placed on a template for more pages.
    It needs to be shown using an iFrame.

    The options:
    1) Use the Google Map ACF field
    This is only for a adres. Not for a route.

    2) I don’t understand what you mean. Can you explain? Do I need to make an ACF-field with just text and put the https://www.google.nl/maps/d/u/0/embed?mid=19vLHjM6aRJHn2JhM53aFZPxL2vZ_RwBF there? You ask me to add the HTML-code for the iFrame and add the middle part of the code dynamically. How?

    3) Use the Wysiwyg Editor with the “Text” view.
    After adding the code to the editor nothing is shown. This does not work.

    4) Use Elementor Google Maps Widget.
    This is also just for showing a adress. Not possible for routes.

    Hi there!
    I′m in a similar situation.
    Did you solved this issue @rubenvankempen ?
    Regards!

    Thread Starter Ruben

    (@rubenvankempen)

    @gustavopascaner No, still not. ??
    I changed it to a simple image of a route for now.

    You can find my example at wielercafes.nl/route-berc-bike

    Hey Guys i once had this problem, but I tried my Best thinking on how to implement this maps on my elementor custom Post

    First I used all the ways mentioned above but nothing worked.

    I had this Plugin Called “Unlimited Elements for Elementor” which i was able to create a widget with code to display my maps

    See the Code Below

    
    <div class="my-maps">
      <iframe src="{{current_post.cf_itinerary_map}}" width="100%" height="500px" >
        
        
      </iframe>
      
    </div>
    

    First: Create Custom Field with URL type
    Second: Create widget Name the Widget (Iframe Map) Please Check tutorial on how to create Dynamic widget in Unlimited Elements for Elementor
    Third : Display your Map in the Template

    Enjoy

    • This reply was modified 3 years, 11 months ago by devjapheth.
    Thread Starter Ruben

    (@rubenvankempen)

    @devjapheth
    I don’t quite follow you. Let’s try again.

    1. Download, install and activate plugin Unlimited Elements for Elementor

    2. Create Custom Field with URL-type using extra fields

    3. Make a template

    4. Create a widget (what widget? where? how?)
    5. Name this widget IFrame Map
    6. Display the created widget on the created template

    7. Check tutorial (where?)

    8. Display your map in the template (how?)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘iFrame using ACF’ is closed to new replies.