[SOLUCIONADO] Google maps y for PHP

carlosuc99 · #1 (**permalink**) 03/07/2013, 11:34

Buenas,

Vuelvo a las andadas. Despues de un tiempo sin errores me encuentro con esto:

este es mi código:

Código PHP:

Ver original<?php
//Conexion db
 
$query = mysql_query("SELECT * FROM routes"); 
 
?> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"> 
</script> 
<script type="text/javascript"> 
 
 
window.onload = function () {
  var options = {
    zoom: 5,
    center: new google.maps.LatLng(40.84706, -2.944336),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 
  map = new google.maps.Map(document.getElementById('map_canvas'), options);
 
  
  <?php 
        for($i = 0; $i < mysql_num_rows($query); $i++){
            $icao = mysql_result($query, $i, 'from');
            $query = mysql_query("SELECT * FROM airports WHERE icao='$icao'");
            $latitude = mysql_result($query, 0, 'latitude');
            $longitude = mysql_result($query, 0, 'longitude'); 
            $city = mysql_result($query, 0, 'city'); 
        ?> 
  var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
  var image = 'http://i46.tinypic.com/33zbm09.png';
  var latLonCenter = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
  marker = new google.maps.Marker({
    position: latLonCenter,
    map: map,
    draggable: false,
    icon: image,
    title: '<?php echo $icao; ?> - <?php echo $city; ?>',
    Airport1: Airport1
  });
 
 
    
    var infowindow = new google.maps.InfoWindow({
    content: Airport1
    });
 
 
    google.maps.event.addListener(marker, 'click', function () {
      var n = 1;
      var infowindow = new google.maps.InfoWindow({
        content: "",
        maxWidth: 320,  
        zIndex: n 
      });
      
      infowindow.setContent(this.Airport1);
      infowindow.setZIndex(n++);  // superpone el último infowindows
      infowindow.open(map, this);
    });
    
    <?php
    $query = mysql_query("SELECT * FROM routes WHERE from='$icao'");
    
    
    for($i = 0; $i < mysql_num_rows($query); $i++){
    $destination = mysql_result($query, $i, 'to');
    $query = mysql_query("SELECT * FROM airports WHERE icao='$destiantion'");
    $latitudeD = mysql_result($query, 0, 'latitude');
    $longitudeD = mysql_result($query, 0, 'longitude'); 
    ?>
    
    var PolyLine = new google.maps.Polyline({
        strokeColor: "#FF0000",
        strokeOpacity: 2.0,
        strokeWeight: 2
    });
 
    var polyCords = [
    new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    new google.maps.LatLng(<?php echo $latitudeD; ?>, <?php echo $longitudeD; ?>)
    ];
    
 
    google.maps.event.addListener(marker, 'click', function() {
 
 
    PolyLine.setPath(polyCords);
 
    PolyLine.setMap(map);
    });
 
<?php } } ?>
 
 
 
}
</script> 
  </head>
  
  <body> 
    <center><div id="map_canvas" style="width:850px; height:560px;"></div></center> 
  </body>

Lo que pasa es que no me muestra las polilyne . Al pulsar en el marker que se abra una red de polylines hacia otros marker. Los marker se muestran sin problemas pero al pulsar en ellos los polylines no aparecen.

La idea es hacer algo como este mapa: http://www.ibe-va.com/index.php?opti...mid=90&lang=en

quinqui · #2 (**permalink**) 03/07/2013, 11:43

Holas, carlosuc99.

¿Esta consulta no debiera ir en Javascript? Parece más una duda sobre el uso de la API de Google Maps que sobre PHP...

Como sea, ¿has intentado probar generar las polylines desde un inicio? Me refiero a si en verdad están las líneas ahí, ocultas, o tal vez no hay nada, y por eso al hacer click efectivamente no muestra nada. Me entró la duda cuando vi tu query, donde dice "WHERE icao='$destiantion'", siendo que la variable es $destination...

Saludos!

carlosuc99 · #3 (**permalink**) 03/07/2013, 11:50

Cita:

Iniciado por quinqui

Holas, carlosuc99.

¿Esta consulta no debiera ir en Javascript? Parece más una duda sobre el uso de la API de Google Maps que sobre PHP...

Como sea, ¿has intentado probar generar las polylines desde un inicio? Me refiero a si en verdad están las líneas ahí, ocultas, o tal vez no hay nada, y por eso al hacer click efectivamente no muestra nada. Me entró la duda cuando vi tu query, donde dice "WHERE icao='$destiantion'", siendo que la variable es $destination...

Saludos!

Gracias por el error de la variable pero no es eso. El tema es el for. Si lo pongo sin el for, todo OK. Pero con el for para que me ponga todo lo de la DB nada. Así que por eso lo pongo aquí y no en JS.

quinqui · #4 (**permalink**) 03/07/2013, 13:03

Mmh... será entonces que estás pisando el objeto polyline javascript por cada iteración del ciclo php? En javascript, declara una variable tipo Array(), y luego, en el ciclo php, agrega a ese array un nuevo elemento, que será tu objeto polyline, por cada iteración del ciclo :o Lo mismo con cualquier otra cosa que deba ser única.

Saludos!

carlosuc99 · #5 (**permalink**) 03/07/2013, 14:12

Cita:

Iniciado por quinqui

Mmh... será entonces que estás pisando el objeto polyline javascript por cada iteración del ciclo php? En javascript, declara una variable tipo Array(), y luego, en el ciclo php, agrega a ese array un nuevo elemento, que será tu objeto polyline, por cada iteración del ciclo :o Lo mismo con cualquier otra cosa que deba ser única.

Saludos!

Ok, pero se puede declarar en Javascript y luego con el PHP añadirle contendio?? Lo que puedo hacer es declaralo en PHP pero antes del bucle y en el bucle añadirle el contenido. Pero luego como el añado el Polilyne? Que partes del polyline?? Luego dónde reproduzco ese array?? Porque si lo reproduzco fuera del bucle tengo que saber el número exacto de objetos y eso es algo que no se.

Si tienes un código de ejemplo te lo agradezco.

pateketrueke · #6 (**permalink**) 03/07/2013, 14:17

Yo te sugiero que primero construyas la fuente de datos y te concentres en resolver el problema únicamente con Javascript.

Con PHP sólo debes crear una estructura iterable y luego pasarla a Javascript usando json_encode(), así únicamente te dedicas a procesar dicha estructura que en Javascript es nativa.

Código PHP:

Ver original<?php
$datos = array();
 
while (/* ... */) {
  $datos []= array(/* ... */);
}
?>
 
<script>var datos = <?php echo json_encode($datos); ?>;
console.log(datos);</script>

Combinar ambos lenguajes para producir el Javascript correspondiente es complejo si no dominas ambos lenguajes, y ese es tu principal problema.

carlosuc99 · #7 (**permalink**) 03/07/2013, 14:28

Cita:

Iniciado por pateketrueke

Yo te sugiero que primero construyas la fuente de datos y te concentres en resolver el problema únicamente con Javascript.

Con PHP sólo debes crear una estructura iterable y luego pasarla a Javascript usando json_encode(), así únicamente te dedicas a procesar dicha estructura que en Javascript es nativa.

Código PHP:

Ver original<?php
$datos = array();
 
while (/* ... */) {
  $datos []= array(/* ... */);
}
?>
 
<script>var datos = <?php echo json_encode($datos); ?>;
console.log(datos);</script>

Combinar ambos lenguajes para producir el Javascript correspondiente es complejo si no dominas ambos lenguajes, y ese es tu principal problema.

Ummm, interesante.

Lo que no entiendo es el contenido del array. Se supone que es lo que genera la polyline, pero todo??? Habría que poner todo esto:

Código Javascript:

Ver originalvar PolyLine = new google.maps.Polyline({
        strokeColor: "#FF0000",
        strokeOpacity: 2.0,
        strokeWeight: 2
    });
 
    var polyCords = [
    new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    new google.maps.LatLng(<?php echo $latitudeD; ?>, <?php echo $longitudeD; ?>)
    ];
    
 
    google.maps.event.addListener(marker, 'click', function() {
 
 
    PolyLine.setPath(polyCords);
 
    PolyLine.setMap(map);
    });

Me da a mi que no. Y luego si los datos los proceso fuera del bucle se verá todo??

PD: Esto último es una estupidez mía. Claro que si los procesas fuera se verán porque va todo en el array.

pateketrueke · #8 (**permalink**) 03/07/2013, 14:43

Observa bien el fragmento de código que requiere los datos:

Cita:

new google.maps.LatLng(lat, lng)

Ahora, suponiendo que ya tienes un array así:

Código Javascript:

Ver originalvar coords = [{ lat: 123, lng: 456 }, { lat: 789, lng: 654 }];
 
var poly = [];
 
for (var i in coords) {
  var d = coords[i];
  poly.push(new google.maps.LatLng(d.lat, d.lng)); 
}

Eso debería proveer la funcionalidad que necesitas, sin embargo, necesitas crear tu estructura de datos para que así sea.

Código PHP:

Ver original$datos = array();
 
while (/* ... */) {
  $datos []= array('lat' => $x, 'lng' => $y);
}

Pero vuelvo a lo mismo, si no dominas ambos lenguajes mezclarlos de cualquier modo es demasiado oscuro y por ende no comprendes lo que debes hacer.

quinqui · #9 (**permalink**) 03/07/2013, 14:54

Estoy confundida, porque como dice pateketrueke, parece que todavía no tienes muy claro cómo trabajar con los lenguajes combinados, aunque en tu código pareciera que sí lo tienes claro... Como sea, la idea en realidad es sencilla: lo que hacemos es escribir código javascript, pero en vez de hacerlo a mano, lo hacemos con php: no es que php entre a trabajar con javascript, sino que nos ayuda a automizar el llenado de las variables que usaremos en javascript.

Acá te dejo un ejemplo, basado en tu código, para que veas la lógica que te señalé en mi primer post:

Código PHP:

 
// en javascript, debes declarar arreglos javascript para almacenar tus lineas y puntos del mapa
var markers   = new Array();
var PolyLines = new Array();

<?php
// con php, obtienes los datos de coordenadas
$query = mysql_query("SELECT * FROM routes WHERE from='$icao'");

// acá recorres los datos con php      
for ($i = 0; $i < mysql_num_rows($query); $i++)
{
  $destination = mysql_result($query, $i, 'to');
  $query = mysql_query("SELECT * FROM airports WHERE icao='$destiantion'");
  $latitudeD = mysql_result($query, 0, 'latitude');
  $longitudeD = mysql_result($query, 0, 'longitude');
  ?>
  
  // en javascript, imprimes el código que corresponde a la creación de cada línea del mapa:
  // en vez de hacerlo en una misma línea todo el tiempo, lo debes hacer en un elemento
  // del array javascript:
  var linea = new google.maps.Polyline({
        strokeColor: "#FF0000",
        strokeOpacity: 2.0,
        strokeWeight: 2
    });
 
  PolyLines[<?php print $i; ?>] = linea;

  google.maps.event.addListener(markers[<?php print $i; ?>], 'click', function() 
  {
    PolyLines[<?php print $i; ?>].setPath(polyCords);
    PolyLines[<?php print $i; ?>].setMap(map);
  });

 <?php
}
?>

Ahora bien, cuando trabajas con la API de Google Maps, si vas a tener muchos puntos y datos en el mapa, se recomienda trabajar con XML, de modo que con php, en vez de escribir el código javascript directo, lo que haces es llenar un XML con los datos que el mapa puede entender (tiene sus propias tags y todo, lo ves en la referencia de la API), y luego con javascript creas un par de funciones que permitan leer este XML y traducirlo en el mapa.

Saludos!

carlosuc99 · #10 (**permalink**) 03/07/2013, 15:13

@quinqui Gracias, pero no funciona. Fijate "marker" no lo puedes pasar a markers porque es algo que ya viene de arriba. Se genera de manera parecida, pero este al contrario no da ningún problema. Falta la var polyCords donde se generan las cordenadas para hacer la línea, lo puse así:

Código Javascript:

Ver originalvar poly = [
    new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    new google.maps.LatLng(<?php echo $latitudeD; ?>, <?php echo $longitudeD; ?>)
    ];
    
    polyCords[<?php print $i; ?>] = poly;

Pero nada, sigue sin funcionar.

quinqui · #11 (**permalink**) 03/07/2013, 15:48

Mmh, ahora que veo con calma tu código, la verdad es que nunca trabajé esta api de esa forma, por eso no resulta muy compatible lo que te digo yo ahora con lo que tú tienes... Pero en fin, igual se puede.

Dices que con los markers no tienes problemas, o sea, que se muestran en el mapa, cierto? Ahora bien, se me ocurre que, e insisto, debes trabajar tanto markers como polylines en arrays javascript.

Me explico. Cuando recorres el ciclo que declara los markers, efectivamente los estás generando uno a uno y a medida que los declaras, aparecen en el mapa, por lo que cuando usas la misma variable javascript para generar otro, no hay peligro que pise los anteriores, porque ya están agregados al mapa, no?

Sin embargo, no ocurre lo mismo con las polylines, ya que no las estás mostrando a medida que las generas, sino que las dejas asociadas al evento click de cada marker. Pero como no hay ningún marker en memoria javascript (salvo el último del ciclo), pues las polilíneas sólo se asocian al último marker. Por eso, te digo trabajar con arrays, porque así la polilínea en la posición 10 va a estar asociada al marker de la posición 10, y así, etc.

En el código de mi último post, sólo tendrías que declarar el array de markers antes del ciclo donde imprimes los mismos.

Código PHP:

 
// declaras el array de markers javascript
var markers = new Array();
<?php  
// con php llenas este array en el ciclo for
?>

// declaras el array de lineas javascript
var polylines = new Array();
<?php  
// con php llenas este array en el ciclo for
?>

La verdad, es que siguiendo el curso de tu código, en vez de hacer una consulta para obtener las polilíneas, mejor recorres de nuevo el arreglo de markers (o sea, lo generas en javascript, pero también puedes dejar tu copia de seguridad en php en el mismo ciclo), y entonces, por cada marker haces efectivamente la consulta de su polilínea (porque creo que de hecho algo así haces, no?); de este modo, estás seguro que la posición en el array siempre va a ser la correspondiente.

Saludos!

carlosuc99 · #12 (**permalink**) 03/07/2013, 16:30

Cita:

Iniciado por quinqui

Mmh, ahora que veo con calma tu código, la verdad es que nunca trabajé esta api de esa forma, por eso no resulta muy compatible lo que te digo yo ahora con lo que tú tienes... Pero en fin, igual se puede.

Dices que con los markers no tienes problemas, o sea, que se muestran en el mapa, cierto? Ahora bien, se me ocurre que, e insisto, debes trabajar tanto markers como polylines en arrays javascript.

Me explico. Cuando recorres el ciclo que declara los markers, efectivamente los estás generando uno a uno y a medida que los declaras, aparecen en el mapa, por lo que cuando usas la misma variable javascript para generar otro, no hay peligro que pise los anteriores, porque ya están agregados al mapa, no?

Sin embargo, no ocurre lo mismo con las polylines, ya que no las estás mostrando a medida que las generas, sino que las dejas asociadas al evento click de cada marker. Pero como no hay ningún marker en memoria javascript (salvo el último del ciclo), pues las polilíneas sólo se asocian al último marker. Por eso, te digo trabajar con arrays, porque así la polilínea en la posición 10 va a estar asociada al marker de la posición 10, y así, etc.

En el código de mi último post, sólo tendrías que declarar el array de markers antes del ciclo donde imprimes los mismos.

Código PHP:

 
// declaras el array de markers javascript

var markers = new Array();

<?php  

// con php llenas este array en el ciclo for

?>

 
// declaras el array de lineas javascript

var polylines = new Array();

<?php  

// con php llenas este array en el ciclo for

?>

La verdad, es que siguiendo el curso de tu código, en vez de hacer una consulta para obtener las polilíneas, mejor recorres de nuevo el arreglo de markers (o sea, lo generas en javascript, pero también puedes dejar tu copia de seguridad en php en el mismo ciclo), y entonces, por cada marker haces efectivamente la consulta de su polilínea (porque creo que de hecho algo así haces, no?); de este modo, estás seguro que la posición en el array siempre va a ser la correspondiente.

Saludos!

Que va, aquí el error viene de antes los marker tampoco funcionan. Realmente si solo hay una entrada en la tabla si. Pero como haya dos solo muestra la primera.

Llego a este código:

Código PHP:

Ver original<?php
include('db_login.php');
      
      $connection = mysql_connect($db_host, $db_username, $db_password);
      if (!$connection){
      die ("Eror connecting database: <br/>". mysql_error());
      } 
    
      $db_select = mysql_select_db($db_database);
      if (!$db_select){
      die ("Database Error: <br/>". mysql_error());
      }
 
$query = mysql_query("SELECT * FROM routes"); 
 
?> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"> 
</script> 
<script type="text/javascript"> 
 
 
window.onload = function () {
  var options = {
    zoom: 5,
    center: new google.maps.LatLng(40.84706, -2.944336),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 
  map = new google.maps.Map(document.getElementById('map_canvas'), options);
  var markers   = new Array();
  var infowindow2   = new Array();
  var PolyLines = new Array();
  
  <?php 
        for($i = 0; $i < mysql_num_rows($query); $i++){
            $icao = mysql_result($query, $i, 'from');
            $query = mysql_query("SELECT * FROM airports WHERE icao='$icao'");
            $latitude = mysql_result($query, 0, 'latitude');
            $longitude = mysql_result($query, 0, 'longitude'); 
            $city = mysql_result($query, 0, 'city'); 
        ?> 
  var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
  var image = 'http://i46.tinypic.com/33zbm09.png';
  var latLonCenter = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
  marker = new google.maps.Marker({
    position: latLonCenter,
    map: map,
    draggable: false,
    icon: image,
    title: '<?php echo $icao; ?> - <?php echo $city; ?>',
    Airport1: Airport1
  });
 
    markers[<?php print $i; ?>] = marker;
    
    var infowindow = new google.maps.InfoWindow({
    content: Airport1
    });
 
 
    google.maps.event.addListener(marker, 'click', function () {
      var n = 1;
      var infowindow = new google.maps.InfoWindow({
        content: "",
        maxWidth: 320,  
        zIndex: n 
      });
      
      infowindow[2<?php print $i; ?>] = infowindow;
      
      infowindow2[<?php print $i; ?>].setContent(this.Airport1);
      infowindow2[<?php print $i; ?>].setZIndex(n++);  // superpone el último infowindows
      infowindow2[<?php print $i; ?>].open(map, this);
    });
    
    <?php
    $query = mysql_query("SELECT * FROM routes WHERE from='$icao'");
    
    
    for($i = 0; $i < mysql_num_rows($query); $i++){
    $destination = mysql_result($query, $i, 'to');
    $query = mysql_query("SELECT * FROM airports WHERE icao='$destiantion'");
    $latitudeD = mysql_result($query, 0, 'latitude');
    $longitudeD = mysql_result($query, 0, 'longitude'); 
    ?>
    
    var linea = new google.maps.Polyline({
        strokeColor: "#FF0000",
        strokeOpacity: 2.0,
        strokeWeight: 2
    });
 
    PolyLines[<?php print $i; ?>] = linea;
 
    var polyCords = [
    new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    new google.maps.LatLng(<?php echo $latitudeD; ?>, <?php echo $longitudeD; ?>)
    ];
    
 
    google.maps.event.addListener(marker, 'click', function() {
 
 
    PolyLines[<?php print $i; ?>].setPath(polyCords);
 
    PolyLines[<?php print $i; ?>].setMap(map);
    });
 
<?php } } ?>
 
 
 
}
</script> 
  </head>
  
  <body> 
    <center><div id="map_canvas" style="width:850px; height:560px;"></div></center> 
  </body>

El problema de este código es que directamente solo me muestra el marker de la primera entrada de la tabla y que no me muestra el infowindow de ninguna. Además las polyline siguen igual.

quinqui · #13 (**permalink**) 03/07/2013, 16:52

Entonces sí era lo que te decía yo. Está bien trabajar todo en arrays, pero valida que todos tengan el índice correspondiente.

Te sugiero que, en tu nuevo código, cambies esto:

Código PHP:

 
marker = new google.maps.Marker({

    position: latLonCenter,

    map: map,

    draggable: false,

    icon: image,

    title: '<?php echo $icao; ?> - <?php echo $city; ?>',

    Airport1: Airport1

  });

 

  markers[<?php print $i; ?>] = marker;

Por esto:

Código PHP:

 
markers[<?php print $i; ?>] = new google.maps.Marker({

    position: latLonCenter,

    map: map,

    draggable: false,

    icon: image,

    title: '<?php echo $icao; ?> - <?php echo $city; ?>',

    Airport1: Airport1

  });

Ya que reviendo el código, me parece ahora innecesario esa asignación, si se puede hacer del principio, teniendo bien definido el índice en el array (el $i php).

Mi duda, ahora, es si al crear el nuevo objeto tipo marker de google maps, ¿estás efectivamente mostrándolo en el mapa? Yo recordaba que luego de crear el objeto había que asociarlo al objeto mapa, en algo como esto (favor obviar errores de sintaxis, que es sólo como referencia):

Código javascript:

Ver original// * esto no es código googlemaps, es sólo ejemplo de la lógica en cuestión *
var miMapa = new mapaGoogle(bla bla bla);
var miMarker = new markerGoogle(bla bla bla);
miMapa.add(miMarker);

Como no alcanzo a ver algo así en tu código, pues lo pregunto (igual lo estoy viendo por encimita no más).

Saludos!

carlosuc99 · #14 (**permalink**) 04/07/2013, 04:18

Creo que he descubierto algo importante. Yo aseguraría que esto me funcionaba, por lo menos hasta las infowindow en otro proyecto. Rebusqué el archivo y vi que la única diferencia entre los dos era el query. Fijaos esto funciona:

Código PHP:

Ver original<?php
 include('db_login.php');
      
      $connection = mysql_connect($db_host, $db_username, $db_password);
      if (!$connection){
      die ("Eror connecting database: <br/>". mysql_error());
      } 
    
      $db_select = mysql_select_db($db_database);
      if (!$db_select){
      die ("Database Error: <br/>". mysql_error());
      }
$query = mysql_query("SELECT * FROM airports2"); 
 
?> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"> 
</script> 
<script type="text/javascript"> 
 
 
window.onload = function () {
  var options = {
    zoom: 5,
    center: new google.maps.LatLng(40.84706, -2.944336),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 
  map = new google.maps.Map(document.getElementById('map_canvas'), options);
 
  
  <?php 
        for($i = 0; $i < mysql_num_rows($query); $i++){
            $icao = mysql_result($query, $i, 'icao');
            $lat = mysql_result($query, $i, 'latitude');
            $lon = mysql_result($query, $i, 'longitude'); 
            $city = mysql_result($query, $i, 'city'); 
        ?> 
  var image = 'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-d22328/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/airport.png';
  var latLonCenter = new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lon; ?>);
  var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
  marker = new google.maps.Marker({
    position: latLonCenter,
    map: map,
    draggable: false,
    icon: image,
    title: '<?php echo $icao; ?> - <?php echo $city; ?>',
    Airport1: Airport1
  });
 
    var infowindow = new google.maps.InfoWindow({
    content: Airport1
    });
 
 
    google.maps.event.addListener(marker, 'click', function () {
      var n = 1;
      var infowindow = new google.maps.InfoWindow({
        content: '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>',
        maxWidth: 320,  //Ancho de ventana infowindows en px
        zIndex: n // para que el último infowindows se superponga
      });
      
      infowindow.setContent(this.Airport1);
      infowindow.setZIndex(n++);  // superpone el último infowindows
      infowindow.open(map, this);
    });
 
<?php } ?>
 
}
</script> 
  </head>
  
  <body> 
    <center><div id="map_canvas" style="width:650px; height:360px;"></div></center> 
  </body>

Pero si uso el query de este proyecto:

Código PHP:

Ver original$query = mysql_query("SELECT * FROM routes"); 
//Codigo que no varia y ...
//Comienza el for y a continuación:
$icao = mysql_result($query, $i, 'from');
            $query = mysql_query("SELECT * FROM airports WHERE icao='$icao'");
            $latitude = mysql_result($query, 0, 'latitude');
            $longitude = mysql_result($query, 0, 'longitude'); 
            $city = mysql_result($query, 0, 'city');

La diferencia es clara. En el primero obtengo todos los datos de una tabla y en la segunda cojo un dato de una y me busco más información de este dato en otra.

Pues bien, en el primero todo OK, pero en el segundo sólo se me muestra la primera entrada en la tabla. POR QUÉ?????

PD: He hecho una prueba. Puse un echo al final del for para ver cual era el último icao que cogía y para mi sorpresa solo coge el primero. Así que no llega al segundo por eso no lo muestra. Puede que no repita el for, pero es algo que no entiendo. Por qué la primera funciona y la segunda no??

PD II:Soy estúpido????? El error está claro dos querys con el mismo nombre. Voy a ver si con esto se solucionan las polylines.

carlosuc99 · #15 (**permalink**) 04/07/2013, 05:13

Vale, las polylines de momento no funcionan pero se la causa o una de las causas.

Fijaos en el query del segundo for:

Código PHP:

Ver original$query5 = mysql_query("SELECT * FROM routes WHERE from='$icao'");

Originalmente se llamaba $query pero lo cambié por los problemas que daba.

Ese query no funciona. Puedo buscarlo de cualquier manera menos donde WHERE from o to. Con esas dos columnas siempre falla el query. Lo puedo buscar por flight... y no fallará. Pero por from o to que son las que me hacen falta falla.

Os dejo una exportacion MySQL de la tabla:

Código:

-- phpMyAdmin SQL Dump
-- version 3.5.8.1
-- http://www.phpmyadmin.net
--
-- Host: 10.246.16.183:3306
-- Generation Time: Jul 04, 2013 at 11:16 AM
-- Server version: 5.1.66-0+squeeze1
-- PHP Version: 5.3.3-7+squeeze15

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

--
-- Database: `americanairline`
--

-- --------------------------------------------------------

--
-- Table structure for table `routes`
--

CREATE TABLE IF NOT EXISTS `routes` (
  `route_id` bigint(20) NOT NULL AUTO_INCREMENT,
  `flight` varchar(7) NOT NULL,
  `from` varchar(4) NOT NULL,
  `to` varchar(4) NOT NULL,
  `alternative` varchar(4) DEFAULT NULL,
  `etd` varchar(4) DEFAULT NULL,
  `eta` varchar(4) DEFAULT NULL,
  `fleettype_id` int(10) DEFAULT NULL,
  `pax` int(11) DEFAULT NULL,
  `price` int(11) DEFAULT NULL,
  `flproute` varchar(500) NOT NULL,
  `comments` varchar(500) DEFAULT NULL,
  `booked` tinyint(4) NOT NULL,
  `cargo` varchar(10) NOT NULL,
  `fuel` bigint(20) NOT NULL DEFAULT '0',
  PRIMARY KEY (`route_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=31 ;

--
-- Dumping data for table `routes`
--

INSERT INTO `routes` (`route_id`, `flight`, `from`, `to`, `alternative`, `etd`, `eta`, `fleettype_id`, `pax`, `price`, `flproute`, `comments`, `booked`, `cargo`, `fuel`) VALUES
(29, 'AAL1123', 'LEVX', 'KLAX', NULL, NULL, NULL, NULL, NULL, NULL, '', '', 0, '', 0),
(30, 'ALL1236', 'KLAX', 'LEMD', NULL, NULL, NULL, NULL, NULL, NULL, '', '', 0, '', 0);

PD: Si le hago

Código PHP:

Ver originalecho mysql_num_rows($query5);

y esta en from o to. No da resultado y si esta en otro te dará como mínimo 0. De la otra manera no pone nada.

quinqui · #16 (**permalink**) 04/07/2013, 06:58

¿Tienes un campo llamado from? Uhm, cuando nombras tablas y campos con palabras reservadas de lenguaje, tienes que invocarlos entrecomillados. Algo así:

Código sql:

Ver originalSELECT * FROM routes WHERE `from` = '$icao'

Ojalá sea ese no más el error, así podrás avanzar :)
Saludos!

carlosuc99 · #17 (**permalink**) 04/07/2013, 07:50

Bueno, bueno... Muchas gracias a todos!!! Especialmente a @quinqui por su incondicional ayuda.

Ya lo he arragleda. Parte de los problemas eran los query. Pero las polyline tampoco estaban bien. Al tener el mismo nombre sólo quedaba la última polyline para el último marker así que les he dado un nombre único. No me ha hecho falta dárselos mediante un array. Si no que simplemente les añadí el contenido de una variable.

Este es el código final de mi mapa:

Código PHP:

Ver original<?php
include('db_login.php');
      
      $connection = mysql_connect($db_host, $db_username, $db_password);
      if (!$connection){
      die ("Eror connecting database: <br/>". mysql_error());
      } 
    
      $db_select = mysql_select_db($db_database);
      if (!$db_select){
      die ("Database Error: <br/>". mysql_error());
      }
 
$query = mysql_query("SELECT * FROM routes"); 
 
?> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"> 
</script> 
<script type="text/javascript"> 
 
 
window.onload = function () {
  var options = {
    zoom: 5,
    center: new google.maps.LatLng(40.84706, -2.944336),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 
  map = new google.maps.Map(document.getElementById('map_canvas'), options);
 
  
  <?php 
        for($i = 0; $i < mysql_num_rows($query); $i++){
            $icao = mysql_result($query, $i, 'from');
            $query2 = mysql_query("SELECT * FROM airports WHERE icao='$icao'");
            $latitude = mysql_result($query2, 0, 'latitude');
            $longitude = mysql_result($query2, 0, 'longitude'); 
            $city = mysql_result($query2, 0, 'city');
        ?> 
  var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
  var image = 'http://i46.tinypic.com/33zbm09.png';
  var latLonCenter = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
  marker<?php echo $icao; ?> = new google.maps.Marker({
    position: latLonCenter,
    map: map,
    draggable: false,
    icon: image,
    title: '<?php echo $icao; ?> - <?php echo $city; ?>',
    Airport1: Airport1
  });
 
    var infowindow<?php echo $icao; ?> = new google.maps.InfoWindow({
    content: Airport1
    });
    
    <?php
    $query4 = mysql_query("SELECT * FROM routes WHERE `from`='$icao'");
    
    
    for($y = 0; $y < mysql_num_rows($query4); $y++){
    $destination = mysql_result($query4, $y, 'to');
    $query5 = mysql_query("SELECT * FROM airports WHERE icao='$destination'");
    $latitude_destination = mysql_result($query5, 0, 'latitude');
    $longitude_destination = mysql_result($query5, 0, 'longitude'); 
    ?>
    
    var PolyLine<?php echo $destination;?> = new google.maps.Polyline({
        strokeColor: "#FF0000",
        strokeOpacity: 2.0,
        strokeWeight: 2
    });
 
    var polyCords<?php echo $destination;?> = [
    new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    new google.maps.LatLng(<?php echo $latitude_destination; ?>, <?php echo $longitude_destination; ?>)
    ];
    
 
    google.maps.event.addListener(marker<?php echo $icao; ?>, 'click', function() {
    <?php for($z = 0; $z < mysql_num_rows($query); $z++){
    $destination_delete = mysql_result($query, $z, 'to');?>
    
    PolyLine<?php echo $destination_delete;?>.setMap(null);
    
    <?php } ?>
 
    PolyLine<?php echo $destination;?>.setPath(polyCords<?php echo $destination;?>);
 
    PolyLine<?php echo $destination;?>.setMap(map);
    });
    
    google.maps.event.addListener(marker<?php echo $icao; ?>, 'click', function () {
      var n = 1;
      var infowindow<?php echo $icao; ?> = new google.maps.InfoWindow({
        content: "",
        maxWidth: 320,  
        zIndex: n 
      });
      
      infowindow<?php echo $icao; ?>.setContent(this.Airport1);
      infowindow<?php echo $icao; ?>.setZIndex(n++); 
      infowindow<?php echo $icao; ?>.open(map, marker<?php echo $icao; ?>);
    });
 
<?php } } ?>
 
 
 
}
</script> 
</head>  
<body> 
<center><div id="map_canvas" style="width:850px; height:560px;"></div></center> 
</body>

quinqui · #18 (**permalink**) 04/07/2013, 08:10

Ah, pues perfecto! Efectivamente, siendo php el que escribe el código JS, pues no tenía que ser necesariamente un array, sino también variables independientes. Qué bueno que te haya resultado, cuando trabajé con esta api me divertí muchísimo, aunque fue hace muchos años ^^...........

Saludos!