The Google Maps Tooltip Gets a Shadow (and HTML Support)

In the spirit of consistency, I decided to add a shadow to the tooltips (View the example). They just didn’t blend in with the rest of the Google Maps overlays. So I set out to replicate the “standard” Google Maps shadows.

Replicating the Shadow

Through a mix of reasoning, instinctive guessing, and trial and error, I have devised a technique to replicate the shadows using Adobe Photoshop. It’s a fairly simple process and the steps are outlined below.

1. Make a copy of the overlay’s layers and merge and rasterize the copies if needed
2. Make the copy all black (I use a gradient map and set both ends to black)
3. Perform a Free Transform and set the Height/Vertical Scale to 50% and the Horizontal Skew to -45°
4. Apply the Gaussian Blur filter (I set it to .5 pixels for small images and 2 to 3 pixels for large ones)
5. Set the Opacity to 45%
6. Save the shadow layer only as a PNG

Drawing a Variable Size Shadow on the Map

After figuring out how to replicate the shadow, I moved on to drawing it on the map. The first step to drawing the shadow is getting its size and location. From replicating the shadow we know that the height is 50% (plus padding for the Gaussian blur). The width of the shadow is the width of the tooltip, plus half the height of the tooltip (and again, the padding). Half the height of the tooltip is added to the width to take into account the offset of the shadow’s top, right corner caused by the skew. Since the skew is 45 degrees, the offset is a one to one ratio with the height of the shadow. The position of the tooltip’s shadow is relative to the marker’s shadow. So I apply the same principles to the marker’s dimensions in order to calculate the position of the tooltip’s shadow.

Because the size of the tooltip is not fixed, the shadow needs to be able to grow vertically and horizontally. I accomplish this by dividing the shadow into four quadrants. Each quadrant contains the same shadow image, positioned to display its respective corner. The image’s positions in the first and third quadrants are straight forward. The image is positioned so the top and right edges of the image line up with the top and right edges of the first quadrant. The bottom and left edges of the image line up with the bottom and left edges of the third quadrant. The positioning of the image in the second and fourth quadrants requires some simple calculations. The image in the second quadrant is placed so the top edge of the image lines up with the top edge of the quadrant. The left edge of the image is offset from the quadrant’s left edge. The image in the fourth quadrant is symmetrically opposite from the second, bottom edge of image to bottom edge of quadrant and right edge of image offset from the right edge of quadrant. See the source code, the Tooltip.prototype.redraw method, for the calculations of the offset.

The code below is a sample of the xhtml generated by the Tooltip object to create the shadow. The parent div is the container for the entire shadow, it is outlined in black in the image above. The child divs represent the quadrants of the shadow. Each quadrant contains a reference to the same shadow image and the image is positioned relatively to the quadrant.

<div style="position: absolute; visibility: visible; left: 300px; top: 197px; width: 226px; height: 32px;"> <div style="overflow: hidden; position: absolute; right: 0px; top: 0px; width: 113px; height: 16px;"> <img src="/examples/Tooltip_v2/tooltip_shadow.png" style="position: absolute; top: 0px; right: 0px;"/> </div> <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 113px; height: 16px;"> <img src="/examples/Tooltip_v2/tooltip_shadow.png" style="position: absolute; top: 0px; left: -128px;"/> </div> <div style="overflow: hidden; position: absolute; left: 0px; bottom: 0px; width: 113px; height: 16px;"> <img src="/examples/Tooltip_v2/tooltip_shadow.png" style="position: absolute; bottom: 0px; left: 0px;"/> </div> <div style="overflow: hidden; position: absolute; right: 0px; bottom: 0px; width: 113px; height: 16px;"> <img src="/examples/Tooltip_v2/tooltip_shadow.png" style="position: absolute; bottom: 0px; right: -128px;"/> </div> </div>

HTML Support

The tooltip can now take an HTML Element for its content. To do so, just create an element and pass it to the tooltip’s constructor. This technique is illustrated below.

//create the marker var myMarker = new GMarker(new GLatLng(lat,lng),{icon:icon}); //create the tooltip content var myElement = document.createElement('p'); myElement.appendChild(document.createTextNode("Some Text...")); //create the tooltip with the marker and content var myTooltip = new Tooltip(myMarker, myContent, 0);