In this week’s web design video blog, we take a look at how you can remove the ‘speech bubble’ from your Google Maps listing. In the video, we demonstrate that when you use Google Map’s free iframe method, the Speech Bubble appears by default. If, like on our contact page, you’re embedding the map quite small, then the map may look better having the bubble removed by default.
We should stress that Google are constantly evolving and changing the code that they give to webmasters for embedding Google Maps onto their web pages. This is our second update of this code, so it is important to bear in mind that it may stop working in the future.
The Default Code From Google
The first thing to do, if you haven’t done so already, is to embed your map using the default code supplied by Google. Here’s our example code that is copied straight from Google, without any editing:
<iframe width="578" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?hl=en&q=creare+group+lutterworth&ie=UTF8&hq=creare+group&hnear=Lutterworth,+Leicestershire,+United+Kingdom&ll=52.454897,-1.200747&spn=0.008068,0.022149&iwloc=A&output=embed"></iframe>
And here’s how it looks embedded:
As you can see, the Bubble is added by default, but is cut off, because the iframe dimensions are not big enough. What we’re looking to achieve; is to remove the Bubble, but keep the push-pin in place as normal.
How to remove the Bubble
At present, when you download you’re iframe code from Google, you need to identify whether or not it includes the ‘iwloc’ code, which will look something like this, sandwiched between two ampersand codes:
&iwloc=A&
If you’re code does include this, ALL you have to do, is simply remove the uppercase A like so:
&iwloc=&
If the above code is missing from iframe code that Google has given you, then you will need to add it in, exactly how it displays above. Here’s the code for our edited Google Map iframe:
<iframe width="578" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?hl=en&q=creare+group+lutterworth&ie=UTF8&hq=creare+group&hnear=Lutterworth,+Leicestershire,+United+Kingdom&ll=52.454897,-1.200747&spn=0.008068,0.022149&iwloc=&output=embed"></iframe>
And here’s how it looks actually embedded:
Hopefully, in the example above, you shouldn’t see the Speech Bubble. If you can, then Google has changed the embed code again, and this blog post will soon be updated!
Again, thanks to Zeth, who pasted this solution onto our previous blog post.
Thanks, but the tip about suppressing speech balloons on embedded Google Maps doesn’t seem to work any more. Also, would be great to get a transcript of the video instead of having to watch it.
Hey there.
Nice blog, but Google has seemed to take out the ‘iwloc=A&’ from the embed code. I saw that someone commented on the Youtube-video that you just had to add iwloc=& to the code – but where? I tried to add it different places (of course not at the same time) but it didn’t seem to work. How do you make the speech-bubble disappear now?
Thank you
Hi Zeth, indeed this coding adjustment no longer works with the new Google Maps embedding code that Google provide. Once we’ve identified how to do it, we will update this video blog, overwriting the old video. James.
Hi James.
Thanks for your reply. I figured out how to do it, so I figured I would give a contribution to your blog. You have to put the following code into the embedded Google Maps code: “iwloc=&” (without the quotes). I don’t know if it matters where you put it in (I haven’t experimented with this) but I figure that it does. In the embedded code, just after the ‘maps.google.com.au/maps’ there are a series of “&” (without the quotes). I put it in just before it says ‘geocode’, which is fairly close to the beginning of the src (compare to the length of it, hehe). So it should look like this (find where it says ‘geocode) and notice that I’ve put the above written statement in:
I hope this comment helps someone… Even if it’s a galaxy far, far away.
Nice one Zeth, if we get the video blog re-shot with the evolved method, i’ll be sure to give you the credit!
Works like a dream Zeth, cheers!
Thanks, Zeth! It’s magic
from a galaxy far, far away…
Just to clarify that comments above this one, are based on our older blog post and video. The code displayed above, is ready to roll, using the fix that Zeth mentioned.
Hi. Wow, this looks cool. I like your blogs, they are the best blogs I’ve found online. I’ve looked through a lot of them, and one of the blogs you mention a site where you can put in your URL and then it checks how SEO-optimized it is in percentage, but it’s a blog about something else – and I just can’t seem to find it. Can you help me out? Thank you.
Hey Per, check out Website Grader at http://www.websitegrader.com
Yehaa!! That’s the one! Thank you.
This driving me mad that bit of code is not in my iframe code
Hi Mark, please can you paste your code in here wrapping with with [ html ] [/ html ] tags.
Hi, thanks for the info – it works sweetly. So how do I remove the red placeholder?
that didn’t work for me, but adding
at the end works.
My code doesn’t work
Speech bubble is still showing this is the page http://www.flypark.co.uk/edinburgh-airport-parking-airparks.html
I just checked back to see if I had a reply and when I checked my page it seems to be working now, very strange, but thanks for the code