elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  [AYUDA] Enviar captura de google maps por email desde PHP		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: [AYUDA] Enviar captura de google maps por email desde PHP  (Leído 6,564 veces)
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
[AYUDA] Enviar captura de google maps por email desde PHP
« en: 8 Septiembre 2014, 21:26 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: https://developers.google.com/maps/documentation/staticmaps/?csw=1

Con esto se obtiene el mapa: http://www.sitepoint.com/working-with-geolocation-and-google-maps-api/
Ahora falta averiguar como capturarlo en una imagen, y enviarlo por correo.

En el foro he encontrado esto que veo que casi nadie maneja google maps, estoy frito!!!

http://foro.elhacker.net/desarrollo_web/ayuda_phpmysql_google_maps_v3-t355879.0.html
http://foro.elhacker.net/desarrollo_web/google_maps_api_v3_markes_e_infowindows-t350783.0.html;msg1708252#msg1708252
http://foro.elhacker.net/desarrollo_web/google_maps_rutas_y_php_ayuda-t326534.0.html
http://foro.elhacker.net/desarrollo_web/paso_de_parametros_por_id_javascript_php_google_maps_v3-t359972.0.html


Listo ya llega el mapa de google maps con geolocalizacion al email, dejo el codigo final:
http://www.4shared.com/zip/JqwOFSU8ba/geo6_google_maps_email_php.html

Gracias a todos los que colaboraron!!!
« Última modificación: 13 Septiembre 2014, 18:31 pm por Graphixx » En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #1 en: 9 Septiembre 2014, 05:52 am »
Utiliza la api de imagenes estaticas. El segundo ejemplo es cuando el usuario interactua con el mapa para eso se puede usar html2canvas(busca todos los elementos DOM sobre el elemento que le especifiques..)

http://html2canvas.hertzen.com/documentation.html
En línea
GITHUB 
Castg!
Wiki

Desconectado Desconectado

Mensajes: 1.191



Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #2 en: 9 Septiembre 2014, 06:56 am »
Sí señor, tan simple como cargar la imagen del mapa por url con los parámetros de la locación deseada. Lo que está bueno de la api de mapas estáticos es la posibilidad de cambiar los colores al mapa, quizás te interese esa opción!!

Después basta con enviarla como cualquier imagen.

Saludos!
En línea


Creiste que mi firma había muerto? NO! Volvió, y en forma de fichas!

link al último código de la firma
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #3 en: 9 Septiembre 2014, 16:10 pm »
Cita de: EFEX en  9 Septiembre 2014, 05:52 am
Utiliza la api de imagenes estaticas. El segundo ejemplo es cuando el usuario interactua con el mapa para eso se puede usar html2canvas(busca todos los elementos DOM sobre el elemento que le especifiques..)
http://html2canvas.hertzen.com/documentation.html

Estimado EFEX, 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
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Geolocation and Google Maps API</title>
  6.     <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  7.     <script>
  8.       function writeAddressName(latLng) {
  9.         var geocoder = new google.maps.Geocoder();
  10.         geocoder.geocode({
  11.           "location": latLng
  12.         },
  13.         function(results, status) {
  14.           if (status == google.maps.GeocoderStatus.OK)
  15.             document.getElementById("address").innerHTML = results[0].formatted_address;
  16.           else
  17.             document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
  18.         });
  19.       }
  20.  
  21.       function geolocationSuccess(position) {
  22.         var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  23.         // Write the formatted address
  24.         writeAddressName(userLatLng);
  25.  
  26.         var myOptions = {
  27.           zoom : 16,
  28.           center : userLatLng,
  29.           mapTypeId : google.maps.MapTypeId.ROADMAP
  30.         };
  31.         // Draw the map
  32.         var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
  33.         // Place the marker
  34.         new google.maps.Marker({
  35.           map: mapObject,
  36.           position: userLatLng
  37.         });
  38.         // Draw a circle around the user position to have an idea of the current localization accuracy
  39.         var circle = new google.maps.Circle({
  40.           center: userLatLng,
  41.           radius: position.coords.accuracy,
  42.           map: mapObject,
  43.           fillColor: '#0000FF',
  44.           fillOpacity: 0.5,
  45.           strokeColor: '#0000FF',
  46.           strokeOpacity: 1.0
  47.         });
  48.         mapObject.fitBounds(circle.getBounds());
  49.       }
  50.  
  51.       function geolocationError(positionError) {
  52.         document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
  53.       }
  54.  
  55.       function geolocateUser() {
  56.         // If the browser supports the Geolocation API
  57.         if (navigator.geolocation)
  58.         {
  59.           var positionOptions = {
  60.             enableHighAccuracy: true,
  61.             timeout: 10 * 1000 // 10 seconds
  62.           };
  63.           navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
  64.         }
  65.         else
  66.           document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
  67.       }
  68.  
  69.       window.onload = geolocateUser;
  70.     </script>
  71.     <style type="text/css">
  72.       #map {
  73.         width: 500px;
  74.         height: 500px;
  75.       }
  76.     </style>
  77.   </head>
  78.   <body>
  79.     <h1>Basic example</h1>
  80.     <div id="map"></div>
  81.     <p><b>Address</b>: <span id="address"></span></p>
  82.     <p id="error"></p>
  83.  
  84.     <script type="text/javascript" src="../build/html2canvas.js"></script>
  85.     <script type="text/javascript">
  86. 	function geo()
  87.     {
  88.         html2canvas(document.body, {
  89.             onrendered: function(canvas) {
  90.                 document.body.appendChild(canvas);
  91.             }
  92.         });
  93.     }
  94. 	setTimeout("geo()",9000);
  95. 	</script>	
  96.  
  97.  
  98.   </body>
  99. </html>
  100.  

