Foros del Web » Programando para Internet » PHP »

google map + ajax + php

Estas en el tema de google map + ajax + php en el foro de PHP en Foros del Web. Hola gente, vengo a pedir su ayuda porque me estoy volviendo loco con google map, ajax y php. Bien lo que tengo que hacer es ...
  #1 (permalink)  
Antiguo 02/02/2012, 16:59
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 5 meses
Puntos: 43
google map + ajax + php

Hola gente, vengo a pedir su ayuda porque me estoy volviendo loco con google map, ajax y php. Bien lo que tengo que hacer es mostrar el mapa segun los datos de unos combosbox es decir.
tengo un combo con 4 paises, al seleccionar un país por medio de ajax, cargo otro combo con las provincias de ese país, al seleccionar una provincia, tambien por ajax me crea un combo con las ciudades de esa provincia, hasta aí todo perfecto. El problema viene cuando al seleccionar una ciudad, por ajax tengo que mostrar la posición en el google map y permiter acomodar el marcador hasta donde corresponde y guardar las coordenadas. Esta última parte es la que no me funciona, no puedo hacer que me muestre el mapa no me termina de mostrar nunca nada reviso el html y no me muestra el código js.
Este es mi php:
Código PHP:
Ver original
  1. /**
  2.      * traigo todas las regiones de un pais
  3.      * @version 0.1
  4.      * @author Lucas M. Sastre
  5.      * @access public
  6.      * @name regiones
  7.      *
  8.      * Modificaciones
  9.      */
  10.     public function regiones() {
  11.         $regiones = $this->Regiones->listadoRegiones($_REQUEST['pais']);
  12.         $pais = $this->Paises->buscarPorPk($_REQUEST['pais']);
  13.         $html = "<br/><br/><br/><p><label>Región / Provincia:</label></p>";
  14.         $html .='<select name="region" id="region" onchange="requestAjax(\'index.php?controlador=propiedades&accion=localidades\',\'region\',this.value,\'localidades\',1)">
  15.                <option value="">Seleccione una Región</option>';
  16.         foreach ($regiones as $region) {
  17.             $html .= '<option value="'.$region['id'].'">'.$region['nombre'].'</option>';
  18.         }
  19.         $html .='</select><br/><br/>';
  20.  
  21.        
  22.         echo $html;
  23.     }
  24.  
  25.     /**
  26.      * traigo todas las localidades de una region
  27.      * @version 0.1
  28.      * @author Lucas M. Sastre
  29.      * @access public
  30.      * @name regiones
  31.      *
  32.      * Modificaciones
  33.      */
  34.     public function localidades() {
  35.         $localidades = $this->Localidades->listadoLocalidades($_REQUEST['region']);
  36.         $region = $this->Regiones->buscarPorPk($_REQUEST['region']);
  37.         $html = "<br/><br/><br/><p><label>Localidad / Ciudad:</label></p>";
  38.  
  39.         $html .='<br/><select name="localidades_id" id="localidad" onchange="requestAjax(\'index.php?controlador=propiedades&accion=ciudad\',\'localidad\',this.value,\'geos\',1)">
  40.                <option value="">Seleccione una Localidad</option>';
  41.         foreach ($localidades as $localidad) {
  42.             $html .= '<option value="'.$localidad['id'].'">'.$localidad['nombre'].'</option>';
  43.         }
  44.         $html .='</select><br/><br/>';
  45.  
  46.         echo $html;
  47.     }
  48.  
  49.     /**
  50.      * traigo los datos de la localidad
  51.      * @version 0.1
  52.      * @author Lucas M. Sastre
  53.      * @access public
  54.      * @name regiones
  55.      *
  56.      * Modificaciones
  57.      */
  58.     public function ciudad() {
  59.         $localidad = $this->Localidades->buscarPorPk($_REQUEST['localidad']);
  60.         $html .='
  61.            
  62.                <br/><br/><br/><p><label>Logitud:</label>
  63.                    <input type="text" class="text-long" id="longitud" name="logitud" readonly value="'.$localidad->x.'"/>
  64.                </p>
  65.                <p><label>Latitud:</label>
  66.                    <input type="text" class="text-long" id="latitud" name="latitud" readonly value="'.$localidad->y.'"/>
  67.                </p>
  68.            
  69.             <script type="text/javascript">
  70.  
  71.                jQuery(document).ready(function() {
  72.                var latitud = '.$localidad->y.';
  73.                var longitud = '.$localidad->x.';
  74.                    function initialize() {
  75.    //console.log("latitud: "+latitud);
  76.    //console.log("longitud: "+longitud);
  77.    var posi = false;
  78.    var mapDiv = document.getElementById("map-canvas");
  79.    var map = new google.maps.Map(mapDiv, {
  80.        center: new google.maps.LatLng( latitud , longitud),
  81.        zoom: 5,
  82.        mapTypeId: google.maps.MapTypeId.SATELLITE
  83.    });
  84.  
  85.    google.maps.event.addListener(map, "click", function(event) {
  86.        if(posi){
  87.            alert("Ya hizo click en una posición");
  88.        }
  89.        else{
  90.            var marker = new google.maps.Marker({
  91.                position: event.latLng,
  92.                map: map,
  93.                title:"La Propiedad se encuentra aquí!",
  94.                draggable: true
  95.            });
  96.            map.setCenter(event.latLng);
  97.            posi = true;
  98.        }
  99.    });
  100. }
  101.                google.maps.event.addDomListener(window, "load", initialize);
  102.                alert("siiiiiiiiiiii");
  103.                });
  104.                </script>
  105.        ';
  106.         echo $html;
  107.     }

