[SOLUCIONADO] Enviar captura de google maps por email desde PHP

graphixx · Septiembre 06, 2014, 03:15:14 PM

Pues eso como envio desde PHP por email una imagen de la captura de un google maps predefinido.
Ando leyendo esto, ya veremos como nos va: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Con esto se obtiene el mapa: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Ahora falta averiguar como capturarlo en una imagen, y enviarlo por correo.

Listo ya llega el mapa de google maps con geolocalizacion al email, dejo el codigo final:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Gracias a todos los que colaboraron!!!

Alex · Septiembre 06, 2014, 04:19:25 PM

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Pues eso como envio desde PHP por email una imagen de la captura de un google maps predefinido.
Ando leyendo esto, ya veremos como nos va: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Con esto se obtiene el mapa: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Ahora falta averiguar como capturarlo en una imagen, y enviarlo por correo.

quizá la parte más dificil es capturar la imagen, para enviar emails existe una funcion que puedes ver en la documentación de php: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

sacar la captura realmente ignoro como lo harás, revisa si la documetnación de la api de google para maps no tiene una función interna para obtener pngs de un mapa, o algún formato de imagen válida.

quizá en ves de enviar el email con una imagen del mapa, podrías enviar directamente el mapa en formato html por email.

saludos!

arthusu · Septiembre 06, 2014, 09:33:39 PM

atrapa el mapa en el buffer y envialo como html por mail a mi me funciono, lo puedes probar aca: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

graphixx · Septiembre 09, 2014, 12:39:43 PM

ya use la libreria html2canvas, pero mira como me queda:
Arriba codigo del mapa de google, abajo la imagen que me genera html2canvas, alguna idea de por que no salen las calles y demas...

Codigo completo del script:

Código: html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Geolocation and Google Maps API</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script>
      function writeAddressName(latLng) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          "location": latLng
        },
        function(results, status) {
          if (status == google.maps.GeocoderStatus.OK)
            document.getElementById("address").innerHTML = results[0].formatted_address;
          else
            document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
        });
      }
 
      function geolocationSuccess(position) {
        var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        // Write the formatted address
        writeAddressName(userLatLng);
 
        var myOptions = {
          zoom : 16,
          center : userLatLng,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
        // Place the marker
        new google.maps.Marker({
          map: mapObject,
          position: userLatLng
        });
        // Draw a circle around the user position to have an idea of the current localization accuracy
        var circle = new google.maps.Circle({
          center: userLatLng,
          radius: position.coords.accuracy,
          map: mapObject,
          fillColor: '#0000FF',
          fillOpacity: 0.5,
          strokeColor: '#0000FF',
          strokeOpacity: 1.0
        });
        mapObject.fitBounds(circle.getBounds());
      }
 
      function geolocationError(positionError) {
        document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
      }
 
      function geolocateUser() {
        // If the browser supports the Geolocation API
        if (navigator.geolocation)
        {
          var positionOptions = {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
          };
          navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
        }
        else
          document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
      }
 
      window.onload = geolocateUser;
    </script>
    <style type="text/css">
      #map {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <h1>Basic example</h1>
    <div id="map"></div>
    <p><b>Address</b>: <span id="address"></span></p>
    <p id="error"></p>
	
    <script type="text/javascript" src="../build/html2canvas.js"></script>
    <script type="text/javascript">
	function geo()
    {
        html2canvas(document.body, {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
            }
        });
    }
	setTimeout("geo()",9000);
	</script>	
	
	
  </body>
</html>

Codigo completo del script:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

graphixx · Septiembre 09, 2014, 12:41:01 PM

Investigando encontre:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Y lo aplique:

Código: javascript


    <script type="text/javascript" src="../build/html2canvas.js"></script>
    <script type="text/javascript">
	function geo()
    {
        html2canvas(document.body, {
		useCORS: true,
        allowTaint:true,
           onrendered: function(canvas) {
               document.body.appendChild(canvas);
           }
       });	   
    }
	setTimeout("geo()",9000);
	</script>

Pero no funciono $:-\$ $:-\$ $:-\$

Tambien probe:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Código: javascript


    <script type="text/javascript" src="../build/html2canvas.js"></script>
    <script type="text/javascript">
	function geo()
    {
        html2canvas(document.body, {
		proxy: "server.js",
		useCORS: true,
        allowTaint:true,
           onrendered: function(canvas) {
               document.body.appendChild(canvas);
           }
       });	   	   
    }
	setTimeout("geo()",9000);
	</script>

