William Duffy

Glasgow Based C# ASP.NET Web Developer

Remove address bubble from Google Maps iframe

Something that always annoys me about the quick implementation of Google Maps is the rubbish address bubble that pops up on the auto generated iframe code. What makes it even more annoying is that you can remove the address bubble using Google’s neat little popup interface, but the customisation does not work. Nightmare!

Before I show you how to manually turn the address bubble off, let’s look at how it should work. You will still use a decent part of Google’s customisation tool so I recommend you step though the whole post rather than skip to the end. Go to Google Maps and search for your postcode, you will be presented with a map of your general area and a location pointer of your postcode. You can use my location if you are to lazy to do your own.

googlemaps1

UK MAP USERS ONLY:
Unfortunately UK postcodes have geocoding restrictions due to copyright of the data. If you perform a postcode search from within Google you will get an accurate result, however iframes on your own site are restricted to using the first segment of the requested postcode. For example queries on PA16 8NG will be simplified to PA16. This can cause your pointer location to be WAY OFF from your original postcode! To get around this you need to click the “Zoom here” text on the address bubble. Once the zoom has been performed click “Link” at the top right of the map and copy the url from “Paste link in email or IM”. Paste it into a text editor such as notepad and look for the lat/long values in the parameter list. It will look like “&ll=55.952348,-4.767455″ (notice &ll, not &sll). Copy the digits from this value (i.e. 55.952348,-4.767455) and perform a search on Google Maps for these values just like you did for your postcode. You will be presented with the same pointer and location as before, but this time based on lat/long values instead of a postcode value.

Once you have your map and are happy with it click “link” at the top right of the page and choose “Customise and preview embedded map”.

googlemaps2

A neat little popup will present you with options to customise your map. Notice at the bottom of the page is the code which is being generated from your options. It’s part 3 [Copy and paste this HTML to embed in your website]

googlemaps3

Click the close button (the x) on your address bubble <NOT THE BROWSER WINDOW>, and you will notice the code at the bottom of the window updates, removing “iwloc=A&amp;” from list of parameters. This should be you ready to roll, however a problem remains. If iwloc is not explicitly specified in the parameters then it defaults to A, which shows the address bubble, negating the effect you just got by closing it.

googlemaps4

So with that in mind, the solution is simple. Instead of using the “Customise and preview embedded map” to remove the iwloc parameter simply remove it yourself. First, click on the pointer again to make the address bubble visible. Then drag the map around to reposition the pointer in the centre of the map frame. This is important because Google has already altered the lat/long values to cater for your pointer AND their address bubble.

googlemaps5

Once you are happy with the location of the pointer copy the code from part 3 [Copy and paste this HTML to embed in your website]. When you paste the code into your page simply find “iwloc=A&amp;” and remove A from the value. You should be left with “iwloc=&amp;”, in essence explicitly setting it to null.

You now have a Google Map with a beutifully centred pointer and no more address bubbles. Result!


Tagged as , , + Categorized as HTML & CSS

