I have a series of coordinates data which I plot onto an API-generated heatmap visualization using Google Maps API. The data changes daily, and I'd like to capture the heatmap and save it as a PNG or JPG image programmatically from within PHP so that a particular day's map can be recalled without regenerating the map and a number of maps could be sequenced together to show the changes animated over a given time period. I also need to be able to export a PDF report including a heatmap and this obviously would not work with a dynamic webpage frame.

Does anyone know:

  • of a way to save a Google-generated heatmap to a static PNG or JPG file, other than manually taking a screenshot and then cropping it to the bounds of the map? The solution needs to work in a GUI-less shared hosting environment as it will be deployed to many users with many different hosting configurations, the majority will not be skilled Linux experts or running a VPS; or

  • of an alternate tool for plotting coordinates onto a map and producing visualisations from this such as heatmaps, that can be saved into PNG or JPG files, from within PHP, and using only freely available PHP classes or default-installed PHP modules? (this is my prefered route if anyone has any tools in mind)


2 Answers 2


I'm working on a project with a similar requested function. I need to make a report which needs to contain some data and additionally some maps (heath, cluster and markers). At this time I'm doing it on the client side, with html2canvas, but like you, I would like to do it server side.

google.maps.event.addListener(DivMap, 'tilesloaded', function(){
    setTimeout(function(){ //Trying to ensure full map render

And this function

function Map2Image(MapDiv,phpup,format){
    var transform=$(".gm-style>div:first>div").css("transform")
    var comp=transform.split(",") //split up the transform matrix
    var mapleft=parseFloat(comp[4]) //get left value
    var maptop=parseFloat(comp[5])  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      useCORS: true,
      onrendered: function(canvas){

This function is based on this answer.

NOTE: I know is a very old post (from 2014), but I'm posting this because I think it can be useful for someone. Even better, someone can give us a best solution.


It is possible to take screenshots programatically rather than manually. I do this on my charts and graphs site. The graphs are generated client side using JavaScript but I need thumbnail images created from them.

I'm using Java instead of PHP, but it should be similar.

  1. Install xvfb (X virtual frame buffer) so that Firefox can run on a headless server. Start it as a daemon configured as screen 99.
  2. Install a known version of firefox (eg /opt/firefox33/). I've found that selenium drivers are often not compatible with the newest release of firefox until the libraries get updated. Installing a known version gives me a lot more control over the upgrade process
  3. When you need a screenshot, have your code set the screen environment variable and start selenium with your installed firefox.

Here is an article about getting started with selenium from PHP that includes a screenshot example.

  • Hi Stephen, I've tried playing with Selenium but found it easier to just take the screenshots manually in the end. Ideally I'm looking for a solution that requires nothing more than PHP classes and modules normally installed so that it can be included in software that will be deployed by many different people without requiring a very prescribed hosting setup. The majority of end-users will likely be on shared hosting not VPS. Nov 14, 2014 at 12:43
  • I've just edited the question to make the scope/requirements more clear. Thank you for your suggestions. Nov 14, 2014 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.