Google Map Parallax Effect

Question

I want to know how I would go about creating a parallax Google Maps effect like on this wordpress theme (scroll toward the bottom)

http://themeforest.net/item/3clicks-responsive-multipurpose-wordpress-theme/full_screen_preview/5092225

I tried using some various parallax jquery scripts and javascripts, but can't seem to get the same effect.

Answer 1

The effect only for a map is not hard to achieve. Observe the scroll-event of the window and use the panBy-method of the map to get the effect.

Simple implementation: http://jsfiddle.net/doktormolle/dXqhn/

Answer 2

The link you provided didn't seem like a parallax to me, but either way, I made a short fiddle using Jquery scrollTop() method showing how it can be achieved, mind it's a bit buggy, but maybe we could find a better workaround based on it.

Here is the fiddle forked from Dr.Molle's answer: http://jsfiddle.net/xsz32sy9/

And here is the Jquery code:

var map;
function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
  new google.maps.Marker({map:map,position:map.getCenter()});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(window).scroll(function(){
    //THE HEIGHT, PLUS THE MARGIN OR PADDING IT NEEDS TO BE FULLY COVERED
    if($(window).scrollTop() < $('#map_canvas').height() + 21) 
        $('#map_canvas').css({'transform':'translate(0px,'+$(window).scrollTop()+'px)'});
});