Parallax Google Maps

by Vladimir Sobolev

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<div id="map_canvas"></div>

CSS

body {
    width: 100%;
    height: 1500px;
}

#map_canvas {
    width: 100%;
    margin-top: 200px;
    height: 480px;
}

JavaScript

var map,
	W = $(window);

function initialize() {
    var mapOptions = {
        zoom: 15,
        scrollwheel: false,
        center: new google.maps.LatLng(40.7617162,-73.9802536),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scroll: {
            x: $(window).scrollLeft(),
            y: $(window).scrollTop()
        }
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
    new google.maps.Marker({
        map: map,
        position: map.getCenter()
    });
    var offset = $(map.getDiv()).offset();
    map.panBy(((mapOptions.scroll.x - offset.left) / 3), ((mapOptions.scroll.y - offset.top) / 3));
    google.maps.event.addDomListener(window, 'scroll', function() {
        var scrollY = W.scrollTop(),
            //scrollX = $(window).scrollLeft(),
            scroll = map.get('scroll'),
			//panx = -((scroll.x - scrollX) / 3),
			pany = ((scroll.y - scrollY) / 8);
        if (scroll) {
            map.panBy(0,pany );
        }
        map.set('scroll', {
            //x: scrollX,
            y: scrollY
        })

    });
}

google.maps.event.addDomListener(window, 'load', initialize);