We're going to describe in this blog article how to add buttons to your Store Locator software or to the Google Map that is located on your website which will allow visitors to Print the map and / or to Save an Image of the map to a file in PNG or other image format.

Firstly, you can grab the source code to everything on this page here and view a working example here.

We'll start with the easier of the two functions which is adding a button to your web page to Print the Map. Of course, you can always Print to PDF via most web browsers and operating systems so you can save a copy of the image to file this way if you prefer. We're going to write the event handlers for the buttons using jQuery so the first step is to add the following scripts to the head of your page:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Next, add the following CSS. The first part hides the whole screen from the Print media type which is what is used during screen printing, and the second part unhides the part that we want to print (i.e. the map). You should replace 'storelocator-map_canvas' with the ID of the map element on your page.

<style>
  @media print {
  /* Hide everything to start with */
  body * {
    visibility: hidden;
  }

  /* Edit #map_canvas to be the id of the DIV which contains the map element and unhide it */
  #storelocator-map_canvas, #storelocator-map_canvas * {
    visibility: visible;
  }
}
</style>

Next, add the following button to your page which will be used to start the print:

<a href="#" id="print-map-btn"><button type="button">Print Map</button></a>

And here's the code which waits for the page to load, then adds an event handler for clicks on the Print Map button:

<script>
  // wait for document to load
  $(document).ready(function() {
    // add event handler for clicks on the Print Map button
    $("body").on("click", "#print-map-btn", function(event) {
       // prevent the link from taking any action
       event.preventDefault();

        // call the browser print function
        window.print();
    });
});
</script>

That should the print screen function up and running. Now onto the Save Image button. For this, we'll need to add another script to the page called html2canvas from https://html2canvas.hertzen.com. This is a script which can be used to take a screenshot with Javascript which we will be using to capture the map image.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

Now add the following html which will add our new Save Image button:

<a href="#" id="save-image-btn"><button type="button">Save Image</button></a>

Add the following script inside the $(document).ready(function() { }); above:

    // add event handler for clicks on the Save Image button
    $("body").on("click", "#save-image-btn", function(event) {
        event.preventDefault();
        // edit #storelocator-map_canvas to be the id of the DIV which contains your map element
        var mapElement = $("#storelocator-map_canvas")[0];

        // perform the conversion
        html2canvas(mapElement, {
          // required otherwise the map will be blank
          useCORS: true,
          onrendered: function(canvas) {
              var url = canvas.toDataURL();
              $("<a>", {
                href: url,
                download: "Map"
              })
              .on("click", function() {$(this).remove()})
              .appendTo("body")[0].click()
        }
      });
    });

That's all that's needed to enable this functionality. As always, if you have any further questions about anything in our blog just get in touch!