Google Maps V3 Resize and Center in the same time. (with jQuery resize)

[Répás Zoltán]

Hello!

I'd like to make a cute animation for my google maps api.

I have two divs next to each other, one with 0px width.

When I click to a single target the MAP width is scales down, with a jquery animation in 200ms.

Same time the right sided DIV's width sets from 0 to 500px (200 ms too)

So it looks like, the map is "compressed" by the right-panel.

I'd like the point to be in the middle after the click. And here is the problem.

Wrong method #1 The point will be in the middle after the resize, but the move is not smooth because the panTo event will fire after the resize.

$(content).prependTo("#mapinfo");

$("#map").animate({

   width: '478'

 }, 200);

$("#mapinfo").animate({

   width: '500',

   right: '0',

 }, 200, function() {

google.maps.event.trigger(map, 'resize');

map.panTo(marker.getPosition());

});

0----------------------------1---------------------------2 time in secs

 S------------------------------------------------------E animation #1 (Start - End)

 S------------------------------------------------------E animation #2 (Start - End)

 -------------------------------------------------------X fire map resize event trigger, and center it

Wrong method #2 The point will be in the middle in the same time when the resize fired, so it gets failed to find where the center will be after the resize because the resize wont finished yet.

google.maps.event.trigger(map, 'resize');

map.panTo(marker.getPosition());

$(content).prependTo("#mapinfo");

$("#map").animate({

    width: '478'

  }, 200);

$("#mapinfo").animate({

    width: '500',

    right: '0',

  }, 200, function() {});

0----------------------------1---------------------------2 time in secs

 S------------------------------------------------------E animation #1 (Start - End)

 S------------------------------------------------------E animation #2 (Start - End)

 X------------------------------------------------------- fire map resize event trigger, center

Please help me, how to resize and panto center in the same time.

Thanks for the help.

Répás Zoltán
marh...@gmail.com

[Kesuke]

Ideally option 1 would work, but sometimes the animation complete
function in JQuery fires before the DOM has actually finished
rendering the animation - especially on older devices/mobile devices.
You could try enclosing the resize in a setTimeout() method, probably
with a generous time on it like 300-750 miliseconds. This will mean
you resize the map THEN panTo the new center.

It would be good if you could show us a link to this - for example
sometimes I've found that by floating the map div in a certain
direction you can make the pan look less awkward.

If you are trying to time it perfectly so the map pans with the
animating div you probably won't be able to. Even though you can
specifcy a time in miliseconds for the animation to take, the time is
more of a rough guide rather than a consistent or precise measure to
sequence events.

On Aug 17, 10:45 am, Répás Zoltán <marhar...@gmail.com> wrote:
> Hello!
>
> I'd like to make a cute animation for my google maps api.
>
> I have two divs next to each other, one with 0px width.
>

> When I click to a single target the MAP width is scales down, with a jquery animation in 200ms.
> Same time the right sided DIV's width sets from 0 to 500px (200 ms too)
>
> So it looks like, the map is "compressed" by the right-panel.
>

> marhar...@gmail.com

[Répás Zoltán]

The example is here: http://teszt.privilegetours.co.uk

In the landing page (START), select the "Térképes" tab (it means "Mapped")

Répás Zoltán
marh...@gmail.com
06302311320

--
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.

[Chris Broadfoot]

Hi Repas,

I'd be looking at using a "step function" of jQuery animate() that gets called at each step. Within the function, you could use panTo or setCenter on the map.

http://api.jquery.com/animate/#step

Let me know how that goes!

Chris

--

http://twitter.com/broady

[Répás Zoltán]

Thanks for your answer Chris.

Do you guys know anything about markercluster event handling? 

E.g. I'd like to make a preloader to markercluster loading, and fadeout on markercluster ready. How can i do this?

Thanks again

Répás Zoltán
marh...@gmail.com
06302311320