Adding Google Maps To Your Rails Applications

July 8, 2008
By Jason Gilmore

Send Email »
More Articles »

Adding Information Windows

Figure 4 is clear proof you're getting somewhere, showing users where to find the best pizza in town. However, which icon points to Ianazone's, and which to Belleria's? You can rectify this problem by modifying the GMarker calls to include additional information that will display in an information window should the user click on the marker. The following code will add pizzeria names and mailing addresses to each window:

ianazones_address = "Ianazone's<br />8590 Glenwood Ave<br />
   Boardman, OH 44512"

ianazones = GMarker.new([41.023849,-80.682053],
  :title => "Ianazone's Pizza", 
  :info_window => "#{ianazones_address}")
@map.overlay_init(ianazones)

belleria_address = "Belleria's<br />789 Wick Ave<br />Youngstown,
   OH 44505"

belleria = GMarker.new([41.111141,-80.641281],
  :title => "Belleria's", 
  :info_window => "#{belleria_address}")
@map.overlay_init(belleria)

Figure 5: Adding an information window to the map

Notice the use of <br /> tags in the information window message to separate each line. You're free to use any valid HTML markup you please to dress up the format.

Changing the Default Icon

The default red teardrop icon is okay for a standard map, but what if you wanted to spruce things up a bit? With a bit of additional programming and some patience, you can change the default icon to one more fitting of your website's purpose. For instance, Figure 6 displays a map using a custom pizza box icon.

Figure 6: Adding an information window to the map

As you can see below, the code is fairly straightforward. First, you need to define the custom icon by creating a GIcon object, and defining the icon and corresponding shadow icon location. To offset the shadow icon, you'll see I'm stretching it an additional five pixels wide to achieve the shadow's casting effect. Next, you need to define the icon anchor relative to the marker coordinates, and finally the offset location of the informational window that will appear when the icon is clicked. Finally, you give the icon a name, in this case, pizza_icon, and define it as a variable.

Any time you'd like to subsequently use the custom icon, just pass that icon name into the GMarker declaration, as is shown below.

@map.icon_global_init(GIcon.new(:image => "/images/pizza.png",
   :shadow => "/images/pizza-shadow.png",
   :shadow_size => GSize.new(37,32),
   :icon_anchor => GPoint.new(7,7),
   :info_window_anchor => GPoint.new(9,2)), "pizza_icon")

pizza_icon = Variable.new("pizza_icon")

ianazones_address = "Ianazone's<br />8590 Glenwood Ave<br />
   Boardman, OH 44512"

ianazones = GMarker.new([41.023849,-80.682053],
   :icon => pizza_icon,
   :title => "Ianazone's Pizza",
   :info_window => "#{ianazones_address}")

@map.overlay_init(ianazones)

You might have noted I mentioned patience is a requirement when creating custom icons. This is because you'll need to spend some time creating the icon unless you can find one with an appropriate usage policy, and then experiment with shadow opacity and offset until the desired affect is achieved. Once complete, though, your users will marvel at your attention to detail!

Where to From Here?

Hopefully, this introductory tutorial leaves your mind racing regarding new possibilities for your Rails applications! This is just a sampling of things to come, though; in future installments, you're going to stretch the capabilities of Rails and the Google Maps API to their limits, so check back regularly for the latest updates!

About the Author

W. Jason Gilmore is a freelance developer, consultant, and technical writer. He's the author of several books, including the best-selling Beginning PHP and MySQL: From Novice to Professional, Third Edition (Apress, 2008. 1,080pp.).

Page 3 of 3