open/hide/show issue infobox with multiple markers

2,247 views
Skip to first unread message

unxcolin

unread,
Aug 12, 2010, 1:39:46 PM8/12/10
to Google Maps JavaScript API v3
Hi,

I'm having trouble with the infobox plugin on this site http://bit.ly/d22gZo
which has multiple markers all which will have an infobox. I've got it
to open on click like so:

function createMarker(x, y, z) {
...
...
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, marker);
});
...
}

However I can't get it to show/hide toggle on marker click or hide if
another marker is clicked, I get multiple infoboxes on screen all at
once and the only way to close is with the x.

Also clicking on the map to hide an open infobox isn't working, I
tried:

function initialize() {
...
...
google.maps.event.addListener(map, 'click', function() {
infobox.hide();
});
...
});

Many thanks in advance.

unxcolin

unread,
Aug 13, 2010, 1:15:23 PM8/13/10
to Google Maps JavaScript API v3
I've done a lot of searching about for this and can't seem to find any
examples of infobox on multiple markers that can be turned on/off when
clicking on the markers or the map - only one infobox at a time?

Any ideas on this?

Thanks

Rossko

unread,
Aug 13, 2010, 2:33:12 PM8/13/10
to Google Maps JavaScript API v3
> I've done a lot of searching about for this and can't seem to find any
> examples of infobox on multiple markers that can be turned on/off when
> clicking on the markers or the map - only one infobox at a time?

Have you looked at any of these?
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=one+infowindow

geoco...@gmail.com

unread,
Aug 13, 2010, 4:15:14 PM8/13/10
to Google Maps JavaScript API v3
I think you need to address the issues in this thread first:
http://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/688385b34aeaf007#

There are several examples of v2 infowindow behavior here:
http://www.geocodezip.com/v3_polygon_example_donut.html

Because google didn't implement it that way you have to be sure to
cover all the cases to get it to behave the way you want (Your
description above doesn't sound quite like v2 behavior, but it might
be)

-- Larry


>
> Thanks

unxcolin

unread,
Aug 14, 2010, 6:56:07 AM8/14/10
to Google Maps JavaScript API v3
It's actually infobox not infowindow as shown here
http://code.google.com/p/google-maps-utility-library-v3/. I don't have
any trouble getting infowindows working I just can't seem to replicate
that behaviour (such as http://www.geocodezip.com/v3_markers_infowindows.html)
with the infobox.

I'm definitely closer now. Making the map variable global means I can
then move the map click event inside create marker and the infobox
will close. I just can't get them closing when another marker is
clicked.

Thanks

Rossko

unread,
Aug 14, 2010, 10:34:49 AM8/14/10
to Google Maps JavaScript API v3
> It's actually infobox not infowindow as shown herehttp://code.google.com/p/google-maps-utility-library-v3/. I don't have
> any trouble getting infowindows working I just can't seem to replicate
> that behaviour (such ashttp://www.geocodezip.com/v3_markers_infowindows.html)
> with the infobox.

I think you just need to approach it in the same way. Have only one,
globally accessible, infobox object which you can move, re-populate
and close at will.

As an aside, I don't think you have properly declared your 'map'
global; just not declared it all. In some browsers that will default
to a global, in IE it will use the <div> with id='map' instead, which
might give unwanted suprises.

unxcolin

unread,
Aug 14, 2010, 11:44:43 AM8/14/10
to Google Maps JavaScript API v3
Thanks that's what I've done, not sure why I didn't think that was
possible, just one infobox and then setContent on each marker.

How should my map variable be declared?

Thanks

geoco...@gmail.com

unread,
Aug 14, 2010, 12:03:22 PM8/14/10
to Google Maps JavaScript API v3
Outside of any function declaration, do "var map;" or "var map=null;"
The statement that you currently have inside the initialize function
will initialize it when the page load function runs, and that
declaration will ensure it is in the global scope.

-- Larry


>
> Thanks

unxcolin

unread,
Aug 14, 2010, 12:16:58 PM8/14/10
to Google Maps JavaScript API v3
Perfect thanks to both of you : )

On Aug 14, 5:03 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
Reply all
Reply to author
Forward
0 new messages