Tema: Gmap3 y Json (como unirlos?)
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 07/09/2011, 12:28
Avatar de morfasto
morfasto
 
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 12 años, 9 meses
Puntos: 8
Respuesta: Gmap3 y Json (como unirlos?)
Y este es el codigo que usa AJAX para generar la ruta por medio de 2 text-inputs y luego con un boton la guarda en la base de datos.

Código Javascript: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />
  6. <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
  7. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  8.  
  9. </head>
  10. <body onLoad="goma()">
  11.  
  12. <div id="rutas">
  13. Origen: <input type="text" name="origen" id="origen" /> &nbsp; - &nbsp; Destino: <input type="text" name="destino" id="destino" />
  14. &nbsp; <input type="button" onclick="generate_waypoints()" value="Generar Ruta">
  15. </div>
  16. <div id="mapa">
  17.  
  18. </div>
  19. <div id="informacion">
  20. Titulo: <input type="text" name="origen" id="titulo" /><br />
  21. Descripcion: <input type="text" name="destino" id="descripcion" />
  22. <input type="hidden" name="usuario" id="usuario" value="<?php echo $_SESSION['usuario'];?>"/><br />
  23. <input type="button" value="Grabar Ruta" style="font-size:18px" onclick="save_waypoints()">
  24. </div>
  25.  
  26.  
  27. <script>
  28. var map, ren, ser;
  29. var data = {};
  30. function goma()
  31. {
  32.     map = new google.maps.Map( document.getElementById('mapa'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(-12.1008684,-77.0288967) })
  33.  
  34.     ren = new google.maps.DirectionsRenderer( {'draggable':true} );
  35.     ren.setMap(map);
  36.     
  37.         
  38. }
  39.  
  40. function generate_waypoints()
  41. {   
  42.     ser = new google.maps.DirectionsService();
  43.     ser.route({ 'origin': document.getElementById("origen").value, 'destination': document.getElementById("destino").value, 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
  44.         if(sts=='OK')ren.setDirections(res);
  45.     })  
  46. }
  47.  
  48. function save_waypoints(){
  49.     var w=[],wp;
  50.     var rleg = ren.directions.routes[0].legs[0];
  51.     data.start = {'lat': rleg.start_location.lat(), 'lng':rleg.start_location.lng()}
  52.     data.end = {'lat': rleg.end_location.lat(), 'lng':rleg.end_location.lng()}
  53.     var wp = rleg.via_waypoints 
  54.     for(var i=0;i<wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()]    
  55.     data.waypoints = w;
  56.     
  57.     var str = JSON.stringify(data)
  58.     
  59.     $.post("anadir_ruta.php",{command:'save',mapdata:str, titulo:$("#titulo").val(), descripcion:$("#descripcion").val(), usuario:$("#usuario").val()},function(data){
  60.         var r = data.split("-");
  61.         if(r[0] == 'bien'){
  62.             alert("Ruta generada correctamente");
  63.         }else{
  64.             alert(data);
  65.         }
  66.         
  67.     });
  68. }
  69.  
  70. </script>
  71. </body>
  72. </html>

anadir_ruta.php:
Código PHP: 
Ver original
  1. <? ob_start(); header('Cache-Control: no-store, no-cache, must-revalidate');
  2.  
  3.     $data = $_REQUEST['mapdata'];
  4.     
  5.     mysql_connect('localhost','usuario','password');
  6.     mysql_select_db('base_datos');
  7.     $date=date("Y-m-d H:i:s");
  8.     if($_REQUEST['command']=='save')
  9.     {
  10.         
  11.         $query = "INSERT INTO rutas VALUES('','".$_POST['usuario']."','".$_POST['titulo']."','".$_POST['descripcion']."','".$data."','".$date."')";
  12.         if(mysql_query($query)) echo "bien-".mysql_insert_id();
  13.         die(mysql_error());
  14.     }
  15. ?>

Quiero hacer que el primer codigo que mostre en el post anterior, grabe la ruta asi como lo hace este, es posible? Como?

Gracias por su cooperacion!