Gmap3 y Json (como unirlos?)

morfasto · #1 (**permalink**) 07/09/2011, 12:20

Hola, que tal?

Tengo una pagina web en la que se genera una ruta de google maps y se guarda en una base de datos. El problema es que la ruta se genera escribiendo el inicio y el destino y luego dando un click en generar ruta. Lo que necesito es que la ruta se genere haciendo click derecho en el mapa en el inico y fin de la ruta y que despues se genere sola.

Tengo 2 scripts, uno que genera la ruta escribiendo el inicio y el destino y que la guarda y otro script que genera la ruta haciendo click en el mapa, pero no la guarda.

Lo que necesito es hacer que el script que genera la ruta dando click en el mapa pueda gardarla en la base de datos para despues ser vista por otro usuario.

Este es el script que hace que se genere la ruta dando click derecho en el mapa:

Código Javascript:

Ver original<html>    
  <head> 
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script type="text/javascript" src="gmap3.min.js"></script> 
    <style>
      #container{
        position:relative;
        height:700px;
      }
      #directions{
        position:absolute;
        width: 23%;
        right:1%;
        height: 690px;
        overflow:auto;
      }
      #googleMap{
        border: 1px dashed #C0C0C0;
        width: 75%;
        height: 700px;
      }
      #menu{
        background-color: #FFFFFF;
        width:170px;
        height:60px;
        padding:0px;
        border:1px;
        cursor:pointer;
        border-left:1px solid #cccccc;
        border-top:1px solid #cccccc;
        border-right:1px solid #676767;
        border-bottom:1px solid #676767;
      }
      #menu .item{
        font-family: arial,helvetica,sans-serif;
        font-size: 12px;
        text-align:left;
        line-height: 30px;
        border-left:0px;
        border-top:0px;
        border-right:0px;
        padding-left:30px;
        background-repeat: no-repeat;
        background-position: 4px center;
      }
      #menu .item.itemA{
        background-image: url(images/icon_greenA.png);
      }
      #menu .item.itemB{
        background-image: url(images/icon_greenB.png);
      }
      #menu .item.hover{
        background-color: #d6e9f8;
      }
      #menu .item.separator{
        border-bottom:1px solid #cccccc;
      }
    </style>
    
    <script type="text/javascript">
    
      /**************************************************
       *                      Menu
       **************************************************/
       
      function Menu($div){
        var that = this, 
            ts = null;
        
        this.$div = $div;
        this.items = [];
        
        // create an item using a new closure 
        this.create = function(item){
          var $item = $('<div class="item '+item.cl+'">'+item.label+'</div>');
          $item
            // bind click on item
            .click(function(){
              if (typeof(item.fnc) === 'function'){
                item.fnc.apply($(this), []);
              }
            })
            // manage mouse over coloration
            .hover(
              function(){$(this).addClass('hover');},
              function(){$(this).removeClass('hover');}
            );
          return $item;
        };
        this.clearTs = function(){
          if (ts){
            clearTimeout(ts);
            ts = null;
          }
        };
        this.initTs = function(t){
          ts = setTimeout(function(){that.close()}, t);
        };
      }
      
      // add item
      Menu.prototype.add = function(label, cl, fnc){
        this.items.push({
          label:label,
          fnc:fnc,
          cl:cl
        });
      }
      
      // close previous and open a new menu 
      Menu.prototype.open = function(event){
        this.close();
        var k,
            that = this,
            offset = {
              x:0, 
              y:0
            },
            $menu = $('<div id="menu"></div>');
            
        // add items in menu
        for(k in this.items){
          $menu.append(this.create(this.items[k]));
        }
        
        // manage auto-close menu on mouse hover / out
        $menu.hover(
          function(){that.clearTs();},
          function(){that.initTs(3000);}
        );
        
        // change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
        if ( event.pixel.y + $menu.height() > this.$div.height()){
          offset.y = -$menu.height();
        }
        if ( event.pixel.x + $menu.width() > this.$div.width()){
          offset.x = -$menu.width();
        }
        
        // use menu as overlay
        this.$div.gmap3({
          action:'addOverlay',
          latLng: event.latLng,
          content: $menu,
          offset: offset
        });
        
        // start auto-close
        this.initTs(5000);
      }
      
      // close the menu
      Menu.prototype.close = function(){
        this.clearTs();
        this.$div.gmap3({action:'clear', name:'overlay'});
      }
      
      
      /**************************************************
       *                      Main
       **************************************************/
    
      $(function(){
      
        var $map = $('#googleMap'), 
            menu = new Menu($map),
            
            current,  // current click event (used to save as start / end position)
            m1,       // marker "from"
            m2,       // marker "to"
            center = [48.85861640881589, 2.3459243774414062];
        
        // update marker
        function updateMarker(marker, isM1){
          if (isM1){
            m1 = marker;
          } else {
            m2 = marker;
          }
          updateDirections();
        }
        
        // add marker and manage which one it is (A, B)
        function addMarker(isM1){
          // clear previous marker if set
          var clear = {action:'clear', name:'marker', tag:''};
          if (isM1 && m1) {
            clear.tag = 'from';
            $map.gmap3(clear);
          } else if (!isM1 && m2){
            clear.tag = 'to';
            $map.gmap3(clear);
          }
          // add marker and store it
          $map.gmap3({
            action:'addMarker',
            latLng:current.latLng,
            options:{
              draggable:true,
              icon:new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green' + (isM1 ? 'A' : 'B') + '.png')
            },
            tag: (isM1 ? 'from' : 'to'),
            events: {
              dragend: function(marker){
                updateMarker(marker, isM1);
              }
            },
            callback: function(marker){
              updateMarker(marker, isM1);
            }
          });
        }
        
        // function called to update direction is m1 and m2 are set
        function updateDirections(){
          if (!(m1 && m2)){
            return;
          }
          $map.gmap3({
            action:'getRoute',
            options:{
              origin:m1.getPosition(),
              destination:m2.getPosition(),
              travelMode: google.maps.DirectionsTravelMode.DRIVING
            },
            callback: function(results){
              if (!results) return;
              $map.gmap3({ action: 'setDirections', directions:results});
            }
          });
        }
        
        // MENU : ITEM 1
        menu.add('Direction to here', 'itemB', 
          function(){
            menu.close();
            addMarker(false);
          });
        
        // MENU : ITEM 2
        menu.add('Direction from here', 'itemA separator', 
          function(){
            menu.close();
            addMarker(true);
          })
        
        
        
        // INITIALIZE GOOGLE MAP
        $map.gmap3(
          { action: 'init',
            options:{
              center:center,
              zoom: 5
            },
            events:{
              rightclick:function(map, event){
                current = event;
                menu.open(current);
              },
              click: function(){
                menu.close();
              },
              dragstart: function(){
                menu.close();
              },
              zoom_changed: function(){
                menu.close();
              }
            }
          },
          // add direction renderer to configure options (else, automatically created with default options)
          { action:'addDirectionsRenderer',
            preserveViewport: true,
            draggable: true,
            markerOptions:{
              visible: false
            }
          },
          // add a direction panel
          { action:'setDirectionsPanel',
            id : ''
          }
        );
      });
    </script>  
 
  </head>
    
  <body>
    <div id="container">
      <div id="directions"></div>
      <div id="googleMap"></div>
      
    </div>
  </body>
