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

Fields marked * are required. Your email address will not be published.

  • (will not be published)