- Overview
- Documents
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.
How to use
InfoBox Examples
Note: Be sure to include infobox.js or infobox_packed.js in your HTML document.
<script src="/path/to/infobox.js" type="text/javascript"></script>
The example below shows the typical use of an InfoBox — as an enhanced version of an InfoWindow. The background of the InfoBox is set to an 8-pixel high, mostly-transparent GIF that has an upward pointing arrow 140 pixels to the right (half-way along the width of the InfoBox). The content for the InfoBox has margin-top set to 8px so that this background image is visible; the rest of the InfoBox appears yellow because that's the background color of the content. The pixelOffset is set to (-140, 0) so that the InfoBox is centered appropriately.
var marker = new google.maps.Marker({ map: theMap, draggable: true, position: new google.maps.LatLng(49.47216, -123.76307), visible: true }); var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada"; var myOptions = { content: boxText ,disableAutoPan: false ,maxWidth: 0 ,pixelOffset: new google.maps.Size(-140, 0) ,zIndex: null ,boxStyle: { background: "url('tipbox.gif') no-repeat" ,opacity: 0.75 ,width: "280px" } ,closeBoxMargin: "10px 2px 2px 2px" ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "floatPane" ,enableEventPropagation: false }; var ib = new InfoBox(myOptions); ib.open(theMap, marker);
Using InfoBox to Create a Map Label
This example shows how to use an InfoBox as a map label. One important step is to set the pane property to "mapPane" so that the InfoBox appears below everything else on the map. It's also necessary to set closeBoxURLto "" so that the label will not have a close box, to set disableAutoPane to true so that the map does not pan when the label is added, and to set enableEventPropagation to true so that events will be passed on to the map for handling.
var labelText = "City Hall"; var myOptions = { content: labelText ,boxStyle: { border: "1px solid black" ,textAlign: "center" ,fontSize: "8pt" ,width: "50px" } ,disableAutoPan: true ,pixelOffset: new google.maps.Size(-25, 0) ,position: new google.maps.LatLng(49.47216, -123.76307) ,closeBoxURL: "" ,isHidden: false ,pane: "mapPane" ,enableEventPropagation: true }; var ibLabel = new InfoBox(myOptions); ibLabel.open(map);
class InfoBox
Constructor
Constructor | Description |
---|---|
InfoBox(opt_opts?:InfoBoxOptions) |
Creates an InfoBox with the options specified in InfoBoxOptions . Call InfoBox.open to add the box to the map. |
Methods
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. |
getVisible() |
boolean |
Returns a flag indicating whether the InfoBox is visible. |
getZIndex() |
number |
Returns the zIndex for the InfoBox. |
hide() |
None |
Hides the InfoBox. [Deprecated; use setVisible instead.] |
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. |
setVisible(isVisible:boolean) |
None |
Sets the visibility of the InfoBox. |
setZIndex(index:number) |
None |
Sets the zIndex style for the InfoBox. |
show() |
None |
Shows the InfoBox. [Deprecated; use setVisible instead.] |
Events
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
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 value 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 theboxClass 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. The default value is false . |
enableEventPropagation |
boolean |
Propagate mousedown, mousemove, mouseover, mouseout, mouseup, click, dblclick, touchstart, touchend, touchmove, 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. |
infoBoxClearance |
Size |
Minimum offset (in pixels) from the InfoBox to the map edge after an auto-pan. |
isHidden |
boolean |
Hide the InfoBox on open. [Deprecated in favor of the visible property.] The default value 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. |
visible |
boolean |
Show the InfoBox on open. The default value is true . |
zIndex |
number |
The CSS z-index style value for the InfoBox. Note: This value overrides a zIndex setting specified in the boxStyle property. |