Google Maps API Tutorial© 2006, 2007, 2008, 2009 Mike Williams |
| Translate this page: |
Fixing the 'inherited CSS' problemIf you have cascading styles that apply to your map div, then those styles will be inherited by objects attached to the map. That can cause a problem with the info window contents.The size of the info window is calculated before the info window is appended to the map, so it's calculated with the text at the default size and with the default font. When the info window is appended to the map, the styles are inherited and the actual size of the contents may change. If you don't want to remove the inherited style, or can't remove it because it's part of something like a Blog template, then you need to countermand or duplicate the significant parts of the style in the html that you put in the info window. E.g. if the map div is inside a container div that has a style #container {font-size:15pt;} then you could create a style to countermand that, like .iwstyle {font-size:20pt;} and wrap all your info window text inside <span class='iwstyle'> ... </span>. Styles applied directly to the info window contents in this way are applied before the size is calculated, so the info window will then fit the contents. In this example the marker on the left inherits the container style, but the marker on the right has an info window that is sized correctly. |