este es mi html
Código HTML:
Ver original
  1. <p><label>País:</label>
  2.             <select name="pais" id="paises" onchange="limpiar();requestAjax('index.php?controlador=propiedades&amp;accion=regiones','pais',this.value,'regiones',1);">
  3.                 <option value="">Seleccione un País</option>
  4. <?php
  5. foreach ($paises as $pais) {?>
  6.                 <option value="<?php echo $pais['id'];?>" <?php if($pais['id']==$datos->pais) {
  7.         echo "selected='selected'";
  8.     }?>><?php echo $pais['nombre'];?></option>
  9.     <?php
  10. }
  11. ?>
  12.             </select>
  13.         </p>
  14.         <div class="regiones" style="display: none;">lalala</div>
  15.         <div class="localidades" style="display: none;">lalala</div>
  16.         <div class="geo" style="display: none;">
  17.         </div>
  18.         <div class="geos" style="display: none;"></div>
  19.         <div id="map-canvas" style="width: 500px; height: 400px"></div>
  20.         <p>
  21.         <input type="hidden" name="id"  value="<? echo $datos->id;?>"/>
  22.         <input type="submit" value="Guardar" /></p>
  23.     </fieldset>

y este es mi js:
Código Javascript:
Ver original
  1. // funcion ajax para cargar contenido en un contenedor especifico
  2. function requestAjax(link,param,valor,contenedor,visible){
  3.     var url ;
  4.     url = link;
  5.     if(param!=''){
  6.         url = url+"&"+param;
  7.     }
  8.     if(valor!=''){
  9.         url = url+'='+valor;
  10.     }
  11.     $.ajax({
  12.         url: url,
  13.         cache: false,
  14.         success: function(data){
  15.             $.getScript('http://maps.google.com/maps/api/js?sensor=false&language=es_ES&region=AR');
  16.             $.getScript(baseJs+'effects.js');
  17.             $.getScript(adminJs+'jNice.js');
  18.             $.getScript(adminJs+'funciones.js');
  19.             console.log('aca');
  20.            
  21.             $("."+contenedor).empty();
  22.             $("."+contenedor).append(data);
  23.             if(visible==1){
  24.                 $("."+contenedor).css('display','block');
  25.             }
  26.         }
  27.     });
  28.  
  29. }
  30. function limpiar(){
  31.     $('.geo').empty();
  32.     $('.geos').empty();
  33.     $('.localidades').empty();
  34. }
  35.  
  36. $(document).ready(function(){
  37.     $('body #mensaje').click(function(){
  38.         $("body #mensaje").slideUp();
  39.     });
  40.     //calentario
  41.     $.datepicker.setDefaults($.datepicker.regional['es']);
  42.     $('#datepicker').datepicker({
  43.         changeMonth: true,
  44.         changeYear: true
  45.     })
  46.     $.datepicker.setDefaults($.datepicker.regional['es']);
  47.     $('#datepicker2').datepicker({
  48.         changeMonth: true,
  49.         changeYear: true
  50.     })
  51.  
  52.     //tabs
  53.     $("#tabs").tabs();
  54.     $("#tabs2").tabs();
  55.     //si se cambio de pais una vez seleccionado limpio los divs
  56.     $('#paises').live("change", function(){
  57.         $('.geos').empty();
  58.     });
  59.  
  60.  
  61. });

En que le estoy errando?

desde ya muchas gracias!
  #2 (permalink)  
Antiguo 04/02/2012, 10:26
Avatar de repara2  
Fecha de Ingreso: septiembre-2010
Ubicación: München
Mensajes: 2.445
Antigüedad: 13 años, 7 meses
Puntos: 331
Respuesta: google map + ajax + php

http://code.google.com/apis/maps/art...hpsqlajax.html
__________________
Fere libenter homines, id quod volunt, credunt.

Etiquetas: ajax, google, html, map
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:46.