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

Rucha

SOLVED CLOSED ACTIVE ANSWERED
User: Rucha
Posted: on Mar 20, 2018 02:45 AM
Forum: Social Networking
Answer: 2
Views: 6593

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");            
         document.write(contents.innerHTML);
         window.print();
  </script>  

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

https://ibb.co/bw1EvH

What is the solution?please suggest

Thanks.

Mudassar

0 3

Reply
ANSWER
User: Mudassar
Replied: on Mar 20, 2018 04:32 AM
Modified: on Mar 20, 2018 04:32 AM
Report

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 () {
            LoadMap();
        }
        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 >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
            imgMap.style.display = "none";
        };
    </script>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div id="dvMap" style="width: 220px; height: 350px">
                </div>
            </td>
            <td>
                &nbsp; &nbsp;
            </td>
            <td>
                <div id="dvMapImage">
                    <img id="imgMap" alt="" style = "display:none"/>
                </div>
            </td>
        </tr>
    </table>
    <br />
    <input type="button" id="btnPrint" value="Print" onclick="Print()" />

Demo

Rucha

0 8

Reply
ANSWER
User: Rucha
Replied: on Mar 20, 2018 11:48 PM
Report

Hello

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.open();

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

        popupWin.document.write(toPrint.innerHTML);

        popupWin.document.write('</html>');

        popupWin.document.close();

    }
    function PrintPreview() {

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

        popupWin.document.open();

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

        popupWin.document.write(toPrint.innerHTML);
       
        popupWin.document.write('</html>');
        //directionsService.route(request, function(response, status) {
        //    if (status == google.maps.DirectionsStatus.OK) {
        //        directionsDisplay.setDirections(response);
        //    }
        //});
        popupWin.document.close();

    }

So i got an answer for that particuler issue.

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

Thanks

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

Company

Explore

Follow us

Contact Us