Codigo completo del script:
http://www.4shared.com/rar/I9utr9bjce/geo4.html
« Última modificación: 9 Septiembre 2014, 16:12 pm por Graphixx » En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #4 en: 9 Septiembre 2014, 16:34 pm »
Investigando encontre:
http://stackoverflow.com/questions/22530593/html2canvas-capture-google-map-to-image-in-phonegap-application

Y lo aplique:
Código
  1.     <script type="text/javascript" src="../build/html2canvas.js"></script>
  2.     <script type="text/javascript">
  3. 	function geo()
  4.     {
  5.         html2canvas(document.body, {
  6. 		useCORS: true,
  7.         allowTaint:true,
  8.            onrendered: function(canvas) {
  9.                document.body.appendChild(canvas);
  10.            }
  11.        });	   
  12.     }
  13. 	setTimeout("geo()",9000);
  14. 	</script>
  15.  

Pero no funciono  :-\ :-\ :-\
Tambien probe:
http://stackoverflow.com/questions/17792081/cant-capture-google-map-width-html2canvas
Código
  1.     <script type="text/javascript" src="../build/html2canvas.js"></script>
  2.     <script type="text/javascript">
  3. 	function geo()
  4.     {
  5.         html2canvas(document.body, {
  6. 		proxy: "server.js",
  7. 		useCORS: true,
  8.         allowTaint:true,
  9.            onrendered: function(canvas) {
  10.                document.body.appendChild(canvas);
  11.            }
  12.        });	   	   
  13.     }
  14. 	setTimeout("geo()",9000);
  15. 	</script>
  16.  
Pero tampoco funciono.
Ademas aca dicen que usar proxys para cargar los mapas es ilegal:
https://github.com/niklasvh/html2canvas/issues/345  :o :o :o
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:
http://angulartutorial.blogspot.com/2014/05/save-google-map-as-binary-image.html
Me fue imposible ponerlo a trabajar.

Seguire en la busqueda...
« Última modificación: 9 Septiembre 2014, 17:09 pm por Graphixx » En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #5 en: 9 Septiembre 2014, 17:15 pm »
Por algo te dije que uses la api de imagenes estaticas.. haber prueba con https://code.google.com/p/snapshotcontrol/
En línea
GITHUB 
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #6 en: 9 Septiembre 2014, 17:36 pm »
Cita de: EFEX en  9 Septiembre 2014, 17:15 pm
Por algo te dije que uses la api de imagenes estaticas.. haber prueba con https://code.google.com/p/snapshotcontrol/

