In this article I will explain with an example, how to print Google Maps with Markers using JavaScript and Google Maps API V3.
Google Maps API V3 provides Static Maps API to take Screenshot (Snapshot) of Google Maps to Image. Once the Image Screenshot (Snapshot) is ready, it will be sent for printing using JavaScript.
Note: In order to execute the Google Maps application you will need to register and get an API key from Google API. For more details refer here.
 
 

Printing Google Maps with Markers using JavaScript

The HTML Markup consists of an array of Markers of different Geographic Address locations. Each marker in the array contains title, latitude, longitude and description of the location.
Inside the JavaScript window.onload event handler, the LoadMap function is executed.
Inside the LoadMap function, a FOR loop is executed over the array of markers and one by one each marker is populated on the Google Map.
When the Print button is clicked, the Google Map properties such as Center, Size, Zoom and MapType are fetched from the Google Maps mapOptions object and are appended to the Google Maps API V3 Static Maps API URL.
Then, a FOR loop is executed over the Markers and their Geographic address details i.e. Latitude and Longitude values are appended to the Google Maps API V3 Static Maps API URL and the URL is set as source to an HTML IMG element which displays the Image of the Google Map.
Finally, the contents of the HTML DIV which contains the Google Map Image is sent to the PrintDiv function, which prints the Google Map along with Markers.
Note: For more detail on printing HTML DIV contents using JavaScript, please refer my article Print DIV content without opening new popup window using JavaScript opening new popup window using JavaScript.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<API_Key>"></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 offavourite 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 nearByculla 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);
            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?key=<API_Key>";
 
        //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;
        PrintDiv(divContents);
        imgMap.style.display = "none";
    };
    function PrintDiv(contents) {
         var frame1 = document.createElement('iframe');
         frame1.name = "frame1";
         frame1.style.position = "absolute";
         frame1.style.top = "-1000000px";
        document.body.appendChild(frame1);
        var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
        frameDoc.document.open();
        frameDoc.document.write('<html><head><title>Google Map</title>');
        frameDoc.document.write('</head><body>');
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            document.body.removeChild(frame1);
        }, 500);
        return false;
    }
</script>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="dvMap" style="width: 220px; height: 350px"></div>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <div id="dvMapImage">
                <img id="imgMap" src="" alt="" style="display: none" />
            </div>
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnPrint" value="Print" onclick="Print()" />
 
 

Screenshots

Printing DIV contents without popup window

Google Maps API V3: Print Google Maps with Markers using JavaScript
 

Printed Google Map in XPS document

Google Maps API V3: Print Google Maps with Markers using JavaScript
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code