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

CommentFileSizeAuthor
#23 gmap_markers_width.patch593 bytesEmanueleQuinto
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

webgeer’s picture

Assigned: Unassigned » webgeer
Category: support » feature

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.

alanburke’s picture

Thanks for the quick response.
I'll keep an eye out for that.
Regards
Alan

webgeer’s picture

Status: Active » Fixed

All pop-up windows are now inside gmap-popup divs and can be styled using css.

Anonymous’s picture

Status: Fixed » Closed (fixed)
ymmatt’s picture

Status: Closed (fixed) » Active

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.

ymmatt’s picture

Category: feature » support

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.

ymmatt’s picture

Status: Active » Fixed

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.

Anonymous’s picture

Status: Fixed » Closed (fixed)
markDrupal’s picture

Title: Size of 'pop-up' bubble on GMap » Size of 'pop-up' bubble on user locations GMap too wide
Priority: Minor » Normal
Status: Closed (fixed) » Active

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>

johnnybegood’s picture

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!

ultimike’s picture

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.

drupalfan2’s picture

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.

raymondllee’s picture

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.

dgtlmoon’s picture

I just placed a couple of
's at the end of the text instead, and it seemed to help heaps

OnkelTem’s picture

Да причем тут gmap_views.module?

tom_o_t’s picture

Status: Active » Postponed (maintainer needs more info)

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?

smitty’s picture

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?

husztisanyi’s picture

Title: Size of 'pop-up' bubble on user locations GMap too wide » same problem
Version: 6.x-1.x-dev » 5.x-1.0-alpha1

I have the same problem. I subscribe.

smitty’s picture

Title: same problem » Size of 'pop-up' bubble on user locations GMap too wide

Restoring the right title.

smitty’s picture

Any solution in sight?

anderssl’s picture

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!

EmanueleQuinto’s picture

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:

openInfoWindowHtml(content, opts?)

Opens the map info window over the icon of the marker. The content of the info window is given as a string that contains HTML text. Only option GInfoWindowOptions.maxWidth is applicable.

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.

EmanueleQuinto’s picture

Version: 5.x-1.0-alpha1 » 6.x-1.0-rc1
Status: Postponed (maintainer needs more info) » Needs review
FileSize
593 bytes

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.

jenlampton’s picture

Version: 6.x-1.0-rc1 » 5.x-1.0-rc2

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

dadderley’s picture

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.

farald’s picture

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.

ron_s’s picture

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.

ressa’s picture

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

chezwel’s picture

Any solutions for 6x?

belpix’s picture

Version: 5.x-1.0-rc2 » 6.x-1.x-dev

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);

alextronic’s picture

Yes, but... what about the height?!

Bartezz’s picture

Thanx, that worked for me!

Cheers

nemchenk’s picture

Just overriding div.gmap-popup in CSS work for me using 6.x-1.x-dev as of now

alextronic’s picture

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?????

nemchenk’s picture

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...

alextronic’s picture

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.

isaac77’s picture

Issue tags: +gmap, +popup, +infowindow, +width, +map, +popup window

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.

alextronic’s picture

Yes, but... what about the height?! (Should I change the title of the thread, or conform to the limitations?)

Danny Englander’s picture

subscribing

riversidekid’s picture

subscribing too

Is there no way to configure the view to perform a particular task on click, like there is for the Gmap module? I'd much rather fix this within the GUI rather than code as this would retain for future upgrades.

I would even be good if there was no pop up window and a mouse click on the marker performed a zoom to that marker.

ceej23’s picture

I got around this with inline style for all elements in the popup.

Seems like external styles are applied after the popup comes back from Google so changes to things like font size, padding, margins, etc. throw things out of whack.

EmpireNM’s picture

I realize this thread is about "too wide", but there were several requests to address the issue of height as well.

I noticed a strange problem. I also successfully set up a Gmap view, with markers by taxonomy. I was also having problems with the pop-up background not wrapping the content of my fields. But I realized that if I closed the pop-up window, and opened it again, the pop-up window would properly adjust to contain my content.

mttjn’s picture

