Responsive Google Maps iframe

  • Unknown's avatar
    anghelusalin333 · Member ·

    I’m adding a Google Maps iframe to the website, but I am forced to have it’s width to 350 pixels so it doesn’t break the site for viewers on iPhone SE(or any device with 375 width)
    Now this makes the map a bit too small for PC users so I would like to know if I can make it responsive in any way?
    Given the size of the project, only the Personal plan would apply to my client, therefore I can’t use CSS or custom JS since those are locked behind a Premium plan.
    Any tips on how to fix this?

    WP.com: Yes
    Jetpack: No
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    Due to limitations in the way that iFrames are implemented, the dimensions of embed is controlled on Google’s end, and cannot be overridden by CSS. It is possible to add a static value (for height or width) directly into the code as provided by Google, but there is no additional customization that can be done here within WordPress.com

    Instead you may want to consider using our Map Block, which will allow you to specify an address and place a pin on the map, and is mobile-responsive so it will automatically resize on desktop and mobile:

    WP
    Blocks (The Full List) » Map Block
    in WordPress.com Support
    3 min read
    With the map block you can add a map to any post or page on your site. Add a Map Block In order to add a map block, click on the Block Inserter + icon. You can also type /map and hit enter in a new paragraph block to add one quickly. For more information, visit our detailed instructions on adding blocks. Block Interface Each block has its own block-specific controls that al

    It may also be possible to add a plugin to the site to add map functionality that is not built into WordPress already, but that does require the Business Plan (or higher) so I will understand if this is not in your client’s budget.

    It is worth noting however that the Business Plan comes with priority support (including live chat option) so this could actually be a good buy for your client in the long run, since it will mean that after the site is launched they could contact us for ongoing support. I this case you would no longer need to be the primary point of contact for their questions once the project is complete, which would free you up to take on more projects instead.

    Hope that helps. Please let us know if you have any more questions.

  • The topic ‘Responsive Google Maps iframe’ is closed to new replies.