infoBox for google Map popups

Page Content hide
1 What is the infoBox
2 Benefits of infoBox
3 Styling the infoBox
4 Draggable markers
5 Summary

What is the infoBox

An infoBox is an enhanced infoWindow. Details can be found here . I will be converting the Google Maps modules on this site to use the infoBox rather than the native Google Maps infoWIndow.

Benefits of infoBox

The infoWindow is not easy to style (fonts, dimensions, rounded edges and so on), and has a minimum size of about 220px – meaning you cannot reduce it beyond that size, whereas the infobox allows any CSS styling. In addition, an infoBox can be used on a map without an associated marker – meaning you can use it to add labels to a map.

Styling the infoBox

As with other elements, styling information is passed through an Excel parameter sheet. For Adding markers to Google Maps from Excel, the styling is in the markerHtml section of the geoCoding parameter section, and by default is this
.mcinfopop {
 font-family: sans-serif; 
 color: black;
 font-size:9px;
 padding: 8px;
 background-color:WhiteSmoke;
 width: 80px;
 border: 1px solid WhiteSmoke;
 border-bottom-left-radius: 15px;
 -moz-border-radius-bottomleft: 15px;
 border-bottom-right-radius: 15px;
 -moz-border-radius-bottomright: 15px;
 border-top-right-radius: 15px;
 -moz-border-radius-topright: 15px;
 border-top-left-radius: 15px;
 -moz-border-radius-topleft: 15px;
}
You can tweak this to adjust the style of the infoBoxes. In addition there are some non-CSS options built into the code, which can also be found in the markerHtml section of the geoCOding parameter sheet. These can also be tweaked as required.
var tweakX = -80;
   var tweakY = 0;   
        var boxOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 80
                ,pixelOffset: new google.maps.Size(tweakX , tweakY)
                ,zIndex: null
                ,boxStyle: { 
                   opacity: 1
                  ,width: "80px"
                 }
                ,closeBoxMargin: "2px 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
        };

Draggable markers

By default, markers are now draggable. Dragging a marker will bring its associated infoBox with it – useful for when you have overlapping infoBoxes and you need to create a static presentation. This behavior is also changeable as below.

var marker = new google.maps.Marker({
     position : p,
     map : gMap,
     title : cj.title,
     draggable: true
    });

Summary

See Mapping and adding markers to maps for more information on Integrating Excel with Maps and Earth. In the meantime why not join our forum, follow the blog or follow me on twitter to ensure you get updates when they are available.