Sunday 21 June 2015

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>

No comments:

Post a Comment