Ya la pruebo, encontre un ejemplo con html2canvas que funciona en la web del autor (http://www.dreamincode.net/forums/topic/352273-html2canvas-google-map-is-not-rendering/) , 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
  1. <!DOCTYPE html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Geolocation and Google Maps API</title>
  6.     <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  7.     <script>
  8.       function writeAddressName(latLng) {
  9.         var geocoder = new google.maps.Geocoder();
  10.         geocoder.geocode({
  11.           "location": latLng
  12.         },
  13.         function(results, status) {
  14.           if (status == google.maps.GeocoderStatus.OK)
  15.             document.getElementById("address").innerHTML = results[0].formatted_address;
  16.           else
  17.             document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
  18.         });
  19.       }
  20.  
  21.       function geolocationSuccess(position) {
  22.         var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  23.         // Write the formatted address
  24.         writeAddressName(userLatLng);
  25.  
  26.         var myOptions = {
  27.           zoom : 16,
  28.           center : userLatLng,
  29.           mapTypeId : google.maps.MapTypeId.ROADMAP
  30.         };
  31.         // Draw the map
  32.         var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
  33.         // Place the marker
  34.         new google.maps.Marker({
  35.           map: mapObject,
  36.           position: userLatLng
  37.         });
  38.         // Draw a circle around the user position to have an idea of the current localization accuracy
  39.         var circle = new google.maps.Circle({
  40.           center: userLatLng,
  41.           radius: position.coords.accuracy,
  42.           map: mapObject,
  43.           fillColor: '#0000FF',
  44.           fillOpacity: 0.5,
  45.           strokeColor: '#0000FF',
  46.           strokeOpacity: 1.0
  47.         });
  48.         mapObject.fitBounds(circle.getBounds());
  49.       }
  50.  
  51.       function geolocationError(positionError) {
  52.         document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
  53.       }
  54.  
  55.       function geolocateUser() {
  56.         // If the browser supports the Geolocation API
  57.         if (navigator.geolocation)
  58.         {
  59.           var positionOptions = {
  60.             enableHighAccuracy: true,
  61.             timeout: 10 * 1000 // 10 seconds
  62.           };
  63.           navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
  64.         }
  65.         else
  66.           document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
  67.       }
  68.  
  69.       window.onload = geolocateUser;
  70.     </script>
  71.     <style type="text/css">
  72.       #map {
  73.         width: 500px;
  74.         height: 500px;
  75.       }
  76.     </style>
  77.   </head>
  78.   <body>
  79.     <h1>Basic example</h1>
  80.     <div id="map"></div>
  81.     <p><b>Address</b>: <span id="address"></span></p>
  82.     <p id="error"></p>
  83.  
  84.     <script type="text/javascript" src="../build/html2canvas.js"></script>
  85.     <script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>
  86.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
  87. 	<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  88. 	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  89.     <script type="text/javascript">
  90.  
  91. $(window).load(function(){
  92.  
  93. 	    $('#load').click(function(){
  94.  
  95. 	            html2canvas(document.body, {
  96. 	            useCORS: true,
  97. 	                onrendered: function (canvas) {
  98. 	                var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  99.  
  100. 	                window.location.href = dataUrl;
  101. 	                                    }
  102. 	            });
  103.  
  104. 	    });
  105. 	});
  106. 	</script>	
  107.  
  108. <input type="button" value="Save" id="load"/>
  109.   </body>
  110. </html>
  111.  

Script completo con librerias aca:
http://www.4shared.com/rar/mwtwHMcDba/geo4__1_.html
El ejemplo que funciona del autor se llama index2.php , el ejemplo mio que no funciona es index.php
En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #7 en: 10 Septiembre 2014, 22:28 pm »
Cita de: EFEX en  9 Septiembre 2014, 17:15 pm
Por algo te dije que uses la api de imagenes estaticas.. haber prueba con https://code.google.com/p/snapshotcontrol/

Ese snapshotcontrol esta genial, casi que no lo pongo a trabajar junto con el codigo de geolocalizacion actual... la prueba la monte aca:
http://phpdatagrids.com/alertamedica_geo/examples/pruebageo2.php
El codigo de ejemplo lo subo por aca:
http://www.4shared.com/zip/uxcmPCn_ce/geo5.html

Ahora necesito saber como capturar ese link de imagen estatica que la libreria crea en el popup, ayuda con eso please.
« Última modificación: 10 Septiembre 2014, 22:42 pm por Graphixx » En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #8 en: 13 Septiembre 2014, 00:58 am »
Hay Dios, no lo puedo creer 3 dias rompiendome el lomo con ese codigo moviendo y moviendo cosas, cambiando de librerias, y era el "#$%%!" servidor assssss, lo cambie de server y ya funciona llega el email con las coordenadas desde donde fue leido el script, ahora me pongo a trabajar en convertir esas coordenadas en mapa, dejo el codigo funcionando por aca.

http://www.4shared.com/rar/dQ330i0bce/geo6_coord_google_maps_php.html
En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: [AYUDA] Enviar captura de google maps por email desde PHP
« Respuesta #9 en: 13 Septiembre 2014, 18:30 pm »
Listo ya llega el mapa de google maps con geolocalizacion al email, dejo el codigo final:
http://www.4shared.com/zip/JqwOFSU8ba/geo6_google_maps_email_php.html

Gracias a todos los que colaboraron!!!
En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Manipular API Google Maps desde Visual Basic « 1 2 3 »
Programación Visual Basic 		seba123neo 29 29,712 Último mensaje 7 Octubre 2009, 17:30 pm
por ssccaann43 ©
google maps, rutas y php.. AYUDA!!!!
Desarrollo Web 		Zeroql 0 3,025 Último mensaje 4 Mayo 2011, 00:56 am
por Zeroql
Problema para enviar un email desde mi localhost con swiftmailer en hotmail.
PHP 		Master_77777 6 3,905 Último mensaje 6 Diciembre 2013, 02:22 am
por Master_77777
Madrileños y barceloneses podrán pedir un taxi desde Google Maps
Noticias 		wolfbcn 0 1,258 Último mensaje 16 Marzo 2016, 19:02 pm
por wolfbcn
Cómo usar Google Maps sin conexión a Internet desde el móvil
Noticias 		wolfbcn 0 1,726 Último mensaje 23 Octubre 2018, 21:36 pm
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines