Sliding side panel

[sgiddings]

Hello,

I would like to be able to produce a similar sliding side panel effect
as that which can be currently seen on the general maps site.

So far I have a two div's
1. full side panel
2. "closed" side panel

My problem is that, when I hide the full side panel to show the closed
side panel, at first the map would move over to the left. This is
normal.
So here is what I was doing to keep the map position "static" on the
screen -

// get the map div
vMap = document.getElementById("carte");
// get the "closed" side panel div
vClosedOpts = document.getElementById("closed-options");
// disable the map object UI
vCarte.setOptions({disableDefaultUI: true });
// get the current center of the map as a LatLng object
vCtr = vCarte.getCenter();
// convert it to pixels using a custom overlay projection
vPt = vOverlay.getProjection().fromLatLngToContainerPixel(vCtr);
// adjust the x position to cover the now closed side panel area
vPt.x -= 180;
// convert back to latlng positioning
vCtr = vOverlay.getProjection().fromContainerPixelToLatLng(vPt);
// update the map center
vCarte.setCenter(vCtr);
// set the width of the closed panel bar
vClosedOpts.style.width = "20px";
// update the map div position
vMap.style.left = "20px";
vMap.style.marginRight = "20px";
// re-enable the UI
vCarte.setOptions({disableDefaultUI: false });

This works well. However, the map flashes during this process (which
is why I tried using the disableDefaultUI option) and as I would like
to use a "sliding" panel effect I would like to know if there would be
a better way of doing this ?
In addition - what would be the best way of implementing the sliding
part ?

Hope I have given enough info here.

[Grok Lobster]

Nothing to do with the Maps API.

[sgiddings]

Sorry, but that means that you have not understood my question.

I want to achieve the same behaviour as the public interface.
That is, no flashing on the map when removing a side panel and keeping
the map position.

[Nathan Raley]

He meant that is doesn't have to do with the Maps API but rather JavaScript and CSS manipulation instead.

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[sgiddings]

Not sure I totally agree, as I have to use the Maps API to "keep" the
map position, as my example indicated.
Are you saying that the current implementation on the public web site
(maps.google.com) achieves this only using javascript and css ?

On Sep 22, 9:19 pm, Nathan Raley <nlrale...@gmail.com> wrote:
> He meant that is doesn't have to do with the Maps API but rather JavaScript
> and CSS manipulation instead.
>

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2Bunsu...@googlegroups.com>
> > .

[Ralph Ames]

V2 example, collapsing rather than sliding.

http://koti.mbnet.fi/ojalesa/exam/index.html

Ralph
-
www.easypagez.com/maps/map_index.html
www.easypagez.com/maps/v3_basicmap.html

--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to

google-maps-js-a...@googlegroups.com.

[Nathan Raley]

According to the example he posted above js and css coupled with some tricks to handle the map's center among a few other caveats that are all included in the example linked above.

[sgiddings]

Thanks Ralph, this was exactly what I was looking for !

On Sep 23, 3:23 pm, Nathan Raley <nlrale...@gmail.com> wrote:
> According to the example he posted above js and css coupled with some tricks
> to handle the map's center among a few other caveats that are all included
> in the example linked above.
>

> On Thu, Sep 23, 2010 at 7:26 AM, Ralph Ames <ralph.a...@gmail.com> wrote:
> > V2 example, collapsing rather than sliding.
>
> >http://koti.mbnet.fi/ojalesa/exam/index.html
>
> > Ralph
> > -
> >www.easypagez.com/maps/map_index.html
> >www.easypagez.com/maps/v3_basicmap.html
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > To post to this group, send email to
> > google-map...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2Bunsu...@googlegroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > To post to this group, send email to
> > google-map...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2Bunsu...@googlegroups.com>
> > .