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

Here Mudassar Ahmed Khan has explained 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) Google Maps to Image. Once the Image Screenshot (Snapshot) is ready, it will be sent for printing using JavaScript.

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) Google Maps to Image. Once the Image Screenshot (Snapshot) is ready, it will be sent for printing using JavaScript.

Print Google Maps with Markers using JavaScript

The following code snippet 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.

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

Now the contents of the HTML DIV which contains the Google Map Image are sent to the PrintDiv function, which prints the Google Map along with Markers.

Note: For more explanation on printing HTML DIV contents, please refer my article Print DIV content without opening new popup window using 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;

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;