Tag Archive for 'tooltips'

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

Published
by
Alionso
on Monday, August 6, 2007
in Google Maps API
. 5 Comments

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° Photoshop Free Transform Settings
  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
Continue reading 'The Google Maps Tooltip Gets a Shadow (and HTML Support)'

Custom Tooltips for the Google Maps API

Published
by
Alionso
on Wednesday, May 16, 2007
in Google Maps API
. 13 Comments

Welcome to my JavaScript blog, onemarco.com, or as I like to call it, Blog de Alionso. I've been developing with JavaScript for about six months now and I've learned so much from others' blogs. I'll be sharing some of the scripts I've developed recently, in the hopes that my experience and knowledge will help others.

tooltip sample

What?

Today I present the Tooltip object for the Google Maps API. It is used to add quickly-appearing, easy-to-style (via CSS) tooltips to Google Maps' markers. This is in contrast to the built-in tooltips of versions 2.5 and higher, which appear after a short delay and cannot be styled. You can view an example the new example of the tooltips in action which also includes a sidebar.

View the Tooltip source code. The code is free to use for any reason without any restrictions. Just credit me if you redistribute it.

Why?

I developed the tooltips for two reasons. First, I find it difficult to figure out which marker a sidebar entry belongs to. It is time consuming to look at the letter for the entry and find the matching letter on the map, especially when markers overlap and hide each other. It is easier if the tooltip appears above the marker when I hover over the sidebar entry. Secondly, sometimes I just want to quickly figure out what a certain marker on the map is without having to look for its corresponding letter in the sidebar. And having to click on the marker to pull up the location's name is annoying, especially when it moves the center of the map. It just seems natural to me that when you hover on a marker, the name of the location should appear. Besides, it was a good exercise in extending the Google Maps API.

Continue reading 'Custom Tooltips for the Google Maps API'