InfoBox extends the Google Maps JavaScript API V3 OverlayView class.

An InfoBox behaves like a google.maps.InfoWindow, but it supports several additional properties for advanced styling. An InfoBox can also be used as a map label.

An InfoBox also fires the same events as a google.maps.InfoWindow.

Browsers tested:

Mac -- Safari (4.0.4), Firefox (3.6), Opera (10.10), Chrome (, OmniWeb (5.10.1)
Win -- Safari, Firefox, Opera, Chrome (, Internet Explorer (8.0.6001.18702)
iPod Touch/iPhone -- Safari (3.1.2)

For a description and examples of how to use this library, check out the how-to.

class InfoBox


Constructor Description
InfoBox(opt_opts?:InfoBoxOptions) Creates an InfoBox with the options specified in InfoBoxOptions. Call to add the box to the map.


Methods Return Value Description
close() None Removes the InfoBox from the map.
draw() None Draws the InfoBox based on the current map projection and zoom level.
getContent() string Returns the content of the InfoBox.
getPosition() LatLng Returns the geographic location of the InfoBox.
getZIndex() number Returns the zIndex for the InfoBox.
hide() None Hides the InfoBox.
onRemove() None Invoked when close is called. Do not call it directly.
open(map:Map|StreetViewPanorama, anchor?:MVCObject) None Adds the InfoBox to the specified map or Street View panorama. If anchor (usually a google.maps.Marker) is specified, the position of the InfoBox is set to the position of the anchor. If the anchor is dragged to a new location, the InfoBox moves as well.
setContent(content:string|Node) None Sets the content of the InfoBox. The content can be plain text or an HTML DOM node.
setOptions(opt_opts:InfoBoxOptions) None Sets the options for the InfoBox. Note that changes to the maxWidth, closeBoxMargin, closeBoxURL, and enableEventPropagation properties have no affect until the current InfoBox is closed and a new one is opened.
setPosition(latlng:LatLng) None Sets the geographic location of the InfoBox.
setZIndex(index:number) None Sets the zIndex style for the InfoBox.
show() None Shows the InfoBox.


Events Arguments Description
closeclick None This event is fired when the InfoBox's close box is clicked.
content_changed None This event is fired when the content of the InfoBox changes.
domready None This event is fired when the DIV containing the InfoBox's content is attached to the DOM.
position_changed None This event is fired when the position of the InfoBox changes.
zindex_changed None This event is fired when the zIndex of the InfoBox changes.

class InfoBoxOptions

This class represents the optional parameter passed to the InfoBox constructor. There is no constructor for this class. Instead, this class is instantiated as a javascript object literal.


Properties Type Description
alignBottom boolean Align the bottom left corner of the InfoBox to the position location (default is false which means that the top left corner of the InfoBox is aligned).
boxClass string The name of the CSS class defining the styles for the InfoBox container. The default name is infoBox.
boxStyle Object An object literal whose properties define specific CSS style values to be applied to the InfoBox. Style values defined here override those that may be defined in the boxClass style sheet. If this property is changed after the InfoBox has been created, all previously set styles (except those defined in the style sheet) are removed from the InfoBox before the new style values are applied.
closeBoxMargin string The CSS margin style value for the close box. The default is "2px" (a 2-pixel margin on all sides).
closeBoxURL string The URL of the image representing the close box. Note: The default is the URL for Google's standard close box. Set this property to "" if no close box is required.
content string|Node The content of the InfoBox (plain text or an HTML DOM node).
disableAutoPan boolean Disable auto-pan on open (default is false).
enableEventPropagation boolean Propagate mousedown, click, dblclick, and contextmenu events in the InfoBox (default is false to mimic the behavior of a google.maps.InfoWindow). Set this property to true if the InfoBox is being used as a map label. iPhone note: This property setting has no effect; events are always propagated.
infoBoxClearance Size Minimum offset (in pixels) from the InfoBox to the map edge after an auto-pan.
isHidden boolean Hide the InfoBox on open (default is false).
maxWidth number The maximum width (in pixels) of the InfoBox. Set to 0 if no maximum.
pane string The pane where the InfoBox is to appear (default is "floatPane"). Set the pane to "mapPane" if the InfoBox is being used as a map label. Valid pane names are the property names for the google.maps.MapPanes object.
pixelOffset Size The offset (in pixels) from the top left corner of the InfoBox (or the bottom left corner if the alignBottom property is true) to the map pixel corresponding to position.
position LatLng The geographic location at which to display the InfoBox.
zIndex number The CSS z-index style value for the InfoBox. Note: This value overrides a zIndex setting specified in the boxStyle property.