I've got a Google map, standard fare really. It's quite small though and the popup info windows on the markers are quite big, so my question is, is it possible for these popup windows to spill out the edge of the map and on to the actual website? (See dodgy photoshop job for an example).

alt text .png

Thanks!

I've got a Google map, standard fare really. It's quite small though and the popup info windows on the markers are quite big, so my question is, is it possible for these popup windows to spill out the edge of the map and on to the actual website? (See dodgy photoshop job for an example).

alt text http://dotcafedesigns./stuff/box-breakout.png

Thanks!

• javascript
• html
• css
• google-maps
• css-position

• 1 +1 Good Question... Do you intend to have the infoWindow disappear as soon as the map is dragged?... Or would you want it to disappear when the marker goes out of the map? – Daniel Vassallo Commented Mar 30, 2010 at 15:39

5 Answers 5

Not a solution but some more background...

There used to be a mercial library available called BPWindow.

However, it appears that it was made non-functional by changes to GMAP2 and doesn't appear to be listed as a library any longer. You might want to contact BitPerfect and see what happened.

http://www.gmaptools./

I have not found a way to acplish this but would love to hear about it if you find something in your search. I haven't had time to look at GMAP3 to see if there are any changes that would support this. That might also be worth a look.

dodgy photoshop example is an excellent way to get accross what you want. I always find pictures helpful for this sort of thing!

From the excellent econym map tutorials site, it looks like bpWindow is what you're after

An infoWindow-type tool which can open outside the map. As a result, the map will never automatically pan to show its contents.

However, I cant quite get the examples to work... but hopefully it may help you in some way!

MapTools does NOT exceeds the google-maps border/container.

Trulia. seems to have figured out a way to have an InfoBox exist outside the map container but I'm not sure how they are dong this.

You can actually use your own tooltip framework and the only tricky thing is figuring out how to position the tooltip element at the marker's position.

Here's my solution:

1. Get the marker's pixel location relative to its container. Google Maps V3 has a method to do just that called fromLatLngToContainerPixel. Unfortunately, this function is not easily accessible. Your marker will have to subclass OverlayView. I've written a guide on how to do this. This might be a dealbreaker, but it's really not that hard.
2. fromLatLngToContainerPixel returns top/left relative to its container. If your tooltip markup is also within the same "positioned" container, then you can use the value as is and you are done. Otherwise, you'll have to convert it to the same relative coordinate as your tooltip. This quirksmode article can guide you for that.

That's it!

Just got it working yesterday. Wasn't that easy, but if you play around with the way how markers are created and pull in a little jQuery it's not too hard. Read here.