For PHP en API Google Maps

[carlosuc99]

Iniciado por txemaarbulo

Como te decía más arriba, personalmente desarrollo el php fuera del javascript, tomando los valores del primero mediante campos ocultos u otros archivos (XML preferentremente).

Tomando tu código: prueba mediante alert comprobar que infowindows recoge lo que deseas. Para ello, inmediatamente después de var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>'; despliega el alert:

Código Javascript:

var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
alert (Airport1);
 

Se repetirá el alert tantas veces como marcadores tengas.

Si te funciona y es lo que quieres, elimina el alert y cambia:

Código Javascript:

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });
 

por

Código Javascript:

google.maps.event.addListener(marker, 'click', function () {
      var n = 1;
      var infowindow = new google.maps.InfoWindow({
        content: "",
        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);
    });
 

Si te funciona, envía un enlace para verlo. Como te dije, tengo siempre mis dudas en el binomio PHP - Javascript.

Vaya, ahora tampoco va hahaha. Con el Alert me muestra los Alerts de todos los aeropuertos correctamente. Pero al pulsar para mi desilusión (jeje) no pasa nada en ningún aeropuerto.

Lo he dejado así:

Código Javascript:

<?php
 
$query = mysql_query("SELECT * FROM Airports") or die('No se ha podido encontrar el origen'); 
 
?> 
    <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++){
            $lat = mysql_result($query, $i, 'Lat'); 
            $lon = mysql_result($query, $i, 'Lon'); 
            $icao = mysql_result($query, $i, 'ICAO'); 
            $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; ?>);
  marker = new google.maps.Marker({
    position: latLonCenter,
    map: map,
    draggable: false,
    icon: image,
    title: '<?php echo $icao; ?> - <?php echo $city; ?>'
  });
 
 
    var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
 
    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>
 

Si quieres la URL te la dejo por privado.