How to change bg color in Google Maps' balloon (infowindow)?

Get Started
1

Hello!

There’re zillions of articles about it, but almost nothing is a simple and step-by-step guide. Somehow I managed to figure out most of functions of Googlemaps Plugin (Joomla extension). What I got you can see here:

http://repetitorov.com/contact

Here’s the code that I use:

{mosmap text='<div style=“text-align:center”><b>Наш адрес:</b>
71252, г. Тель-Авив,
ул. Арлозоров 225-Б,
2-й этаж, офис 25
<a href=“http://www.kotkovski.com”=linkTarget title=“На главную”>www.kotkovski.com</a>

<img src=“http://www.repetitorov.com/images/contactformTA1.png” width="283″ height="250″ />'}

It’s all nice…but I can’t figure out how to change background color of the balloon (infowindow) from #fff to #ebf3fb (it’s a color of page’s sheet to match it better).
I don’t care whether it’s a JS or a CSS-based solution, as long as it’s easy to implement in Joomla!.

The weirdest part is that when I open Firebug, it shows that the lowest part in the middle of the balloon (the one that connects the balloon to the marker) doesn’t belong to the same div style!

2

I can’t quite work out which div has that background color on it, but anyhow, the color you want is what’s showing for me, not white.

3

in you go to repetitorov.com, then the bg color is this: #ebf3fb
it’s kinda everywhere, but the balloon is white.

4

If you go into the code, see if you can change this

<div style="position: absolute; left: 0px; top: 0px; width: 317px; height: 366px; overflow: hidden; -webkit-user-select: none; [COLOR="#FF0000"]background-color: white;[/COLOR] border: 1px solid rgb(171, 171, 171); "></div>

to this:

<div style="position: absolute; left: 0px; top: 0px; width: 317px; height: 366px; overflow: hidden; -webkit-user-select: none; [COLOR="#FF0000"]background-color: #ebf3fb;[/COLOR] border: 1px solid rgb(171, 171, 171); "></div>
Edit:

Chances are, you don’ have access to that code directly, but that’s where it’s coming from, anyhow.

5

Hi,

You can use the infobox plugin to add custom HTML to a google map overlay. It allows for much greater flexibility.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

6

What I’ve found out so far is how to change the color of an inner rectangle within the balloon where my text and photo are, but then there’s a thick white border around it. It’s probably still looking nicer than the whole white bg.
I just added this: background: #ebf3fb; to this: div style="text-align:center;
And I got this: '<div style=“text-align:center; background: #ebf3fb;”
And how you found out about that code if you don’t have access to it? And is there a way around it to edit the code?

7

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

Though I have no clue how to implement it all in Joomla contact component…

8

Also I have found this:

Probably there’s a way to customize the balloon from within Google, so I guess there’s more stuff to learn

9

The infobox plugin I posted will give you complete control over the output, you can add a class the wrapper and give that a background.

If you’re not sure how to use this within Joomla you might need to ask in those forums.

10

I re-checked your solution and I think I would rather stick to infowindow, even the all white one. That infobox as it appears on an example page is even uglier.

11

You’re missing the point, the output is completely customisable. You do have to do the customisation though.

12

I don’t know…I saw the example and I didn’t like it. Enough said. What I need is to customize the EXISTING infowindow exactly as it appears and functions within Google Maps interface. I’m not looking to invent the wheel…sorry.