55 Comments

  1. Very useful article William, I was doing this just this afternoon. I wish I had seen it before I spent twenty minutes looking for the answer through Google.

    I actually bought http://www.amazon.com/Google-Maps-Hacks-Rich-Gibson/dp/0596101619 to help me with my fourth year uni project and simple things such as the above were not even covered within the book, they just jumped straight to an intermediate level even though the book was supposed to build from the foundations up.

    I’ve bookmarked this for future reference. Cheers.

  2. Cheers Jack, glad someone found it useful :)

  3. Hi, I have been trying all day to solve this issue and your blog entry is the best I have found. One huge problem… the iwloc parameter does not display in the embed code at all, no matter what I do.

    Any ideas?

  4. Hi Damian. Try adding it yourself, it’s really just a list of parameters so adding it manually is an easy thing to do. Look at the other parameters in the query and see if they are split with a & or “&amp;” put that onto the end of the value and include “iwloc=” so the end of your parameter list will end with &iwloc= or &amp;iwloc=

  5. Good God, not a few minutes after my above post and on my last frustrated Google search of the night before giving up I found this little gem. Problem solved.

    http://groups.google.com/group/Google-Maps-Troubleshooting/msg/fde4f175a361f448

  6. Yes! Thank you for sharing this little trick.

  7. Hi William, I missed your reply post before my ‘Good God’ post above.

    As you say, it is easy to add it, but first I needed to know the marker_id… and that I could not find out. The link I gave above explains the solution.

    Thanks for your prompt reply though.

  8. Excellent – I searched other forums for this solution in which some advised this could not be fixed. I never believe such statements. Thank you for sharing your discovery.

  9. Wish I had found this article earlier, spent about an hour trying to manipulate the url myself ;) Great info, thanks a lot!

  10. Thank you! Those location bubbles are especially troublesome on small maps. You saved us a lot of time and frustration!

  11. Hey this is great, thanks for the info. Nick

  12. Great – thanks for the help.
    Amazing that Google have not fixed up this issue themselves yet!

  13. The web link shows and example using Robben Island, South Africa as an example with a nice satellite picture of the island w/o the annoying address bubble. I had trouble removing the iwloc param, substituting the null value shown and getting the desired result. Dunno what I was doing wrong.

    But the above answer pointed the way to another solution. Simply get that A off the map you want. Request a map nearby and scroll or zoom so that the locator A does not show. Copy THAT html and voila! Thanks a bunch for this b/c that address bubble is extra ugly.

    Thanks, William!!!
    -Terry

  14. Hi fellas, having exact same problem although can’t seem to fix mine. My original code I copy/pasted contained iwloc:”A” and no other reference to iwloc.

    i tried removing it totally which didnt work (explained why in this thread I know), i then tried replacing with iwloc=&amp which still didnt work.

    what I am seeing is the iwloc:”A” keeps coming back on it’s own after opening my web page and displaying the map. weird.

    Anyone seen this or got some ideas ?

    Thx

  15. Thank you William for pointing me in the right direction. Here is a little short cut for US users like me that just want to get rid of the bubble. You can customize the frame size with the frame parameters in the HTML (450px 350px default) Just change the numbers, the frame will change.

    Go to NWS (National Weather Service) and type in your town or nearest town location.

    Pick the Lat-Long off of the weather page that comes up.

    Go to the first link page you put in…the one with the bubble…the one so well described above.

    Delete the Google Lat-Long as shown above: &ll=55.952348,-4.767455 (example)

    Paste in the NWS value

    Bubble gone.

    Then, to place your map on the page, add the following bit of CSS

    STYLE=”position:absolute; TOP:350px; LEFT:170px”

  16. yeppaaa! thats a simple and effective solution for “deleting” this bubble, i never thougt that its possible to remove – thanks a lot! :o )

  17. Worked a treat. Thank you!

  18. Phew, I thought I was stuck with this unsightly balloon. Many thanks :)

  19. diamond. just what I wanted. Thanks a lot :-)

  20. I finally figured out how to get rid of that thing. Thanks for the tip!

  21. Thanks. I was hoping someone else had come across this. I appreciate your help with solving it.

    Greg

  22. Thank you, that was too easy.

  23. Excellent post – thanks, worked well.

  24. Found you on a Google search and wanted to thank you for the tip on removing that irritating bubble.

    My map display is in a sidebar and only 430px wide. The address bubble looked ridiculous.

    Thanks again.

  25. Hi William,

    Simply fascinating. Now I know how to emove the bubble. However I need to have more than one location marked on the map. Can I add another location either latitude and longitude or with an address?

    I will be anxiously waiting for your reply Wiliam.

  26. @Ed I’m not aware of a way to do this with this iframe approach. However, it can be done easily via the javascript API. If you register for a key at Google and read a couple of their tutorials you should find it not to bad. http://code.google.com/apis/maps/documentation/javascript/

  27. Awesome, you’re a lifesaver! I’m only displaying a 400px wide map and it looks ridiculous with the bubble showing. Cheers :)

  28. Exactly what I was looking for ;) Thanks!

  29. Thanks for this. Such a simple fix for an incredibly annoying function.

  30. Thank you William! If you had a Donate Button you would have had mine.

  31. Excellent, William, thanks!

    For my purposes I was able to simplify the iframe source URL to:

    http://maps.google.co.uk/maps?q=SW7+3QD&output=embed&iwloc=

    Charles Sweeney (from East Kilbride, living in London Town)

  32. Perfect ! great solution

    thanks

  33. Great and simply answer! I was wondering how the hell doing this.

  34. I came across your post by searching how to remove the bubbles from embedded maps on Google. I hadn’t noticed that Google gave you the ability to remove the bubble directly from the interface provided to customize the map. I’m surprised that it’s not documented.

    Thank you for taking the time to share your discovery.

  35. Excellent help – Many thanks!

  36. Thanks for this discovery… no more Bubble for me

  37. Great tutorial, brilliant, finally solved an issue that has been bugging me for a while, thanks a million.

  38. Thank you!

  39. THANKS !! So great !!! i’ve been looking for this trick more than an hour !!!

  40. Thanks so much for this tip. :-)

    My embedded maps are so much more useful now!

  41. James Gifford says:

    Aces! Although my embed code did not include the ‘iwloc’ parameter and I had to add it in – it took a couple of tries to find the right location, right after the ‘ll=’ parameter. Worked like a charm there – thanks!

  42. Thanks so much for this – I’m in the UK and couldn’t get this trick to work from the instructions on the other blogs I found. Then I stumbled across your tip about zooming in first, and then tweaking the code, and it worked! Thanks again!

  43. Thanks. Glad I found this solution fairly quickly thanks to your post. Stoked!!

  44. Thank you! Much appreciated- I didn’t have the &iwloc= parameter in my code either, but added it to the end before the closing brackets and it worked a treat. Nice one William!

  45. Hehe.. awesome work mate…. guys be sure to check/edit this parameter in the iframe src and not in the href after it… took me 15 minutes to notice this :)

  46. GENIUS! thank thank you thank you

  47. Great stuff, that has been annoying me for a while! I needed a narrow window to fit in with our page design, the bubble looked daft sitting in the top-right. Cheers!

    Anyone know how to move the place marker? I’m waiting for my listing to be updated on Google Local which will hopefully put it right :)

  48. Thanks for that tip fella that has made a great improvement to my website.

  49. Mr Duffy, than you for this post. You are the second link in my search for this.
    The first link advocates the use of ‘iwloc=near’ instead of simply nulling it and also pointed out the iwloc parameter does not appear in the iframe code.
    I am so pleased to remove that annoying popup address info box.

  50. Thanks for taking the time to share this! Made my life easier, and that’s such a pleasure. I’m always trying to give back where I can.

  51. Thanks man ! That’s the kind of post that are really usefull ! thanks for sharing this knowledge, i already spent at least 1 hour trying to remove this bubble !

  52. It did the trick, thank you very much for the tips, been trying to remove it for two hours before finding your great post !
    Cheers

  53. Thank you for this great tip! I did not have the “iwloc” parameter, but it only took a minute or two of playing around to figure out where it needed to go.
    Looks MUCH cleaner, thanks!! =)

  54. Spent 15 minutes getting really frustrated. Found your site, spent 5 minutes solving the problem. Thanks so much!

  55. Man…you are GREAT.
    All of us lost so much time in this sh#t…In my case, there was no “iwloc” code in the embed…Now I know.
    Thank you very, very much.

Leave a Reply