5.3 Styling your infowindow

The google infowindow can provide useful information regarding a specific location to the user. This can be in the form of text, images, and even video’s. Styling the contents of this infowindows aesthetically can have a direct impact to the users visiting your site. The following are a couple of simple guidelines to make your infowindow look “pretty”.

By default, the infowindow does not have any set width. Consider the following call to create a marker with the following info window content:

1
yoh.createMarker(34.17700641735229, -118.84385347366333,'Los Feliz Dr and N Conejo School Rd Stop 2: intersection near medium-high residential developments, schools and parks');

It will therefore expand the size of the window to about 80% of your total map width, and may not be the desired outcome:

infowindow with no width

infowindow with no width

Styling options

In order to set the width of the infowindow, to say, 250 pixels, first wrap the text in a DIV tag. Once the text is inside a DIV container, you can set the style of the DIV to determine the behavior of its content. For example, you can define certain styling characteristics for the DIV:

  • width
    <div style="width: 250px;">some content here</div>
  • text color
    <div style="color: #ff0000;">some red content here</div>
  • font size
    <div style="font-size: 16px;">some 16 point font content here</div>
  • font family
    <div style="font-family:Arial, Helvetica, sans-serif;">make this an Arial font</div>

You can then opt to combine multiple styling elements into the same div, making sure to separate each style with a semi-colon:

<div style="width: 250px;color: #ff0000;font-size:24px;font-family:Arial, Helvetica, sans-serif;">some content here</div>

Adding this to the create marker call would look like this:

1
yoh.createMarker(34.17229311310708, -118.83639693260193,'<div style="width: 250px;color: #ff0000;font-size:24px;font-family:Arial, Helvetica, sans-serif;">Los Feliz Dr and N Skyline Dr Stop 1: intersection near high concentration of medium-high density housing</div>');

Using Stylesheets

While you are able to hard-code the DIV styles in each individual marker, this is not an efficient method to apply styling if you are going to be creating multiple infowindows that need to have the same look and feel. Stylesheets are available for this purpose: to assign a single style that can be applied to multiple elements on the page.

In order to apply a single style to multiple DIV’s on a page, we will use the “class” parameter. The stylesheet will define a single style for every DIV on the site that is given that class identification.

To start, let’s create a class entry in our stylesheet, using the styles we used earlier. The map template already has some stylesheet code on the top of the page:

1
2
3
4
5
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
</style>

We can add a new style designation to this for our infowindow class:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
   
    .infowindow
    {
        font-size:24px;
        width: 250px;
        color: #ff0000;
        font-family:Arial, Helvetica, sans-serif;
    }
</style>

Notice that “class” styles (one style to multiple elements), starts with a period (.), while “id” based styles (one style to one element) starts with a pound (#). Since our infowindow is a class that will be applied to multiple elements, we prefix it with a period.

Now we can add the DIV style designation in the infowindow content:

1
yoh.createMarker(34.17229311310708, -118.83639693260193,'<div class="infowindow">Los Feliz Dr and N Skyline Dr Stop 1: intersection near high concentration of medium-high density housing</div>');

(sample code)

Leave a Reply