: Saving a Google API-generated dynamic map to a static image I have a series of coordinates data which I plot onto an API-generated heatmap visualization using Google Maps API. The data changes

@Correia994

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.

Vote Up Vote Down

@BetL925

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.


Install xvfb (X virtual frame buffer) so that Firefox can run on a headless server. Start it as a daemon configured as screen 99.
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
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.

Vote Up Vote Down