User login

Theming google map popups to use imagecache with Views and GMap module in Drupal

So you can pass in the imagecache presets namespace directly into your GMap view for use in pop-ups.

I had (apparently) figured this out a while ago but had Dan going through the code print_r'ing views variables to try to figure out where we could intercept the file ID and change the path to imagecache... and the path was already imagecache.

Any imagecache type you create can be chosen for CCK image

Moral of the story, when you're dealing with Views, assume it can be done through the user interface. There is full and amazing Imagecache support of Views.

As for the rest, you pretty much can just do it with CSS on ".gmap-popup" which is applied to each line.

Can't figure out where on earth the code for the popup itself, the talk bubble style thing, comes from. I guess direct from Google.

Here's some CSS in progress by Dan:

.gmap-popup {
  font-size: 10px;

  display: none;

And here's the field class for the picture, in our case called action shot (the imagefield, not the imagecache preset, is what is used here).

gmap-popup field_action_shot_fid
.gmap-popup.field_action_shot_fid { }


Searched words: 
gmap google views Drupal imagecache Full CCK imagecache Views integration Content communication


Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.