Here's how to fix the height issue (and presumably you can alter the width in this way as well):

(1) Create a new tpl.php for the ROW STYLE OUTPUT of your gmap view. My view is called gmap-example so my new tpl.php is called: views-view-fields--gmap-example.tpl.php
(2) Grab the code Views gives you by clicking on the ROW STYLE OUTPUT link. Copy and paste this into the new tpl.php file.
(3) Wrap the *entire* (active) PHP in a div and apply inline styling to that div for height (and width if you wish).
[Styling other than inline may work but I dont have time to check this right now.]
(4) Rescan so that Views picks up the new tpl.php file.
(5) Click on a marker on your gmap and the pop-up bubble / info window should now appear with the height you specified.
(6) Double check it works by creating a fresh marker (ie one that cannot have been cached) and clicking on it to check the height of the pop-up bubble / info window.

Voila :)

--
Together is Better

alextronic’s picture

Sounds like something I must definitely try out.

tnightingale’s picture

While not ideal as infowindow dimensions are then fixed, solution #43 is pretty effective.

Subscribing

alextronic’s picture

Title: Size of 'pop-up' bubble on user locations GMap too wide » Configure width and height of 'pop-up' bubble on GMap

subscribing

nirad’s picture

I was able to accomplish this by theming the class ".gmap-popup" and giving it my desired width in CSS. This may not work if you need different widths for different map views.

zcrow’s picture

Theming .gmap-popup didn't work for me using the latest builds of gmap. What did work was adjusting the css of the h4 (which is the title of the bubble). I used this:

div.gmapnodelabel-location h4 { min-width: 300px; }

The gmapnodelabel-location might change from set up to set up (use firebug to find the right class)

teodor.sandu’s picture

+1 for post #43, that did the trick. Of course, the dimensions are fixed, but conditional php can be added to have many dimensions on the same view depending on page and other contextual factors, so you can have the bubble size vary for the same map on different pages. One can even calculate different sizes per node (based on fields availability and/or body length perhaps? a comfortable size can be estimated) so you can have different bubble sizes within the same map.
so, thanks mttjn :)

mttjn’s picture

@teodor.sandu: welcome :)

theshanergy’s picture

Just a note for anyone having trouble with styling the .gmap-popup div. I couldn't get this to work at first but I realized the problem was that I was being too specific with my CSS. I had "#container .gmap-gmap .gmap-popup", but I guess the js hadn't actually inserted gmap-popup into the dom by the time it calculated the height/width of the containing element. Your CSS selector needs to be ONLY ".gmap-popup" for this to work.

parasox’s picture

RE: #51 I'm noticing this too. The first map I added to my site I added custom sizes with .gmap-popup and it works fine. However for the next map I can't use the same dimensions, and as you say it seems that being more specific doesn't work at all.

youngelpaso’s picture

Hrmm.... subscribing

rowanprice’s picture

Issue tags: +CSS

another note -- for me, '.map-popup {height:100px;}' didn't work, but '.map-popup {max-height:100px;}' did.

suffering drupal’s picture

Over this long thread I got lost. In the last version does .gmap-popup already come with the .tpl or whatever file?
I do find it (empty) in the css, however it doesn't seem to appear on the page when looking at it with firebug. So adding values to .gmap-popup doesn't bring any change, of course.
Nevertheless, on another site we have it did work. Now I'm wondering if there we maybe have manually adapted some .tpl, but I don't really think we did, we generally don't dare to touch any code...

What I don't understand, why does the standard popup seem to be to big for everybody to start with, couldn't it have been made say width 70% and height 60% by default? Who would want a popup that covers almost the whole map anyway?

suffering drupal’s picture

Just discovered that the map on our other site that DOES have the gmap-popup css in it's code, is created through views, while the one we are having trouble with now is the one that comes directly in the node-creation form. Would that make the difference? (parallel to the problems that seems not to have been solved for the user pages?)

In the views map the -div class="gmap-popup"- comes right before the -div class="views-field-title"-. In the "problem-map" neither of those classes are found either with fire-bug or simply view source-code. Just in case, I did take in account the fact that some code seems to be hidden (in fire-bug?) until you actually click a marker and open a popup/balloon/bubble (always a bit confusing these multiple definitions).

