Saving a Google API-generated dynamic map to a static image

Question

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)

Answer 1

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
        Map2Image("DivMap","store_mapImage.php","png");
    },1000);
});

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
        "transform":"none",
        "left":mapleft,
        "top":maptop,
        })
    }
    html2canvas(document.getElementById(MapDiv),{
      useCORS: true,
      onrendered: function(canvas){
        $.post(phpup,{image:canvas.toDataURL("image/"+format)});
        $(".gm-style>div:first>div").css({
            left:0,
            top:0,
            "transform":transform
        });
      }
    });
}

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.

Answer 2

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.