InfoBox Documentation: Examples

# InfoBox Examples

API Reference

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).

## 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 `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);

View example (infobox-label.html).