Pero tampoco funciono.
Ademas aca dicen que usar proxys para cargar los mapas es ilegal:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Tambien por lo que pude entender con mi modesto ingles, de ese post es que html2canvas no soporta aun CSS3 y los google maps parecen estar hechos a punta de CSS3, quede frito.

Este ejemplo me quede sin saber si servia o no:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Me fue imposible ponerlo a trabajar.

Seguire en la busqueda...

graphixx · Septiembre 09, 2014, 12:41:52 PM

encontre un ejemplo con html2canvas que funciona en la web del autor (No tienes permitido ver los links. Registrarse o Entrar a mi cuenta) , pero a mi no me funciono jejeje...
Dejo el codigo por aca haber que error le ven, yo no le doy al clavo...

Código: html4strict


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Geolocation and Google Maps API</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script>
      function writeAddressName(latLng) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          "location": latLng
        },
        function(results, status) {
          if (status == google.maps.GeocoderStatus.OK)
            document.getElementById("address").innerHTML = results[0].formatted_address;
          else
            document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
        });
      }
 
      function geolocationSuccess(position) {
        var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        // Write the formatted address
        writeAddressName(userLatLng);
 
        var myOptions = {
          zoom : 16,
          center : userLatLng,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
        // Place the marker
        new google.maps.Marker({
          map: mapObject,
          position: userLatLng
        });
        // Draw a circle around the user position to have an idea of the current localization accuracy
        var circle = new google.maps.Circle({
          center: userLatLng,
          radius: position.coords.accuracy,
          map: mapObject,
          fillColor: '#0000FF',
          fillOpacity: 0.5,
          strokeColor: '#0000FF',
          strokeOpacity: 1.0
        });
        mapObject.fitBounds(circle.getBounds());
      }
 
      function geolocationError(positionError) {
        document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
      }
 
      function geolocateUser() {
        // If the browser supports the Geolocation API
        if (navigator.geolocation)
        {
          var positionOptions = {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
          };
          navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
        }
        else
          document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
      }
 
      window.onload = geolocateUser;
    </script>
    <style type="text/css">
      #map {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <h1>Basic example</h1>
    <div id="map"></div>
    <p><b>Address</b>: <span id="address"></span></p>
    <p id="error"></p>

    <script type="text/javascript" src="../build/html2canvas.js"></script>
    <script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
	<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">

$(window).load(function(){
	 
	    $('#load').click(function(){
	 
	            html2canvas(document.body, {
	            useCORS: true,
	                onrendered: function (canvas) {
	                var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
	 
	                window.location.href = dataUrl;
	                                    }
	            });
	 
	    });
	});
	</script>	
	
<input type="button" value="Save" id="load"/>
  </body>
</html>

Script completo con librerias aca:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
El ejemplo que funciona del autor se llama index2.php , el ejemplo mio que no funciona es index.php

graphixx · Septiembre 10, 2014, 07:15:16 PM

El snapshotcontrol (No tienes permitido ver los links. Registrarse o Entrar a mi cuenta) esta genial, casi que no lo pongo a trabajar junto con el codigo de geolocalizacion actual... la prueba la monte aca:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
El codigo de ejemplo lo subo por aca:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Ahora necesito saber como capturar ese link de imagen estatica que la libreria crea en el popup, ayuda con eso please.

graphixx · Septiembre 13, 2014, 01:34:26 PM

Listo ya llega el mapa de google maps con geolocalizacion al email, dejo el codigo final:
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Gracias a todos los que colaboraron!!!

[SOLUCIONADO] Enviar captura de google maps por email desde PHP

graphixx

Septiembre 06, 2014, 03:15:14 PM Ultima modificación: Septiembre 13, 2014, 03:06:35 PM por blackdrake

Alex

Septiembre 06, 2014, 04:19:25 PM #1

arthusu

Septiembre 06, 2014, 09:33:39 PM #2

graphixx

Septiembre 09, 2014, 12:39:43 PM #3

graphixx

Septiembre 09, 2014, 12:41:01 PM #4

graphixx

Septiembre 09, 2014, 12:41:52 PM #5

graphixx

Septiembre 10, 2014, 07:15:16 PM #6

graphixx

Septiembre 13, 2014, 01:34:26 PM #7