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);
View example (infobox-basic.html).
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 closeBoxURL to "" 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);