As you saw in the last lessson about creating an info-window, you can use an HTML table for text layout. However you may want to go beyond simple layout and use CSS styles and/or showing one or more photos within the info-window. We'll show you how to do just that now. Note: all maps shown on this page are just bitmaps, not functional Google maps.
The HTML table code in the previous lesson:
results in the following info-window:
If the first <td> is updated to include a "style" attribute, we can control many aspects of its appearance. For this example, we'll just make the text larger, bold and in red. Look at the style part of the tag marked in green below, to see how this was done:
Now the info-window looks like this:
Of course it would be much better to use a class from a style sheet. That means using "class=" instead of "style=". Don't forget the reason to use external CSS, one change to a style is reflected throughout the entire site, whereas a "style" clause within a tag is local to that one file. How can you remember where you placed all your local styles? The answer is, you can't. For more information on this topic, please visit our CSS Tutorial section.
Now let's add a photo to the mix. Let's place a photo of the Golden Gate Bridge in the info-window. Using the last HTML table as a starting point, let's insert the code necessary to display the photo (by the way, the HTML code is now formatted to allow you to see it better):
var html_text = "
<table>
<tr>
<td style='font-family:Arial, Helvetica, sans-serif;
font-weight:bold; color:#FF0000; font-size:22px'>
This is San Francisco
</td>
</tr>
<tr>
<td>Home of the Golden Gate Bridge.</td>
</tr>
<tr>
<td align='center'>
<img src='images/ggb.jpg' width='463' height='361'>
</td>
</tr>
</table>";
Not a bad looking info-window, right? Just think of all the possibilities there are to style these things, you could easily present your corporate identity if you needed to.