Size of 'pop-up' bubble on user locations GMap too wide
alanburke - May 11, 2006 - 20:58
| Project: | GMap Module |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | support request |
| Priority: | normal |
| Assigned: | webgeer |
| Status: | needs review |
| Issue tags: | gmap, infowindow, map, popup, popup window, width |
Description
A small feature request [I hope it belongs here].
Where could I configure the size of the pop-up window displayed when clicking on a Gmap 'pushpin'.
It seems a little large on my site, with too much whitespace padding.
[I'd normally view source and mess with the css.. It doesn't seem as easy as that at first glance].
Regards
Alan
#1
Google maps are kind of weird for the way they work. The look of the map is somewhat inconsistant. The google map window is supposed to conform to the size of the wrapping div of the content. However, with my testing, that doesn't seem to always work.
I have thought about this a bit in the past. Here are some possible approaches I could take
- Add a paramater to the gmap variable that sets the width of the window and then have the gmap module create a <div> with width specified.
- Add a css class gmap-popup and then using css you could create your preference for window width as well as any other settings that you want to use. The problem with this is that the width would apply to all pop-ups and you may want to be able to set alternatives different widths for different cases.
A third option (which is probably where I will go), will be to do both of these approaches.
#2
Thanks for the quick response.
I'll keep an eye out for that.
Regards
Alan
#3
All pop-up windows are now inside gmap-popup divs and can be styled using css.
#4
#5
I don't know if this post belongs here, but it seems that this has become an issue again, at least for me.
on the map/node page when I click on a marker the bubble appears but it shows up 1.5 times wider than the map.
I've changed some CSS settings for the divs that are within the bubble, so the text is the right width, but for some reason the bubble is still too wide.
#6
I've noticed that with different themes this works fine, so it must be a CSS issue, however I have no idea where to start.
#7
Ok, maybe I shouldn't have posted in the first place.
I had to add in a conditional css property into the template for the theme that I created. For some reason the size of the node messed everything up. All I had to change was
div .node {width: 250px}Just a note that custom theming can mess the bubbles up.
#8
#9
I am getting a problem where the pop-up size for the user location map is too wide but the pop-up for the node location box is good size.
could someone help me locate the code where the pop-ups for the location map is created? (what function in the .module file?)
also where is the code where the user location maps are displayed? (what function in which javascript file?)
I have tried to theme my style.css file, but the style infomation is writen into the source code for the popup and it is within so many divs with no id or class, so I cant override it.
<div style="position: absolute; left: 16px; top: 16px; width: 658px; height: 176px; z-index: 10;"><div><div class="picture"><a title="View user profile." href="user/alphaadmin"><img title="<em>AlphaAdmin</em>'s picture" alt="<em>AlphaAdmin</em>'s picture" src="files/pictures/picture-1.jpg"/></a></div><a title="View user profile." href="user/alphaadmin">AlphaAdmin</a></div></div>#10
I got a GMap Views block working fine but as many here I'm having problems to resize the popup window displayed when clicking on a marker.
It seems there isn't any class attached to the main div of the popup - which it's all I'd need ;)
On one of the comments above there is a mention to a "gmap-popup" class but that section of the code is currently commented out.
Any ideas how to get a class to style the "bubble"?
Thanks!
#11
I was having the same issue where the popup window wasn't the correct size to fit my content. Here's how I solved it:
Overrode the theme_gmap_views_marker_label function:
function mytheme_gmap_views_marker_label($view, $fields, $entry) {$marker_label = '<div class="gmap_popup">';
foreach ($view->field as $field) {
$marker_label .= '<div class="'. $field['field'] .'">'. views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view) .'</div>';
}
return $marker_label . '</div>';
}
The only change I made from the default theme function was wrap the whole thing in a div tag with the class "gmap_popup".
Then, in my CSS file, I added this:
.gmap_popup {height: 200px;
width: 200px;
}
Granted, in my case, I can live with a fixed width and height. It seems that there is still an issue with a javascript function in the gmap module (or maybe it is one of Google's gmap functions - I haven't been able to track it down) that calculates the height that is output for each popup bubble:
<div style="position: absolute; left: 16px; top: 16px; width: 200px; height: 200px; z-index: 10;">The embedded style information in this div is what is causing the popup bubbles to be sized incorrectly. For some reason, the size that is specified using the method I use for the interior div gets picked up by the "mystery" function that generated the embedded style information in the above div. When no size is specified for the interior div, it appears that the "mystery" function is somehow calculating the height and width (sometimes) incorrectly.
At least that's what I think is going on.
#12
This method (.gmap_popup) is not working for me!
Please tell me how I can change the width of a gmap usermap popup/bubble.
Thanx.
#13
I tried ultimike's suggestion above, but the height of the infowindow was still cutting off my text. The hack that I'm using to get around this problem is to manually add another div and then style it with a bottom-margin of 35px. That seems to adjust the box sufficiently so that I can see all the text.
In my over-ridden theme_gmap_views_marker_label function I add a line just before the return
$marker_label .= '<div id="gmap-popup-space"> </div>';return $marker_label . '</div>';
Hope this helps until a better solution can be found.
#14
I just placed a couple of
's at the end of the text instead, and it seemed to help heaps
#15
Да причем тут gmap_views.module?
#16
According to Google Translate, the above post (#15) translates from Russian to English as, "yes and here". OnkelTem - could you provide a bit more detail about your support request?
#17
I tried ultimike's suggestion above, but this does only resize the content of the bubble, not the bubble itself.
I think the dimensions of the bubble are calculated somewhere in the JavaScript.
Is there anybody, who can find right place and tell us what could be done?
#18
I have the same problem. I subscribe.
#19
Restoring the right title.
#20
Any solution in sight?
#21
Have a look at the CustomBalloon class by Mikel Malon, it might be useful.
http://brainoff.com/weblog/2007/10/29/1272
I'm currently trying to make it work on my own site, any feedback will be appreciated!
#22
After some reading I found a solution for this.
On line 46 of marker.js (v 1.2 2008/07/15 - drupal 6.4) we read:
if (marker.text) {marker.marker.openInfoWindowHtml(marker.text);
}
Reading GMap API documentation on markers we read:
So all we need (see [1]) is passing an object to openInfoWindowHtml with dimension (if declared).
if (marker.text) {if(marker.maxWidth) opts = {maxWidth : marker.maxWidth}
marker.marker.openInfoWindowHtml(marker.text, opts);
}
I'm using php code to generate markers (as long views integration is still not working, mid september 2008):
function _wfp_legacy_gmap_markers() {
$markers = array();
$sql = "SELECT
n.title, n.nid, nr.body, l.*,
cl.field_link_wfp_legacy_url, cl.field_link_wfp_legacy_title
FROM {node} n
LEFT JOIN {node_revisions} nr ON n.vid = nr.vid
LEFT JOIN {location_instance} li ON li.nid = n.nid
LEFT JOIN {location} l ON l.lid = li.lid
LEFT JOIN {content_field_link_wfp_legacy} cl ON cl.nid = n.nid
WHERE
n.type = 'country_page' AND
cl.delta = 0 AND
l.latitude IS NOT NULL";
$result = db_query($sql);
while ($country = db_fetch_object($result)) {
$markers[] = array(
'markername' => 'small blue',
'text' => check_plain($country->body),
'longitude' => $country->longitude,
'latitude' => $country->latitude,
'maxWidth' => '300',
);
}
return $markers;
}
function _wfp_legacy_gmap() {
$gmap_markers = array(
'zoom' => 1,
'maxzoom' => 5,
'width' => '580px',
'height' => '380px',
'maptype' => 'Map',
'controltype' => 'Small',
'longitude' => 60,
'latitude' => 30,
'markers' => _wfp_legacy_gmap_markers(),
'id' => 'auto3map',
);
return theme('gmap', array('#settings' => $gmap_markers));
}
Adding the maxWidth entry on marker array works for me.
#23
Attached patch (marker.js,v 1.2 2008/07/15 16:30:30) for above solution.
Tested on our dev site, it works.
Please note that this patch could apply to previous version as long is modifying only the js.
#24
I'm having the same issue on the 5.x branch. I have set my map dimensions to 600px wide, and my default the bubble is 678px wide. Seems to me like gmap is doing it's math wrong.
Overiding theme_gmap_views_marker_label with the added class as mentioned in #11 worked for my width issues, that magic function does seem to take into account css files.
The problem that remains for me is height. I have added a photo field to my view, and wish to have this photo floated to the left of the text. The magic function determines the height of the window by adding together estimated heights of all the fields in my view, but if I float that image to the left the height of that photo should be removed from the equation. Instead, I now have a vast area of white space at the bottom of my bubble.
Ideas for minimizing this space? All I came up with is a negative margin-bottom for my bubble (less than or equal to the height of my imagecached photos)
Jen
#25
I am having a similar issue. My problem is the height; specifically a lot of white space at the bottom of the bubble.
I can control the width well using css applied to ".gmap-popup".
That negative margin hack that you came up with is brilliant. Applying a negative margin to the bottom most element in the bubble gets rid of unwanted white space. It seems to work in Mac Safari, Firefox, and Opera: hopefully it works in windows browsers too.
Thanks for the tip.
#26
I am still having this issue. It seems that the text field in views won't break up in lines before the bubble text is exacly the width of the map window div. It's like the css item .gmap-popup isn't working. Map is created using views.
#27
I'm seeing very weird behavior on only particular maps where the pop-up bubble is set as too tall (height is excessive). I have looked at the popups using Firebug, and it's clear this is something to do with how GMap is calculating the bubble size.
All of the "height" and "width" CSS is applied directly to the elements rather than using any form of classes or IDs. I'm sure this is done because not all popups can be the same size. However there has got to be something in the code that can create more consistency of popup sizes.
#28
Thanks ultimike,
Your solution (#11) solved my problem. The Gmap window was too small for the image I inserted -- the image was sticking out at the bottom of the Gmap pop up bubble.
I got the best result with the theme_gmap_views_marker_label function added to my template.php as it is, and this added to my style.css:
.gmap_popup {
width: 300px;
}
#29
Any solutions for 6x?
#30
Solution #22 solved this issue for me.
You need to find in modules\gmap\js\marker.js this string:
"marker.marker.openInfoWindowHtml("
It is found two times: for default marker content and for ajax content. In my case adding maxWidth optional value for ajax content handler solved the problem. I changed this string:
marker.marker.openInfoWindowHtml(data);
to:
opts = {maxWidth : 300};
marker.marker.openInfoWindowHtml(data, opts);
#31
Yes, but... what about the height?!
#32
Thanx, that worked for me!
Cheers
#33
Just overriding div.gmap-popup in CSS work for me using 6.x-1.x-dev as of now
#34
can you also set the height? for example to 25px? and the padding-bottom of the text box if there's only 1 line of text, or 1 word?????
#35
I had to set width because it was much too wide. I can also set min-height to make the bubble taller than it needs to be.
alextronic, is your issue the height of the bubble when there is very little info in it? then div.gmap-popup won't help you much because that's only part of what is setting the height of the bubble. This div sits inside other divs, which are what is causing the minimum height of the bubble.
But, the thing is alextronic, the title of this issue says "Size too wide" -- no mention of height...
#36
Yeah, I knew about those nested divs that make height uncontrollable. I just thought, how can we be satisfied with just controlling width??
Anyway, you're absolutely right about the title of the issue. Will need to open a new thread to discuss the height of the bubble.
Thanks.
#37
Many of the fixes recommended above do not seem to apply to the 6.x-1.x version of gmap. In particular some of the CSS classes and theme functions discussed are not present in current versions of the module.
I was having a problem with extremely wide infowindows ('popup' windows) on my map, which I am generating through Views module. The solution was to put a
<div>around the content that is displayed in the infowindow, and then set a width or max-width on that<div>. With that in place, the google maps API calculates the width of the infowindow "bubble" properly.In the case of my view, I simply created a template in my theme to override views-view-fields.tpl.php, added an enclosing
<div>with a css class, and then set a max-width on that div. This avoids the need to mess around with gmaps, google maps api settings, etc.For the user map, I assume there is a similar way to override the theme of the information that is presented in the infowindows? That may not even be necessary if there are already CSS classes present that can be styled.
#38
Yes, but... what about the height?! (Should I change the title of the thread, or conform to the limitations?)