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