Agaric Design Collective

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

By Benjamin Melançon
on 14 Nov
0 comments

Key words and phrases

gmap google views Drupal imagecache Full CCK imagecache Views integration Content communication

Tags

Description

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:

<pre>
.gmap-popup {
  font-size: 10px;
}

.gmap-popup.latitude,
.gmap-popup.longitude
{
  display: none;
}</pre>

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 { }

 

Post new comment
The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <h1> <h2> <h3> <h4> <h5> <h6> <small> <pre> <strike> <sub> <sup> <kbd> <s>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.