Google Static map

Simple map
Documentation: https://developers.google.com/maps/documentation/staticmaps/

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400">
</img>

-------------------------------------------

Map with

<img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap\&markers=size:mid%7Ccolor:red%7CMumbai,Maharastra%7CPune,Maharastra%7CNavi+mumbai,Maharastra">

------------------------------------------------------------------------------------------
Map with route


<img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap\&markers=size:mid%7Ccolor:red%7CMumbai,Maharastra%7CPune,Maharastra%7CNavi+mumbai,Maharastra\&path=Mumbai|Navi+Mumbai|pune">

With diffrent color

<img src="https://maps.googleapis.com/maps/api/staticmap?size=1024x600&maptype=roadmap\&markers=size:mid%7Ccolor:red%7CMumbai,Maharastra%7CPune,Maharastra%7CNavi+mumbai,Maharastra\&path=weight:10%7Ccolor:red%7CMumbai|Navi+Mumbai|pune">

Print Google map with direction

First create google map with direction
Follow below link
http://sforcedc.blogspot.in/2015/06/google-map-and-direction-api-with.html

then convert google map into canvas using HTML2Canvas plugin

http://sforcedc.blogspot.in/2015/06/visualforce-page-screenshots-with.html

after that print the page.

Visualforce page

<apex:page showHeader="false">
    <input type="button" value="Print" onclick="javascript:this.style.display='none';window.print();this.style.display='';" />
 
    <div style="width: 100%;" id="mapDiv">
         <div id="map" style="width: 70%; height: 600px; float: left;margin:0px;color:black;"></div>
         <div id="panel" style="width: 30%; float: left;margin:0px;"></div>
    </div>
 
 
    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
 
    <script type="text/javascript">
        window.onload = function(){
            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();
         
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom:7,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
         
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('panel'));
         
            var request = {
                origin: 'Mumbai',
                destination: 'Navi Mumbai',
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
         
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
            setTimeout(myfunction, 4000);
        }
        function myfunction()
        {
            html2canvas(document.body,
            {
                useCORS: true,
                onrendered: function(canvas)
                {
                    document.body.appendChild(canvas);
                    document.getElementById("mapDiv").style.display = 'none';
                }
            });
        }
   </script>
</apex:page>

Visualforce page screenshots with JavaScript - html2canvas

html2canvas

Website: http://html2canvas.hertzen.com/

This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

Demo: http://html2canvas.hertzen.com/examples.html 

Demo:  http://jsfiddle.net/Ratan_Paul/6bfjf559/

In Visualforce page

<apex:page showHeader="false">

<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<div>

    Hello world !

</div>

<script>

html2canvas(document.body, 

 {

    useCORS: true,

    onrendered: function(canvas) 

    {

        document.body.appendChild(canvas);

    }

 })

</script>

</apex>

Using Parallax JS

Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.

Website:- http://pixelcog.github.io/parallax.js/

Parallax Picture Scrolling

Basic scrolling parallax text 

Parallax Foreground Scrolling