iFrame using ACF

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?

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.

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!

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

@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?)