Gmaps Iframe

[webSF]

Hello,

I’m using X, with the “Agency” setup and the Stack “Icon”.

I’m finishing the site by entering the map.
I have a map on the home page and one on the contact page.

I have no possibility to generate the google maps API code, so I would like to use a google maps iframe.

I inserted the iframe code google maps into a “classic map embed”

The problem is that, unlike the map that uses the API, it is not responsive and takes up different spaces than the API module.

Can you help me to make the “classic map embed” module through CSS or other solution as close as possible to the original “classic google maps” module that uses the API?

Thanks a lot

[ruenel]

Hi @webSF,

Thank you for a very detailed post information. Please be advised that with embedded Google map, you do not have any controls on the contents of the iframe. All the styling inside the iframe is coming from Google Maps itself. There is no way you can adjust or even alter any of the contents inside the iframe.

Please check out this links instead:

• https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDesktop&hl=en
• https://stackoverflow.com/questions/27736481/set-the-center-of-a-embedded-map-google-map-to-a-specific-location

Hope this helps.

[webSF]

Hi @RueNel,

Thanks for the reply

I badly explained myself

I wouldn’t want to change the content inside the iframe, but the space occupied by the iframe module to make it look like spaces to the demo.

In practice I would like to extend it, keeping everything responsive, but I don’t know how to do it

I enclose an image in the next post

[webSF]

Thank you so much

[webSF]

Other details

[christian]

Hey @webSF,

It’s all in the aspect ratio. If you’ve noticed, the map in our demo is close to a square compared to your map which is a narrow horizontal rectangle. You’ll need a vertical rectangle to match the length of the content in the right column.

Try changing the Content Aspect Ratio under the Frame partial to 16 : 16 or even higher like 16 : 20. Note that you’re not limited to 16. You can do 1:7. For more details about the Frame Partial, please watch the tutorial video at https://theme.co/apex/forum/t/elements-using-partials/213

Alternatively, you can switch to Fixed Height Content Sizing and just adjust the height. The with will just be full width of the content.

Hope that helps.

[webSF]

All solved, thanks!!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.