Using Google Static Maps in Your Print View

November 20, 2025 development javascript

This is just a quick thought experiment really. Yesterday I was working on a demo that made use of Google's Static Map API. I've blogged about this API for probably over a decade now and I rarely see people use it, but it's a lightweight, image only "API" for when you need simple map images without interactivity. Honestly, I see a lot of sites using the full JavaScript maps library when a simpler image would be fine. It's also an excellent way to use maps in presentations or emails as well. It occurred to me that the static map image could be a great way use of print media queries in CSS and I thought I'd build a quick demo to show this.

Media queries and print support has been around for years, but I didn't play with it myself till earlier this year when I blogged about cleaning up my print view for this site. (Although I probably need to revisit that as I've changed my design since then.)

I was curious to see if a print media query could be used to "swap out" a JavaScript map for a static one. I began with an incredibly simple map demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Map Test</title>
</head>
<body>
    
    <h2>Map Demo</h2> 

    <div id="map" style="height: 500px; width: 500px;"></div>
    
<script async
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3hC35ehz1oAfUll7q7qzUlPa27Gz5g5g&loading=async&callback=initMap">
</script>
<script>
let map;

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 30.216667, lng: -92.033333 },
    zoom: 8,
    });
}
</script>
</body>
</html>

This is about as simple as you can get. If you're incredibly bored and want to see this running, you can do so here: https://cfjedimaster.github.io/webdemos/printmap/index.html

Ok, so how well does this print? I did a quick ctrl+p, saved the PDF, and this is what I got:

It's actually really, really good. My only complaint is the zoom icon in the upper right corner. Also, the "Report a map error" won't actually be a link.

So that works, but can we make it better? I began by adding in a static version of my map. (Note that the static map API does support markers and quite a few parameters, so you can do a lot more than what I'm showing here.)

<img class="printedMap" src="https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyC3hC35ehz1oAfUll7q7qzUlPa27Gz5g5g&size=500x500&center=30.216667,-92.033333&zoom=8" alt="Static Map">

Note I added a class to it. I then used this CSS:

.printedMap {
    display: none;
}

@media print {

    #map { display: none; }
    .printedMap {
        display: block;
    }
}

Basically, hide the static map normally, and when printing, hide the map div that includes the JavaScript map and show the static version. And here's the result:

Slightly better! ;) Worth the effort? Probably. I will note that this does add additional load to the page as the static image is loaded but hidden. You can check for a matched media query in JavaScript using matchMedia, so in theory, you could delay adding the image to the DOM that way, but that feels a bit overkill.

You can hit this version here if you want to see, and the source for both may be found here: https://github.com/cfjedimaster/webdemos/tree/master/printmap

Photo by Matijn Palings on Unsplash