Reto para programadores, 2 códigos iguales, uno funciona el otro no ¿Por que?

dagj · #1 (**permalink**) 03/11/2012, 13:05

Buenas, a quien le interese y a quien me pueda ayudar, tengo un problema con dos código cuyos procedimientos son iguales, mas sin embargo por alguna razón uno de ellos no esta funcionando.

Acá voy explicando:

Código PHP:

  <?php   
 
require("phpsqlajax_dbinfo.php");  
 
// Start XML file, create parent node 
 
$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node);  
 
// Opens a connection to a MySQL server 
 
$connection=mysql_connect (localhost, $username); 
if (!$connection) {  die('Not connected : ' . mysql_error());}  
 
// Set the active MySQL database 
 
$db_selected = mysql_select_db($database, $connection); 
if (!$db_selected) { 
  die ('Can\'t use db : ' . mysql_error()); 
}  
 
// Select all the rows in the markers table 
 
$query = "SELECT * FROM markers WHERE 1"; 
$result = mysql_query($query); 
if (!$result) {   
  die('Invalid query: ' . mysql_error()); 
}  
 
header("Content-type: text/xml");  
 
 
// Iterate through the rows, adding XML nodes for each 
 
while ($row = @mysql_fetch_assoc($result)){   
  // ADD TO XML DOCUMENT NODE   
  $node = $dom->createElement("marker");   
  $newnode = $parnode->appendChild($node);    
  $newnode->setAttribute("id",$row['id']); 
    $newnode->setAttribute("lat", $row['lat']);   
  $newnode->setAttribute("lng", $row['lng']);  
  $newnode->setAttribute("name",$row['name']); 
  $newnode->setAttribute("address", $row['address']);   
  $newnode->setAttribute("type", $row['type']); 
  $newnode->setAttribute("distance", $row['distance']); 
}  
 
echo $dom->saveXML(); 
?>

Este código funciona a la perfección, cuando lo ejecuto el "echo" me muestra el xml con la info.

Por otro lado tengo esto:

Código PHP:

  
<?php   
 
require("phpsqlajax_dbinfo.php");  
 
// Start XML file, create parent node 
 
$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("distance"); 
$parnode = $dom->appendChild($node);  
 
// Opens a connection to a MySQL server 
 
$connection=mysql_connect (localhost, $username); 
if (!$connection) {  die('Not connected : ' . mysql_error());}  
 
// Set the active MySQL database 
 
$db_selected = mysql_select_db($database, $connection); 
if (!$db_selected) { 
  die ('Can\'t use db : ' . mysql_error()); 
}  
 
// Select all the rows in the markers table 
 
$query = "SELECT lat1,lng1,lat2,lng2 FROM distancia"; 
$result = mysql_query($query); 
if (!$result) {   
  die('Invalid query: ' . mysql_error()); 
}  
 
header("Content-type: text/xml");  
 
 
// Iterate through the rows, adding XML nodes for each 
 
while ($row = @mysql_fetch_assoc($result)){   
  // ADD TO XML DOCUMENT NODE   
  $node = $dom->createElement("distanc");   
  $newnode = $parnode->appendChild($node);    
  $newnode->setAttribute("lat1",$row['lat1']); 
  $newnode->setAttribute("lng1", $row['lng1']);   
  $newnode->setAttribute("lat2", $row['lat2']);  
  $newnode->setAttribute("lng2",$row['lng2']); 
}  
 
echo $dom->saveXML(); 
?>

Este también funciona a la perfección, mostrándome con el echo los datos.
Ahora bien, hasta acá lo que funciona, si se fijan ambos códigos se parecen mucho y funcionan, a continuación colo el código donde esta la falla que aun no veo:

Código HTML:

<script src="https://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(3, 5);
    iconBlue.shadowSize = new GSize(6, 5);
    iconBlue.iconAnchor = new GPoint(2, 5);
    iconBlue.infoWindowAnchor = new GPoint(3, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["Cuadricula"] = iconBlue;
    customIcons["Subestacion"] = iconRed;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(10.900, -63.800), 11);
 
  
 GDownloadUrl("phpsqlajax_genxml3.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
			                        (parseFloat(markers[i].getAttribute("lng"))));
			 
            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<b>" + "Nombre: "+ type +" "+ name + "</b> <br/>" + address +" KVA" +"</b> <br/>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
	}
	
	
         GDownloadUrl("distancia.php", function (dat) {
	 var xml = GXml.parse(dat);
          var distance = xml.documentElement.getElementsByTagName("distanc");
          for (var i = 0; i < distance.length; i++) {
        var point = new GLatLng(parseFloat(distance[i].getAttribute("lat1")),
			                        (parseFloat(distance[i].getAttribute("lng1"))));
		var point2 = new GLatLng(parseFloat(distance[i].getAttribute("lat2")),
			                        (parseFloat(distance[i].getAttribute("lng2"))));
		
		 	var polyline = new GPolyline([new GLatLng(point) ,  new GLatLng(point2)]);
			 map.addOverlay(polyline);
			 poly.setMap(map);
				 return distanc;
		  

		  }});

