how to shrink the infoWindow to the size of "1234567890" with smaller triangle pointer?

[zxo102]

Hi there,
I would like to use infoWindow to show the real-time monitoring
data. Since I just want to show the data only in the infoWindow, I
have tried this with different "size: new google.maps.Size(x, y)" in

var infowindow = new google.maps.InfoWindow({
content: '<div id=test01'> 1234567890</div>',
size: new google.maps.Size(10, 10)
});

But the infoWindow keeps same "big" size for the content of
"1234567890".
Anybody knows how to make the infowindow smaller?

Any thing is that I want the infoWindow to open automatically (without
any "click", "mouseover"...) when the html page is loaded.

In fact, there are about 30 monitoring points. I need to open 30
infoWindows at different locations in a specific area. In this way,
people can see all the real-time data in one page.

Thanks for your help.


ouyang

[Esa]

On Sep 13, 5:41 am, zxo102 <zxo...@gmail.com> wrote:

> But the infoWindow keeps same "big" size for the content of
> "1234567890".
> Anybody knows how to make the infowindow smaller?

The infowindow size is mostly automatic depending on content size. You
should set size of your content by wrapping it in a div with size
defined.

However there is a certain minimum size for the info window. 0...200px
wide content open the infowindow with its minimum width.

The maximum infowindow size depends on map dimensions.

>
> Any thing is that I want the infoWindow to open automatically (without
> any "click", "mouseover"...) when the html page is loaded.
>

You can open the info window by .open() method just like you do it in
a marker click event handler. (A link would help).

> In fact, there are about 30 monitoring points. I need to open 30
> infoWindows at different locations in a specific area. In this way,
> people can see all the real-time data  in one page.

If you try to show 30 infowindows simultaneously, you really need
small bubbles.

Maybe you should consider a custom infowindow
http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

[zxo102]

Esa,

Thanks for your help. I found an example at

http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/examples/advanced_example.html

With choosing "Conversation" for the Cluster style (the third drop
down menu), I got what I need. Unfortunately, this example has used
“new MarkerClusterer” which is only available in google maps api v2
based on the message at

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/4456c5fa2745dae6

In Google maps api v3, are there anyway to work around to achieve that
before "MarkerClusterer" is available in v3? Only thing I need is that
those number in icons (the above example) must be in <div>, for
example, <div id='test1'> 217 </div>.

Any ideas?

Thanks a lot.

ouyang

> Maybe you should consider a custom infowindowhttp://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/in...

[Esa]

Google Chart API offers that kind of labeled info bubble images.
http://groups.google.com/group/google-chart-api/web/map-pins-sticky-notes-information-bubbles-text-with-outline

You can use those as a marker images
http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerImage

[zxo102]

Thanks, Esa.

I just implement the code with those bubble images you listed above.
It works now. What I did is that when I get new data, I use
google.maps.Marker's set_map(null) to delete the old marker, then
create a new one with the new data. The problem is that users can see
the "delete" and "create" markers while freshing. Anyway to avoid
this?

ouyang

On Sep 15, 10:04 am, Esa <esa.ilm...@gmail.com> wrote:
> Google Chart API offers that kind of labeled info bubble images.http://groups.google.com/group/google-chart-api/web/map-pins-sticky-n...
>
> You can use those as a marker imageshttp://code.google.com/apis/maps/documentation/v3/reference.html#Mark...