in Google

Hide / Remove Info Window / Bubble for Embedded Google Maps

A quick note added in February 2011. Google has now removed the iwloc part of the url in most cases. To remove the pin, you can now add &iwloc=near to the end of the iframe src attribute. So….

<iframe width=”300″ height=”300″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=manchester&aq=&sll=53.41654,-2.236788&sspn=0.033864,0.090294&ie=UTF8&hq=&hnear=Manchester&t=h&z=12&ll=53.480712,-2.234376&output=embed“></iframe>

…would become…

<iframe width=”300″ height=”300″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=manchester&aq=&sll=53.41654,-2.236788&sspn=0.033864,0.090294&ie=UTF8&hq=&hnear=Manchester&t=h&z=12&ll=53.480712,-2.234376&output=embed&iwloc=near“></iframe>

Thanks to John below for pointing this out

Old information:

Google have tweaked things again. Here is the latest way (March 2009) to embed a map including a location pin without the annoying info window or info bubble showing above it and ruining the maps centre location.

This is particularly important if you are using a small sized map less than around 400px square.

1. Go to google maps or google maps uk
2. Do a search to find (and pin) the location you want to embed a map of.
3. Click the text link, which you will find top right of the main map.
4. Click Customise and preview embedded map
5. Change the dimensions of the map as required and drag the pin to the centre of the map using your mouse.
6. Copy the embed code.
5. In your embed code find the src of the iframe tag ( <iframe src=”http ) and replace

iwloc=addr

or

iwloc=A

with

iwloc=near

6. Stick the embed code into your website and marvel at seeing a pin but no info window.

Before view:

Before iframe code:

<iframe width=”300″ height=”300″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=manchester&sll=53.800651,-4.064941&sspn=21.613333,29.619141&ie=UTF8&t=h&ll=53.492131,-2.228851&spn=0.122552,0.205994&z=11&iwloc=A&output=embed”></iframe>

After view:

After iframe code:

<iframe width=”300″ height=”300″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=manchester&sll=53.800651,-4.064941&sspn=21.613333,29.619141&ie=UTF8&t=h&ll=53.492131,-2.228851&spn=0.122552,0.205994&z=11&iwloc=near&output=embed”></iframe>

