[Solved] Want to use print functionality for Google Map in ASP.Net

Last Reply one year ago By Rucha

Posted one year ago

Hello, I want to create print functionality of google map in my asp.net web application.

I use the following code for that,

<script language="javascript">        
         var contents = window.opener.document.getElementById("dvMap");            

    <input type="button" value="Print" onclick="javascript:this.style.display='none';window.print();this.style.display='';" />

But while i am clicking on print button it will open print page but not show the map which i want to print,it show blank page.please refere following image.


What is the solution?please suggest


Posted one year ago Modified on one year ago

This is the only example that actually Prints.

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript">
        var markers = [
        "title": 'Aksa Beach',
        "lat": '19.1759668',
        "lng": '72.79504659999998',
        "description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
        "title": 'Juhu Beach',
        "lat": '19.0883595',
        "lng": '72.82652380000002',
        "description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.'
        "title": 'Girgaum Beach',
        "lat": '18.9542149',
        "lng": '72.81203529999993',
        "description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
        "title": 'Jijamata Udyan',
        "lat": '18.979006',
        "lng": '72.83388300000001',
        "description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
        "title": 'Sanjay Gandhi National Park',
        "lat": '19.2147067',
        "lng": '72.91062020000004',
        "description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
        window.onload = function () {
        var map, mapOptions;
        function LoadMap() {
            mapOptions = {
                center: new google.maps.LatLng(19.0883595, 72.82652380000002),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

            for (var i = 0; i < markers.length; i++) {
                var data = markers[i];
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
        function Print() {
            //URL of Google Static Maps.
            var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap";

            //Set the Google Map Center.
            staticMapUrl += "?center=" + mapOptions.center.lat() + "," + mapOptions.center.lng();

            //Set the Google Map Size.
            staticMapUrl += "&size=220x350";

            //Set the Google Map Zoom.
            staticMapUrl += "&zoom=" + mapOptions.zoom;

            //Set the Google Map Type.
            staticMapUrl += "&maptype=" + mapOptions.mapTypeId;

            //Loop and add Markers.
            for (var i = 0; i < markers.length; i++) {
                staticMapUrl += "&markers=color:red|" + markers[i].lat + "," + markers[i].lng;

            //Display the Image of Google Map.
            var imgMap = document.getElementById("imgMap");
            imgMap.src = staticMapUrl;
            imgMap.style.display = "block";

            //Print the Google Map.
            var divContents = document.getElementById("dvMapImage").innerHTML;
            var printWindow = window.open('', '', 'height=500,width=400');
            printWindow.document.write('<html><head><title>Google Maps</title>');
            printWindow.document.write('</head><body >');
            imgMap.style.display = "none";
    <table border="0" cellpadding="0" cellspacing="0">
                <div id="dvMap" style="width: 220px; height: 350px">
                &nbsp; &nbsp;
                <div id="dvMapImage">
                    <img id="imgMap" alt="" style = "display:none"/>
    <br />
    <input type="button" id="btnPrint" value="Print" onclick="Print()" />



Posted one year ago


Thanks for your support.

But it is not working i dont understand what to do.

I have tried another javascript function like below to print map.


    function PrintDoc() {

        var toPrint = document.getElementById('dvMap');

        var popupWin = window.open('', '_blank', 'width=700,height=400,location=no,left=200px');


        popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">')




    function PrintPreview() {

        var toPrint = document.getElementById('dvMap');
        var popupWin = window.open('', '_blank', 'width=700,height=400,location=no,left=200px');


        popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body">')

        //directionsService.route(request, function(response, status) {
        //    if (status == google.maps.DirectionsStatus.OK) {
        //        directionsDisplay.setDirections(response);
        //    }


So i got an answer for that particuler issue.

Now i have to mark any answer??Please let me know