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.
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
... &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
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.
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.