[updated] How-to: Hide the Info Bubble in a Google Map

Update:

The Google map api has changed and this no longer works. However, the info bubble no longer hides the map at the pin, so this hack also is no longer needed! Scroll down and see the live example.


 

HTML_tip Icon

One of the most useful features you can add to a Web page for your retail clients is a Google Map. Adding a map is simple and it lets site visitors get directions to your location and print a map. If you’re serious about driving folks through the door of your small business, a Google Map is important.

Adding the map is pretty simple. Go to Google Maps, type in the address of your business (or if you have a Google Map business listing, your business name and city) and choose the “Link” button at the top right of the map. Copy the code snippet and put it in your Web page where you want the map to be.

This creates a 425px wide by 350px high map of your location as in this example:

Default Embedded Google Map

 

This works great in most cases, but when the map is resized for use in a page sidebar or for other reasons, (using the customize feature at Google Maps) the info bubble in the map can hide most of the map and then be hidden itself outside the iframe as in this example:

Google Map at 2/3 Size

 

How The Map Works

Google Maps are embedded in a Web site using an iframe, which lets the page at Google appear in a window in your site. Everything about the window and its content (a bunch of javascript variables) is in the source URL of the iframe. One variable called iwloc controls the info bubble. It generally looks like this:

... &z=14&iwloc=A&output=embed ...

Sometimes this variable isn’t present at all (it will simply be missing) and sometimes it has other values. When its not present, an info bubble with default data will appear. With it present, it presents data depending on the variable.

Here’s the trick, though. If it’s present and empty, the bubble will be hidden! like this example:

Google Map with Empty iwloc variable


View Larger Map

 

With an empty iwloc variable, the marker is still present (A) and when the marker is clicked, the info bubble will appear.

How to hide the Info Bubble:

If the code you copied from Google Maps doesn’t have the variable, add it. Copy the bold part of the snippet below and put it after z=14 in your code (your z value may be different).

... &z=14&iwloc=&output=embed ...

If the variable is present, delete the value (the letter A in our example at top) and leave the =. The info bubble will then be hidden. If you make a mistake, the map won’t work right and you’ll have to start over.

One More Thing….

This iwloc variable actually appears twice in the code you get from Google Maps. Once in the source URL for the iframe, and once in the URL for the “View Larger Map” link which appears under the map. Change the variable in the iframe URL only and not the link URL (if you search for the variable with your text editor (notepad) the iframe URL will be first). You’ll want the bubble in the larger map so folks can use its great features.

Bonus Tip

While you’re fiddling with the map at Google Maps using the customize feature, if you change to satellite view (show the buildings and such), zoom in or out (to show surrounding highways or landmarks better), or move the marker (by dragging, to get a better view of surrounding highways, for example) then copy the code to your Web site, your customizations will appear on the map in your Web site too.

View Comments

3 Responses to [updated] How-to: Hide the Info Bubble in a Google Map

Leave a Reply