Fijense que hay 2 GDownloadUrl, el que llama marcadores y el que llama los puntos para crear una linea.

Cabe explicar que esto llama a google maps, carga unos puntos que están almacenados en la BD y debería crear lineas rectas entre esos puntos, eso también esta en una bd, se que el código funciona porque cuando coloco coordenadas directamente me crea la linea, el problema esta en recibir el archivo xml desde las paginas que tienen las llamadas a la BD, lo extraño del asunto es que la función GDownloadUrl("phpsqlajax_genxml3.php", function(data) funciona bien, recibe el xml con los puntos de la bd y los grafica en google maps, pero la funcion GDownloadUrl("distancia.php", function (dat) aunque es casi similar no esta recibiendo el xml, probe con un echo de las variables y con eso certifique que ese xml no esta llegando.

Si alguien es capaz de resolver esto, se le agradece, tengo tiempo tras este problema ya.

#2 (**permalink**) 03/11/2012, 14:46

Es interesante el tema.

Veo que estás trabajando con la API V2 y eso tal vez me haga equivocar.

Hay una línea donde me sobran paréntesis:

Código Javascript:

Ver originalvar point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
 (parseFloat(markers[i].getAttribute("lng"))));

Yo la dejaría así:

Código Javascript:

Ver originalvar point = new GLatLng(parseFloat(markers[i].getAttribute("lat"),
 (parseFloat(markers[i].getAttribute("lng")));

pueder enviar un alert para ver si lat y lng llegan limpios o con paréntesis.

Si no es eso, puedo verlo pasándolo a V3.

Si dejas algo más de código podría reproducirlo para ser fiel a la respuesta.

dagj · #3 (**permalink**) 03/11/2012, 15:11

Gracias por hacerme ver el detalle de los paréntesis, el programa completo es un poco mas complejo, sin embargo lo que esta fallandome en este momento tiene que ver con 3 direcciones url:

La primera:
phpsqlajax_genxml3.php esta es para traer puntos de geolocalizacion de la BD (Es el primer codigo que describi)

La segunda:
distancia.php esta trae 4 puntos de la bd, latitud y longitud desde donde sale la linea y latitud y longitud del punto a donde llega la linea (pertenece al segundo codigo que describi)

En cuanto a la tercera:
Untitled-8(2).php tiene el principal, ese si coloque solo una parte, acá lo dejo completo.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>CORPOELEC</title>
    <script src="https://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(3, 5);
    iconBlue.shadowSize = new GSize(6, 5);
    iconBlue.iconAnchor = new GPoint(2, 5);
    iconBlue.infoWindowAnchor = new GPoint(3, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["Cuadricula"] = iconBlue;
    customIcons["Subestacion"] = iconRed;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(10.900, -63.800), 11);
 
  
 GDownloadUrl("phpsqlajax_genxml3.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat"),
			                        (parseFloat(markers[i].getAttribute("lng"))));
			 
            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<b>" + "Nombre: "+ type +" "+ name + "</b> <br/>" + address +" KVA" +"</b> <br/>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
	}
	
	
         GDownloadUrl("distancia.php", function (dat) {
	 var xml = GXml.parse(dat);
          var distance = xml.documentElement.getElementsByTagName("distanc");
          for (var i = 0; i < distance.length; i++) {
        var point = new GLatLng(parseFloat(distance[i].getAttribute("lat1")),
			                        (parseFloat(distance[i].getAttribute("lng1"))));
		var point2 = new GLatLng(parseFloat(distance[i].getAttribute("lat2")),
			                        (parseFloat(distance[i].getAttribute("lng2"))));
		
		 	var polyline = new GPolyline([new GLatLng(point) ,  new GLatLng(point2)]);
			 map.addOverlay(polyline);
			 poly.setMap(map);
				 return distanc;
		  

		  }});
		
       <?php  
  
 
  
  </script>

  <style type="text/css">
  #leyenda {
	position: absolute;
	left: 102px;
	top: 552px;
	width: 188px;
	height: 169px;
	z-index: 1;
	background-color: #FFF;
}
  #icono1 {
	position: absolute;
	left: 3px;
	top: 70px;
	width: 173px;
	height: 32px;
	z-index: 2;
}
  #icono2 {
	position: absolute;
	left: 2px;
	top: 116px;
	width: 173px;
	height: 32px;
	z-index: 2;
}
  </style>
  </head>

  <body onload="load()" onunload="GUnload()">
   <div id="mlala" style="width: 800px; height: 20px"> 
 

