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