Search code examples
google-mapsgoogle-maps-api-3

Google Map with iframe

I am trying to show Google Map in WordPress Website using Elementor. I am using this iframe <iframe src="https://www.google.com/maps/d/embed?mid=1lpxvIAeOhsxqMqQ2GrFNzonnDCmZe6o&ehbc=2E312F&z=17&hl=en" width="640" height="480"></iframe>. But I am getting a Black Top bar as like this image.

enter image description here

How can I remove the Black Top bar ? Actually I am not getting Google API Key.

Solution

  • You're embedding a Google My Maps map (probably to specifically pin your location), so you don't actually need an API key, but it has that limitation of putting that bar with the title of the map.

    To work around it you have two options:

    Option 1

    When using Elementor's free version, and when you don't use any addons that include a Google Maps widget, use the HTML Widget that's included with Elementor, and embed your map like so:

    <div style="overflow:hidden;">
<iframe style="position:relative; top:-67px;" src="https://www.google.com/maps/d/embed?mid=1lpxvIAeOhsxqMqQ2GrFNzonnDCmZe6o&ehbc=2E312F&z=17&hl=en" width="640" height="480">
</iframe>
</div>

    Why does this works?

    You're placing your iframe within a div tag that has overflow:hidden css attribute, meaning that whatever "overflows" this div will be automatically hidden.

    The iframe has position:relative; top:-67px; css attributes which places the embed -67 pixels from the top of the iframe, causing it to overflow the div, hiding the bar.

    Option 2 (tidier)

    By searching for the address on Google Maps you can select to share it, and get the embed code, without having the bar, as this is Google Maps, and not Google My Maps:

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3651.0616209302098!2d90.41976748458553!3d23.78081993257394!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c796d245d8b7%3A0xeef970e7b9b7ff7e!2sMini%20Plaza%2C%20Ga%20-%2093%20Gulshan%20Badda%20Link%20Rd%2C%20Dhaka%201212%2C%20Bangladesh!5e0!3m2!1sen!2sil!4v1693302232785!5m2!1sen!2sil" width="640" height="480" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    Google's instructions for sharing the embed are here.

    Your address in a Google Maps embed

    Either way, you won't have your business name on the map, but you can always add it as a header above the HTML widget or add your place to Google Maps.