bramley’s picture

subscribing

Maedi’s picture

subscribing

dafeder’s picture

Same problem in 7.x.

Where does that width of around 690px for the info windows come from? Is that a google map default?

dafeder’s picture

I have this working now. It is a little confusing, but if you set the ,gmap-popup style in your css the div widths will conform to it when you reload the page - the widths are "hard-coded" but take their cues from the CSS.

hot_sauce’s picture

After hours of frustration on this, I can confirm that #51 is ALL you need to do to get this to work. This is for the latest version in Drupal 7 but I am sure that it works for older versions too.

Simply add a css selector of .gmap-popup to your CSS. Nothing else, nothing more specific JUST .gmap-popup.

Then add your size requirements here. In my case, I did:

width: 300px !important;
height: 300px !important;

And bingo, all of the bubbles on the map are now that size. Because Google adds inline CSS to the divs, the !important part is necessary.
Hope this helps all who find this page.

webservant316’s picture

#61 worked great for me also, except on maps where I wanted the pop-up bubble larger than the map display. In that case the 'overflow: hidden' for the map itself clips the pop-up. Plus 'overflow:hidden' needs to be set for the map because it hides 'the rest of the map'.

Perhaps I will start another issue for how to get the pop-up to display in full if it is larger than the map.
ok - new issue here - http://drupal.org/node/1549554

webservant316’s picture

Almost seemed impossible to make the popup bubble display outside the bounds of the google map window and I read on a google page that it is not even possible. Unfortunately, gmap doesn't currently respect the gmap option to not display a bubble.

Good news is I hacked a solution to both format the bubble with css and also turn the bubble off on single marker node location maps. Here is the explanation - http://drupal.org/node/1139088#comment-5956720

podarok’s picture

Version: 6.x-1.x-dev » 7.x-1.x-dev
Status: Needs review » Postponed (maintainer needs more info)

can anyone provide a patch against latest devs?

drtrueblue’s picture

webservant316, thank you for your work and success. I've been struggling trying to get the bubble display outside the bounds of the google map also. If I understand it correctly, your patches will allow for CSS to control the size without getting hidden by gmap window overflow? If that is correct, does it still apply to current versions? Also, have you discovered any other approaches?

webservant316’s picture

Here is all the patch code that I am using https://drupal.org/node/1139088#comment-7217184
I am using GMap Module 6.x-1.1. Best wishes.

joachim’s picture

Category: support » bug
Status: Postponed (maintainer needs more info) » Active

Setting correct issue status and category. It's a bug, because the map looks broken. And it's not MNI, as AFAICT the problem is fully explained.

I have a view showing a gmap, which shows 2 nodes. The map popup is bigger the the size of the map I've set using a gmap macro.

joachim’s picture

The docs over at Google suggest the only thing we can set for the marker is a maxWidth: https://developers.google.com/maps/documentation/javascript/reference?hl...

This could get set in the module JS at the top of js/marker.js:

    var infowindow = new google.maps.InfoWindow({
        maxWidth: 500
      });

-- however that's a total hack. I have no idea how to do something more elegant such as getting the value of the map's width as set in the Gmap macro.

It does seem though that there is also a bug in Google maps, as the pop-up is trying to be the same width as the map, but often ends up off the edge of the map.

joachim’s picture

Managed a workaround in theme JS:

(function (jQuery, Drupal, window, document, undefined) {

  Drupal.behaviors.yes_web_theme_gmap_popup = {
    attach: function (context, settings) {
      // Get the InfoWindow object.
      // @see gmap/js/marker.js
      popup = Drupal.gmap.getInfoWindow();
      popup.setOptions({
        // Set its maximum width so that it doesn't go over the edge of the map.
        maxWidth: 300
      });
    }
  };

})(jQuery, Drupal, this, this.document);

Obviously you want to only load this when your view is being shown. You can load the JS file in YOURTHEME_preprocess_gmap_views_view_gmapextended().