102 Comments

  1. Thanks! Many a website’s directions will benefit from this now.

    I’ve found that it doesn’t work (or the variable is different) if the map is displaying a “business” instead of a simple address, however – say the info window is pointing to a localized business instead of an address.
    But I rebuilt the map using just the address of the business, not the business marker, and it works just as well for the purposes of the contact page.

    Thanks again.

  2. I couldn’t get this to work i don’t know if this has anything to do with it but in the original code it didn’t give me iwloc=addr&amp it only gave me iwloc=addr.
    so here is what google maps gave me:
    <a href=”http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=40+E+Simmons+St,+Galesburg,+IL%E2%80%8E&sll=40.963888,-90.378976&sspn=0.075701,0.181961&ie=UTF8&ll=40.955335,-90.36624&spn=0.012964,0.025749&z=14&iwloc=addr” rel=”nofollow”>View Larger Map</a>

    and when i changed iwloc=addr to iwloc=near&addr& it didn’t change anything please help i hate the bubble

  3. Hi Jenny,

    All you posted there was the second part of the code google supply you with.

    The important part starts with <iframe

    To post code in a readable way to comments you must replace < with &lt; and > with &gt;

    If you can only find iwloc=addr then replace it with iwloc=near&addr

  4. I posted the entire thing the but somehow when i submitted it it disappeared. the map still doesn’t work even without the &addr i put my original code between so hopefully it works:

    <!– View Larger Map >

  5. Posting code into comments on this blog is only possible if you replace all < (less than) symbols in the code with &lt; (ampersand l t semicolon) and all > (greater than) symbols in the code with &gt; (ampersand g t semicolon)
    So <iframe> would need to be posted as &lt;iframe&gt;

    As for whether the method above works. It does.

    In the embed code is an iframe tag.
    In the iframe tag is an src=”” section.
    In the src section is iwloc=addr
    replace it with iwloc=near&addr

    If you are doing this by searching for a business then I cannot confirm it will work.

    The method above works if you search a place or location, not a business.

  6. Sorry about asking so many questions. I still can’t get this to work. so here is my code straight off of the maps website, i now get what you are saying about replacing the greater than and less than symbols.:
    <iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=40+E+Simmons+St,+Galesburg,+IL%E2%80%8E&sll=40.970594,-90.391492&sspn=0.074657,0.180588&ie=UTF8&z=14&iwloc=addr&ll=40.955335,-90.36624&output=embed&s=AARTsJoZTbmzSE6EvsoDTH4fpoWKyfhvPg”></iframe><br /><small><a href=”http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=40+E+Simmons+St,+Galesburg,+IL%E2%80%8E&sll=40.970594,-90.391492&sspn=0.074657,0.180588&ie=UTF8&z=14&iwloc=addr&ll=40.955335,-90.36624″ style=”color:#0000FF;text-align:left”>View Larger Map</a></small>

    i noticed after the iframe tag google gives me more code that gives a link to a larger map and i wasn’t sure if i was suppose to delete this or not. the iwloc that i was changing at first was not in the iframe tag it was in a different tag after the iframe tag, so there were two iwloc sections in the code. i deleted everything after the iframe tag and changed the iwloc section that was in the iframe tag and that changed the view to show the google map search bar. I read my previous posts and they sounded a bit demanding i was not meaning to be demanding sorry ): If you can get the coding that i posted to work i would be grateful, thanks.

  7. Ok. Congrats on posting the code.
    You can indeed ignore the part after the iframe. It’s a link to the same map on the google site.

    Look carefully at your code and you will see that iwloc=addr appears as part of the iframes src=”” attribute
    Replace it as I suggest in the article and the info bubble will disappear. (I just tried it with your code and it worked)
    The pin however will now be positioned near the bottom of the map. To fix this you need to drag the pin to the centre of the map when you are at the Customise and preview embedded map stage.

    So follow the steps in the article and I can confirm (even using your code) that they work.

  8. sorry but i cant get it to work can you change my original code from above to make it work?
    here is what my complete html code:

    <html>
    <body>
    <iframe width=”300″ height=”200″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=40+E+Simmons+St,+Galesburg,+IL&sll=40.970594,-90.391492&sspn=0.074657,0.180588&ie=UTF8&s=AARTsJoRFHALlDB_JUODzIkq-H9TDPsO2Q&ll=40.947038,-90.370617&spn=0.012966,0.025749&z=14&iwloc=near&addr;output=embed”></iframe>
    </body>
    </html>

    i save it on notepad as an html and then it comes up in mozilla firefox as showing me the search bar on the google maps page with the address typed in. sorry for being a pain

  9. I’m a big believer in showing people how rather than doing it for them.

    In your comment posted above, near the end of the code is “iwloc=near&addr;output=embed”

    The semi colon ( ; ) should be an ampersand ( & )

    1) Copy the google maps embed code to your clipboard
    2) find all occurrences of iwloc=addr and replace with iwloc=near&addr

    I really can’t make it any simpler.

  10. the ampersand and amp fixed everything thanks for all the help. i swear i tried it like that before and it didn’t work now i feel pretty stupid. thanks for all your help i appreciate it:)

  11. Hey Harry, in my code there is no ‘iwloc’ inside the i-frame tag.. do you know why and what can I do?

    Cant understand why google does not make it simple..
    thanks for sharing

  12. @Daniel

    Did you find the location using a standard search, or did you click on a business?
    This method only works with location search and not business search.

  13. I had this problem too, and here’s what I figured out:

    1) Google isn’t using iwloc=addr anymore. Now it’s iwloc=A. But iwloc=near&A works.
    2) Before you click Link, make sure the location marker is selected (with the bubble open).
    3) Daniel: Leave the bubble open while choosing map size and centering the map. If you close the bubble, the iwloc option disappears from the code….

  14. I have to search for my address using latitude & longitude because the city recently changed the address and Google puts the pin in the wrong place. I had to tweak the L&L to get the pin in the right spot, and I have no iwloc=addr in my code. Is that because I’m using L&L to get the map? This is what I get:

    <iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=%2B47%C2%B0+37’+38.64%22,+-122%C2%B0+8’+12.84%22+&sll=47.620973,-122.347276&sspn=0.720151,1.820984&ie=UTF8&z=14&ll=47.633817,-122.132692&output=embed”></iframe>

  15. I posted too soon. I got the pin in the right spot using the regular address this time, but the code I got from Google had iwloc=A in the iframe, not iwloc=addr as noted above. I went ahead and inserted near& in front of A and it works! Doing the dance of joy!

  16. Thanks Harry and Ersan for the update “1) Google isn’t using iwloc=addr anymore. Now it’s iwloc=A. But iwloc=near&A works.”

    Very much appreciated.

  17. Al – this got me too. You need to ensure the bubble is open when you copy the html to embed. If you close it the iwloc tag is removed. If it’s removed Google default to putting it back in.

    Thanks for sharing this tip!

  18. Anyone know how to get rid of the account name from the address bubble, I know its possible as I heard of it doen before.
    Thanks
    T

  19. Hi I looked at my code and could not find: iwloc=

    However, I am happy to say that you have given me enough information to solve the problem.

    First find the code:
    output=embed”>

    Second type:
    iwloc=near&amp
    right in front of it, make sure you separate out your inserted code with semicolons.

    Third double check your code it should look like: &iwloc=near&output=embed”>
    and check it out on your favorite browser.

    Thank you so much for pointing me in the correct direction!

  20. Thank for the tips…I was sure it was possible to do… The best would be Google allow users to simply choose in the custom view if they want or not add this bubble with a checkbox…but I imagine this will not serve they business 🙂

    Happy News Years 2010

  21. THANK YOU! I just spent like an hour searching for this info. Everything I found explained how to remove the bubble, but not how to fix the centering. I had no idea that dragging the preview map around affected the iframe SRC. 😮

  22. Hi Roch,

    Yeah, same code. I just checked myself on .ca and found the code

    iwloc=A

    replacing it with

    iwloc=near

    gives the expected outcome.

    Harry

Comments are closed.

Webmentions

  • links for 2009-09-01 | pollas.dk [permanent meta] » Blog Archive Saturday, October 23, 2010

    […] Hide / Remove Info Window / Bubble for Embedded Google Maps | Harry Bailey (tags: google maps embed trick) […]