24 September 2013 | Web Development

How to remove info bubble for embedded Google maps

We all love Google Maps. But the default embed code comes with an info bubble.

And sometimes you simply don’t want that bubble.
Here’s a neat trick add:


to the end of the iframe src attribute.

Default embed code with bubble:

<iframe width="698" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.nz/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=99+Motions+Road+Auckland&amp;aq=&amp;sll=-40.799894,175.310128&amp;sspn=62.796525,81.650391&amp;ie=UTF8&amp;hq=&amp;hnear=99+Motions+Rd,+Western+Springs,+Auckland+1022&amp;t=m&amp;ll=-36.864103,174.719696&amp;spn=0.024034,0.05991&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>

Without bubble:

<iframe width="698" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.nz/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=99+Motions+Road+Auckland&amp;aq=&amp;sll=-40.799894,175.310128&amp;sspn=62.796525,81.650391&amp;ie=UTF8&amp;hq=&amp;hnear=99+Motions+Rd,+Western+Springs,+Auckland+1022&amp;t=m&amp;ll=-36.864103,174.719696&amp;spn=0.024034,0.05991&amp;z=14&amp;iwloc=A&amp;output=embed&iwloc=near"></iframe>

Bonus tip!

If you do like the info bubble. Make sure the full bubble is visible. If you’re pin is centered (default) most likely the info in the bubble won’t be readable (see 1st example above). Here’s the fix. Hit the ‘Customise and preview embedded map’ link in Google Maps, customise Width and Height (if necessary) and drag the map so the full bubble is visible. Copy and Past the embed code and ‘Bob is your uncle’.

Leave a Reply

Your email address will not be published. Required fields are marked *

By leaving a comment you agree with the storage and handling of your data by this website. You can learn more about how we handle you comment information in our Privacy Policy. We are using Akismet to reduce comment spam. Learn how they process your comment data.