Google Maps print button

You may have noticed that most of the maps on this site have a 'Print' option. Here is the code that supports this functionality, that you can add to your own Google Maps application.

First, you need to download this Javascript file.
Or grab the TypeScript version

Next, add a reference to the file in your HTML like so

<script src="js/PrintMapControl.js" type="text/javascript"></script>

Finally, add the control to your map, with the following line of Javascript

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(printMapControl(map));

Your map should now look something like the one below.

The code requires JQuery and Canvas support to work. If Canvas isn't supported, the button won't appear. Out in the wild, probably the only browser that doesn't support Canvas and still has a few users is IE8.

Note, Canvas has a few security features that mean for printing to work, any images (for markers etc) must be served up from the same domain as the web page.

Loading map...