Apr 8, 2013
Tip and Trick Editorial

How to Remove & Hide Squarish Info Bubble of Embedded Google Maps

Many websites now embed map from Google Maps on the web page to provide visitors with accurate location or direction information.

Normally, the embedded Google Maps will include a location pin together with a squarish info bubble or info window pop-up above the location pin which provides more information about the location, and shortcut to retrieve direction, search nearby or zoom in. Well, sometimes the info bubble is not necessary as may be described in the article, written on the page, or is obvious to viewers on visit the web page of your company. To make matter worse, if the embedded map is too small in size, part of the info bubble may be hidden out of view, and it also covers a large part of the map.

Google Maps embedded with info bubble

Google Maps does not provide any option or hack that allows users to easily disable and prevent the info bubble from automatically popping up on the embedded map. But there’s a trick to hide the info window. Here’s how to any embedded Google Maps map to show only the location pin, without the info bubble.

Google Maps without Info Bubble

  1. Retrieve your embed HTML code from Google Maps.
  2. Search for iwloc within the value of src attribute of the iframe tag.
  3. If the iwloc exists: Replace the iwloc=addr or iwloc=A to become iwloc=near.

    If the iwloc does not exist: Append the iwloc=near to the end of value of src attribute of the iframe tag.

    For example, original Google Maps HTML embed code:

    <iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com.sg/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=1.343746,103.824045&sspn=0.372745,0.676346&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&ll=40.747257,-74.003906&spn=0.18207,0.291824&z=11&iwloc=A&output=embed”></iframe><br /><small><a href=”http://maps.google.com.sg/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=1.343746,103.824045&sspn=0.372745,0.676346&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&ll=40.747257,-74.003906&spn=0.18207,0.291824&z=11&iwloc=A” style=”color:#0000FF;text-align:left”>View Larger Map</a></small>

    Would become:

    <iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com.sg/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=1.343746,103.824045&sspn=0.372745,0.676346&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&ll=40.747257,-74.003906&spn=0.18207,0.291824&z=11&iwloc=near&output=embed”></iframe><br /><small><a href=”http://maps.google.com.sg/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=1.343746,103.824045&sspn=0.372745,0.676346&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&ll=40.747257,-74.003906&spn=0.18207,0.291824&z=11&iwloc=near” style=”color:#0000FF;text-align:left”>View Larger Map</a></small>

    [box title=”Tip” color=”#f85dcc”]To hide the info bubble pop-up when viewing the map when clicking on View Larger Map link, apple or change the iwloc value for a href attribute too (the second bold iwloc).[/box]
  4. Paste the Google Maps embed code into your website, and the map shown will have just a location pin without the info bubble.

Here’s the a live embedded Google Maps without the squarish info bubble, which proving to be a much cleaner map to see at.

View Larger Map

Pin It on Pinterest

Share This

Share This

Share this post with your friends!