Theming Pop Ups

Google Maps popularized the idea of a “pop up” on a map (Google calls this an InfoWindow). A pop up is a speech bubble that appears when a user clicks on a marker; it displays a snippet of information relevant to that place, as shown in Figure 6-12.

Google Map traditional pop up

Figure 6-12. Google Map traditional pop up

GMap Theming

In the GMap module, because of the way it uses Version Two of the Google Maps API, you cannot change what the pop up looks like. However, you do have control over the display of the content that goes into the pop up. GMap uses Views Display for rendering its output, so you can theme it just like any other View. Under the Advanced section in Views, you can see the Theme Information (shown in Figure 6-13). Create one of the .tpl.php files for the Row style output or Field content, such as views-view-fields--drupal-companies--page.tpl.php. Theming views is beyond the scope of this tutorial, but if you have the Advanced Help module enabled, you can access the help page for theming views on your website at /help/views/using-theme.

GMap Views theme information

Figure 6-13. GMap Views theme information

OpenLayers Theming

The simplest way to change the appearance of the pop up in OpenLayers is to use CSS. If you need to add or alter the markup, you will need to understand JavaScript theming.

The OpenLayers module ...

Get Mapping with Drupal now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.