Search code examples
google-mapsgoogle-maps-api-3infowindowinfobubble

How can I display an InfoWindow beyond the edge of a Google Map?


I'm displaying InfoWindow popups (using InfoBubble, a stylable subclass implemented by some open source badasses) when map elements are hovered. If the thing on the map is at the edge, then the InfoBubble will be truncated.

Of course, there is the autoPan option, but that makes the performance bad because of the constant panning. Instead, I would like to either:

  1. have the contents of the InfoWindow / InfoBubble be visible even though it extends beyond the map edge, or
  2. intelligently switch the position and dimensions of the InfoWindow depending on where the edge is.

Option 2 is not what I want to be coding right now.

Anybody know of a way to achieve Option 1?

(Google Maps API v3)


Solution

  • I think I solved this by ... not using the info bubble. I made a custom info bubble that just displayed a regular DOM node (a div) at the position that I wanted. It was therefore not subject to the limit of being inside of the map pane.

    You can see the result on https://givelocal.drivetoendhunger.org/stats (the pop up that is displayed when you hover over the map is not an 'info bubble').