Does anyone know where I can find, or does anyone have, a solid explanation of how to style the popup that GMap provides when you click on a map marker? I've seen it done on other sites using the GMap module, but I can not for the life of me figure out how to style it myself.

I've done some searching around and found infobubble.js, apparently code made by Google to help with the styling, however I can't figure out how to apply it to Drupal or how to use it.

Any help would be appreciated, I'm at my wits end with this one.

This is Drupal 7 by the way, and the newest version of the GMap module.

  • Regarding infobubble, there's a [drupal.org/node/2035847](recent patch available). Does infobubble is suficient for you or what kind or styling are thinking of ?
    – tostinni
    Jul 16, 2013 at 20:29
  • Thanks man, this did help. Luckily I only needed to do a very basic restyling of the bubble.
    – John
    Jul 17, 2013 at 13:52

1 Answer 1


infobubble.js is available as a patch: Add more theming options to popup bubble by using infobubble library plugin for Gmap module.

Have a look at it as it allows you to modify several parameters of the popups.

shadowStyle - Options: 0 (no shadow), 1 (default shadow), 2 (sharp shadow)
padding - Like the css property, the padding of the bubble.
borderRadius - Like the css property, the radius of the bubble's corners.
borderWidth - Like the css property, the width in pixels of the border.
borderColor - Like the css property, the hex or rgb color of the border.
backgroundColor - This is the background of the content of the bubble, but NOT the entire bubble itself.
bubbleBackgroundClassName - A css class for the entire bubble.
minWidth - Like the css property, the minimum width of the bubble.
maxWidth - Like the css property, the maximum width of the bubble.
minHeight - Like the css property, the maximum height of the bubble.
arrowSize - The width of the pointer arrow. NOTE: if you choose an arrow style that only uses half of the arrow, this number will be twice as wide as your arrow at its widest point.
arrowPosition - The percent from the left of the bubble where the arrow will appear. arrowStyle - Options: 0 (full triangle), 1 (half triangle leaning left), 2 (half triangle leaning right)
closeImage - The url of the image to use as the close button for the bubble An example of most of these options can be seen on the infobubble examples page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.