How to take screenshot of googlemap from web page using PhantomJs?

Question

My Requirement is to take screen shot of Google Map of web page.I am drawing Markers and Polyline dynamically on Google Map.I am using PhantomJS for taking screen shot.But screen shot is not capturing of complete Google Map which is displaying on web page.

Html and javascript for loading and display google map
----------
     <script>
            function initMap() {
                    var mapOptions = {
                        zoom: 15,
                        center: new google.maps.LatLng(28.5354383, 77.26393259999998)
                    };
                    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    var project_id = $('#project').data('url')
                    var latt = substation[0]
                    var lngg = substation[1]
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(latt, lngg),
                        title: new google.maps.LatLng(latt, lngg).toUrlValue(6),
                        map: map,
                        draggable: true,
                        label: {
                            color: 'black',
                            fontWeight: 'bold',
                            text: "Sub-Station",
                        },
                        icon: {
                            labelOrigin: new google.maps.Point(4, 25),
                            url: '/assets/sub_station.png',
                        }
                    });
                    google.maps.event.addListener(marker, "dragend", function(event) {
                        $.getScript("/update_pole.js?project_id=" + project_id + "&Type=SS" + "&new_cordinated=" + event.latLng.toString().slice(1, -1), function(data) {});
                    });
                    var lattt = feeder[0]
                    var lnggg = feeder[1]
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lattt, lnggg),
                        title: new google.maps.LatLng(lattt, lnggg).toUrlValue(6),
                        map: map,
                        draggable: true,
                        label: {
                            color: 'black',
                            fontWeight: 'bold',
                            text: "Feeder",
                        },
                        icon: {
                            labelOrigin: new google.maps.Point(4, 25),
                            url: '/assets/ptw.png',
                        }
                    });

PhantomJs for capture screenshot

 var page = require('webpage').create(); page.open('https://medhajtest.herokuapp.com/admin/visibilities/demo?id=586b524712598e0004f440d0', function() { page.viewportSize = { width: 1440, height: 900 }; var clipRect = page.evaluate(function(){ return document.querySelector("div#map").getBoundingClientRect(); }); page.render('github.png'); phantom.exit(); }); 

Expected Screen Shot

Currently Coming Screen Shot

Answer 1

Notice the dimensions of your screenshot, 400x300. It's the default PhantomJS viewport size. You must set the desired viewport size before opening a page.

var page = require('webpage').create();

// Got to set this before opening a page
page.viewportSize = { width: 1440, height: 900 };

page.open('https://medhajtest.herokuapp.com/admin/visibilities/demo?id=586b524712598e0004f440d0', function() {
    var clipRect = page.evaluate(function(){
        return document.querySelector("div#map").getBoundingClientRect();
    });
    page.render('github.png');
    phantom.exit();
});