New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/infobox-to-create-a-map-label/
InfoBox to Create a Map Label
Download Demo
nfoBox 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);