3

I'm having some trouble with the Infobox - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html - where it doesn't take in to account the header and sidebar that I have in my layout. When someone clicks a marker and reveals an infobox it doesn't auto pan from underneath the header and sidebar (which are positioned absolutely above a 100% width/height Google Map) so that you can see it.

I had this working perfectly when I was using normal Infowindows (and with a sidebar that could be hidden) but I wanted to use Infobox in order to have much more control over the style/look. In order to do this I found the second answer from this question - Ensure padding around markers on Google Maps for web - and using a div and applying it to the map as a control.

Here's a JSFiddle of the problem - http://jsfiddle.net/nrjBB/

Any help is greatly appreciated.

Community
  • 1
  • 1
PorousHorse
  • 31
  • 2

3 Answers3

0

remove header div from your html and it will pan properly. Sounds like your CSS is wrong.

Try this:

html:

<div id="header"></div>
<div id="map_canvas"></div>
<div id="sidebar"></div>

css: 

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; }
#header { width: 100%; height: 50px; background: #000; }
#sidebar { width: 100px; height: 100%; background: #999; position: absolute; top: 0; right: 0; }

.info-box { background: #ffffff; }

PS: thanks for putting your code here! I was looking for the infobox information for a loooong time!!!

Kalvin Klien
  • 911
  • 1
  • 12
  • 32
0

infobox.setOptions({ disableAutoPan: true });

Arun Ravi Shankar
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 12 '23 at 09:33
-1

either you have to put height of the map_canvas (heightOfWindow -50),because the infowindow will pan according to map div,in your case map div is hidden by header

user2291196
  • 1