Página 1 de 1

Mostrar imagen dinámica al hacer OnClick

NotaPublicado: 2010-06-28 05:50 @284
por faisko
Hola amigos. Estoy con la API de Google Maps intentando que al hacer clic en uno de los puntos que cojo de la base de datos para mostrar la foto que tengo asignada a ese punto en otro div fuera del mapa.

Todo lo que es el código del mapa funciona bien, pero he intentado de muchas formas hacerlo y no doy con el quid. Haber si me podéis echar una mano en el planteamiento, gracias. En un comentario os muestro dónde iría el código.

Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <?php
  2. $query_rsGmap = "SELECT * FROM museos_prueba";
  3. $rsGmap = mysql_query($query_rsGmap, $link) or die(mysql_error());
  4. $row_rsGmap = mysql_fetch_assoc($rsGmap);
  5. $totalRows_rsGmap = mysql_num_rows($rsGmap);
  6. $marcadores = "[";
  7. if ($totalRows_rsGmap > 0) { // Show if recordset not empty
  8.  do {
  9.  if ($marcadores == "["){
  10.         $marcadores.= "{";
  11.  }else{
  12.         $marcadores.= ",{";
  13.  }
  14.  $marcadores.= "'latitud':".$row_rsGmap['latitud'].", 'longitud':".$row_rsGmap['longitud'].", 'nombre': '".$row_rsGmap['nombre']."'";
  15.  $marcadores.= "}";
  16.  } while ($row_rsGmap = mysql_fetch_assoc($rsGmap));
  17.  } // Show if recordset not empty
  18.  $marcadores.= "]";
  19.  
  20.  echo $marcadores;
  21.  ?>
  22.  
  23. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  24. <html xmlns="http://www.w3.org/1999/xhtml">
  25. <head>
  26. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  27. <title>Google Maps JavaScript API Example</title>
  28. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key= ABQIAAAAZqPP3UqvHFFs62KYqSnNkBTN7shGZJLt3_DZdAN6LJijc3LBPxQQ9RDci87FmPL05diXCsdh8_KrvA" type="text/javascript"></script>
  29. <script type="text/javascript">
  30. //<![CDATA[
  31. var centrarLatitud = 37.38264;
  32.    var centrarLongitud = -5.996295;
  33.    var zoomInicio = 14;
  34.    
  35.    var map;
  36.    
  37.    function adMarcador(latitud, longitud, descripcion) {
  38.    var marcador = new GMarker(new GLatLng(latitud, longitud));
  39.  
  40. //AKI IRIA LA SENTENCIA PARA MOSTRAR LA FOTO CUANDO HACEMOS CLICK  
  41.   GEvent.addListener(marcador, 'click',
  42.   function() {
  43.   marcador.openInfoWindowHtml(descripcion);
  44.   }
  45.   );
  46.    
  47.   map.addOverlay(marcador);
  48.   }
  49.    
  50.   function load() {
  51.   if (GBrowserIsCompatible()) {
  52.   map = new GMap2(document.getElementById("map"));
  53.   map.addControl(new GSmallMapControl());
  54.   map.setCenter(new GLatLng(centrarLatitud, centrarLongitud), zoomInicio);
  55.    marcadores = <?php echo $marcadores; ?>;
  56.    for(id in marcadores) {
  57.    adMarcador(marcadores[id].latitud, marcadores[id].longitud, marcadores[id].nombre);
  58.    alert(marcadores[id].latitud);
  59.    }
  60.    }
  61.    }
  62. //]]>
  63. </script>
  64. </head>
  65. <body onload='load()' onunload='GUnload()'>
  66. <div id="map" style="width: 500px; height: 300px"></div>
  67. <div  id="recarga"></div>
  68. </body>
  69. </html>
  70. <?php
  71. mysql_free_result($rsGmap);
  72. ?>
Coloreado en 0.002 segundos, usando GeSHi 1.0.8.4