Guardar mapa de google maps como imagen

javi123u · #1 (**permalink**) 15/01/2015, 23:31

Hola a todos compañeros que nos hemos unidos al fantástico mundo de PHP. El problema que tengo sobre un proyecto que estoy desarrollando es referente a poder guardar como una imagen un mapa de google maps que ha sido editado por el usuario. El proyecto es referente al diseño de redes HFC y el uso de esta api de google es indispensable para realizarlos cálculos que la empresa necesita en sus diagramas(Los cálculos se realizan conforme el usuario agrega los dispositivos o piezas en el mapa). Prácticamente es lo único que me falta para poder entregar el proyecto, y de verdad estaré enormemente agradecido si me ayudan. Solo tengo una semana para entregar este proyecto lo que significa que estoy muy preocupado…
Ya que el mapa está en un div he intentado guardar ese div como imagen con las nuevas capacidades de HTML5 y la librería html2canvas pero no logra enviar la captura del mapa.
También he probado con otros servicios para capturar pantalla pero el problema que no funciona con todas las páginas webs además probé con la función imagegrabscreen() de PHP de la librería GD pero el problema es que solo realiza la captura de la pantalla del servidor y no del usuario que utiliza la aplicación desde otra computadora…

javi123u · #2 (**permalink**) 15/01/2015, 23:33

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
html, body, #mydiv {
height: 90%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('mydiv'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
function pantallazo(){
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canv as);
var data = canvas.toDataURL('image/png');
//display 64bit imag
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image );
// AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server

var file= dataURLtoBlob(data);

// Create new form data
var fd = new FormData();
fd.append("imageNameHere", file);

$.ajax({
url: "uploadFile.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
}).done(function(respond){

$(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast");
});

}
});
}
function dataURLtoBlob(dataURL) {
// Decode the dataURL
var binary = atob(dataURL.split(',')[1]);
// Create 8-bit unsigned array
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
// Return our Blob object
return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="mydiv">
<p>text!</p>
<img src="mug.png" height="100" width="100"/></div>
<div id="canvas">
<p>Canvas:</p>
</div>

<div style="width:200px; float:left" id="image">
<p style="float:left">Image: </p>
</div>
<div style="float:left;margin-top: 120px;" class="return-data">
</div>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" onclick='pantallazo();' value='Capturar'/>
</body>
</html>

memoadian · #3 (**permalink**) 16/01/2015, 06:51

No se si te sirva la implementacion de imagen de la api

https://developers.google.com/maps/d...ticmaps/?hl=es

Ejemplo

Mapa

Hay que pasarle los parámetros por url

javi123u · #4 (**permalink**) 17/01/2015, 22:05

No cabe duda que es la solución mas optima de verdad te agradezco. Mas tarde te cuento mis resultados XD

memoadian · #5 (**permalink**) 18/01/2015, 01:46

De nada, suerte.