</div>
   
  <div id="map" style="width: 1800px; height: 820px"> </div>
     <div id="leyenda">
       <blockquote>
         <p><strong>Leyenda </strong>
       </p>
     </blockquote>
     <div id="icono1"><strong><img src="img/iconorojo.png" alt="" width="35" height="39" /> Subestaciones</strong></div>
    
     <div id="icono2"><strong><img src="img/iconoazul.png" alt="" width="35" height="39" /> Cuadriculas</strong></div>
    </div>
</body>
</html>

Hay algunos detalle como colocar estilos en un .css y documentar el codigo, pero eso lo hago una vez que me funcione lo principal.

Otra cosa que quizás se te complique es que como trabaja con bd es difícil hacerlo funcionar en otra laptop o pc pq habria que montar al menos unos puntos en una bd y es trabajoso, sin embargo, se que el codio funciona pues cuando coloco coordenadas para crear los ponit y ponit2, al cargar el mapa se crea la linea perfectamente, el problema se presenta cuando no llega el archivo xml de lineas, se que el xml de puntos si llega por que cargan en el mapa.

HE probado con un echo en el html del xml que traeria las coordenadas para las lineas y resulta que la variable no llega, no se muestra nada, al contrario de los puntos, al mostrar un echo de esa llamada si me muestra el contenido del xml

Notese también que todo esta en una función onload() que carga al cargar la pagina

Creo que es toda la info que puedo darles amigos, de todas formas cualquier dudo de info que falte con gusto les informo.

Ah! haciendo echo de los xml en los url donde se hacen las consultas dan los resultados bien, es decir que la consulta de la BD se hace bien y quelos xml se crean bien, es decir, salen con contenido, el problema es la llegada.

#4 (**permalink**) 03/11/2012, 17:45

Como te decía, al estar trabajando yo en V3 de Google maps, mi orientación es a tientas.

Dado el key particular a cada usuario vs. web, solo veo un monton de errores que no puedo analizar.

Sigo viendo un error en tus declaraciones de point y point 2:

Por una parte, var point aparece duplicada (yo le llamaría point1 a la que tomas de "distancia.php" para que no interfiera con la anterior)

Por otra parte a mí me siguen sobrando parentesis.

Mira de hacer, a modo de ejemplo:

Código Javascript:

Ver originalGDownloadUrl("distancia.php", function (dat) {
     var xml = GXml.parse(dat);
          var distance = xml.documentElement.getElementsByTagName("distanc");
          for (var i = 0; i < distance.length; i++) {
        var point = new GLatLng(parseFloat(distance[i].getAttribute("lat1")),
                                    (parseFloat(distance[i].getAttribute("lng1"))));
        var point2 = new GLatLng(parseFloat(distance[i].getAttribute("lat2")),
                                    (parseFloat(distance[i].getAttribute("lng2"))));
alert (point);
alert (point2
        
            var polyline = new GPolyline([new GLatLng(point) ,  new GLatLng(point2)], "#ff0000", 2);
/* OJO, añade los valores de color y grueso de la polilinea */
             map.addOverlay(polyline);
             poly.setMap(map);
                 return distanc;
          
 
          }});

para que te salga algo tan limpio como 10.900000, -63.800000

(Observa mis dos notas dentro del código).

No estaría de más que compruebes mediante alert tus valores name, address, type , point

dagj · #5 (**permalink**) 05/11/2012, 09:12

Buen dia amigo, gracias por la ayuda que has brindado, he verificado con alert que llegan los datos, sin embargo aun no los grafica, por lo que supongo que el problema esta en la funcion polyline

<script type="text/javascript">

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(11.0099, -64.100), 11);

GDownloadUrl("phpsqlajax_genxml3.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker") ;
for (var i = 0; i < markers.length; i++) {
var point= new GLatLng(parseFloat(markers[i].getAttribute("lat1")),
parseFloat(markers[i].getAttribute("lng1")));
var punto= new GLatLng(parseFloat(markers[i].getAttribute("lat2")),
parseFloat(markers[i].getAttribute("lng2")));
alert ( point);
alert (punto);
marker = new GPolyline([new GLatLng(point), new GLatLng(punto),"#ff0000", 3]);

map.addOverlay(new GPolyline(marker));
marker.setMap(map);
return marker;

}});
}
}

</script>