How to change rectangle strokecolor during using mouseover/mousout events?

[Geoff Schultz]

On my maps I create a series of rectangles which indicate the location of various weather charts. These can overlap one another and I would like to highlight the chart which would be selected if the user clicks within that rectangle.  The following code partially works, but quite often multiple rectangles are highlighted (strokecolor red), sometimes only part of a rectangle is highlighted and sometimes a rectangle which isn't even close to the mouse gets highlighted.  Clearly I'm doing something wrong!

Here's the code that I'm using:

        google.maps.event.addListener(bounding_box, 'mouseover', function()
                {this.setOptions({strokeColor: '#C00'})});
        google.maps.event.addListener(bounding_box, 'mouseout', function()
                {this.setOptions({strokeColor: '#00'})});

What should it be?

[Marcelo]

This is not really a maps issue, but general javascript.

Hold all your rectangles in an array and write a separate function to
highlight the desired rectangle.
That function should first deselect all rectangles in the array and
then highlight the selected one.

Pseudo-code:

google.maps.event.addListener(bounding_box, 'mouseover', function()
{highlight(this)});
google.maps.event.addListener(bounding_box, 'mouseout', function()
{highlight()});

function highlight(obj) {
// First loop the array and deselect all
// then highlight the selected one

if (obj) {
obj.setOptions(...)
}
}

--
Marcelo - http://maps.forum.nu
--

On Nov 28, 8:35 am, Geoff Schultz <geoffrey.w.schu...@gmail.com>
wrote:

[Geoff Schultz]

Here's your pseudo-code translated to Javascript.  Unfortunately I pretty much get the same weird behavior with groups of rectangles turning red at once, except that now I don't even get anything turning back to a black outline.

var bbHighlit = [];

google.maps.event.addListener(bounding_box, 'mouseover', function() {highlight(this)});
google.maps.event.addListener(bounding_box, 'mouseout', function() {highlight()});

function highlight(obj)
    {

    var bb;
    while (bb = bbHighlit.pop())
        {bb.setOptions({strokeColor: '#00'});}
   
    if (obj)
        {
        obj.setOptions({strokeColor: '#FF0000'});
        bbHighlit.push(obj);
        }
    }

[Marcelo]

On Nov 28, 11:04 am, Geoff Schultz <geoffrey.w.schu...@gmail.com>
wrote:

> Here's your pseudo-code translated to Javascript.  Unfortunately I pretty
> much get the same weird behavior with groups of rectangles turning red at
> once, except that now I don't even get anything turning back to a black
> outline.

Then follow the posting guidelines and post a link that demonstrates
the problem.
By the way, why are you using array.pop()?

--
Marcelo - http://maps.forum.nu
--

>

[Geoff Schultz]

The following is what I came up which worked:

var highlitBB;

google.maps.event.addListener(bounding_box, 'mouseover', function() {highlight(this)});

google.maps.event.addListener(bounding_box, 'mouseout', function() {clearHighlight()});


function clearHighlight(obj)
    {
    highlitBB.setOptions({strokeColor: '#000000'});
    }
   
function highlight(obj)
    {   
    obj.setOptions({strokeColor: '#FF0000'});
    highlitBB = obj;
    }

Thanks for the help.

-- Geoff