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.
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”.
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]
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&” 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.
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.
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&” and remove A from the value. You should be left with “iwloc=&”, 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 Address Bubble, Google Maps, html + Categorized as HTML & CSS
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.
Cheers Jack, glad someone found it useful
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?
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 “&” put that onto the end of the value and include “iwloc=” so the end of your parameter list will end with &iwloc= or &iwloc=
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
Yes! Thank you for sharing this little trick.
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.
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.
Wish I had found this article earlier, spent about an hour trying to manipulate the url myself
Great info, thanks a lot!
Thank you! Those location bubbles are especially troublesome on small maps. You saved us a lot of time and frustration!
Hey this is great, thanks for the info. Nick
Great - thanks for the help.
Amazing that Google have not fixed up this issue themselves yet!
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
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=& 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
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”
yeppaaa! thats a simple and effective solution for “deleting” this bubble, i never thougt that its possible to remove - thanks a lot! :o)
Worked a treat. Thank you!
Phew, I thought I was stuck with this unsightly balloon. Many thanks
diamond. just what I wanted. Thanks a lot
I finally figured out how to get rid of that thing. Thanks for the tip!