</html>

El codigo lo obtuve de [URL="http://gmap3.net/examples/context-menu.html"]aqui[/URL]

morfasto · #2 (**permalink**) 07/09/2011, 12:28

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
</head>
<body onLoad="goma()">
 
<div id="rutas">
Origen: <input type="text" name="origen" id="origen" /> &nbsp; - &nbsp; Destino: <input type="text" name="destino" id="destino" />
&nbsp; <input type="button" onclick="generate_waypoints()" value="Generar Ruta">
</div>
<div id="mapa">
 
</div>
<div id="informacion">
Titulo: <input type="text" name="origen" id="titulo" /><br />
Descripcion: <input type="text" name="destino" id="descripcion" />
<input type="hidden" name="usuario" id="usuario" value="<?php echo $_SESSION['usuario'];?>"/><br />
<input type="button" value="Grabar Ruta" style="font-size:18px" onclick="save_waypoints()">
</div>
 
 
<script>
var map, ren, ser;
var data = {};
function goma()
{
    map = new google.maps.Map( document.getElementById('mapa'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(-12.1008684,-77.0288967) })
 
    ren = new google.maps.DirectionsRenderer( {'draggable':true} );
    ren.setMap(map);
    
        
}
 
function generate_waypoints()
{   
    ser = new google.maps.DirectionsService();
    ser.route({ 'origin': document.getElementById("origen").value, 'destination': document.getElementById("destino").value, 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
        if(sts=='OK')ren.setDirections(res);
    })  
}
 
function save_waypoints(){
    var w=[],wp;
    var rleg = ren.directions.routes[0].legs[0];
    data.start = {'lat': rleg.start_location.lat(), 'lng':rleg.start_location.lng()}
    data.end = {'lat': rleg.end_location.lat(), 'lng':rleg.end_location.lng()}
    var wp = rleg.via_waypoints 
    for(var i=0;i<wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()]    
    data.waypoints = w;
    
    var str = JSON.stringify(data)
    
    $.post("anadir_ruta.php",{command:'save',mapdata:str, titulo:$("#titulo").val(), descripcion:$("#descripcion").val(), usuario:$("#usuario").val()},function(data){
        var r = data.split("-");
        if(r[0] == 'bien'){
            alert("Ruta generada correctamente");
        }else{
            alert(data);
        }
        
    });
}
 
</script>
</body>
</html>

anadir_ruta.php:

Código PHP:

Ver original<? ob_start(); header('Cache-Control: no-store, no-cache, must-revalidate');
 
    $data = $_REQUEST['mapdata'];
    
    mysql_connect('localhost','usuario','password');
    mysql_select_db('base_datos');
    $date=date("Y-m-d H:i:s");
    if($_REQUEST['command']=='save')
    {
        
        $query = "INSERT INTO rutas VALUES('','".$_POST['usuario']."','".$_POST['titulo']."','".$_POST['descripcion']."','".$data."','".$date."')";
        if(mysql_query($query)) echo "bien-".mysql_insert_id();
        die(mysql_error());
    }
?>

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!