Estoy trabajando con google maps v3, php y mysql.
Tengo mis puntos en mi DB, hago las consultas bien, pero quiero que al hacer clic en un punto no me muestre la típica ventana de InfoWindows, sino que estoy tratando de sacar los resultados por ID de mi base de datos a un Iframe.
Mi problema es que al hacer clic en cualquier punto me muestra solo la información del último ID de mi tabla, y no me muestra los demás. He estado leyendo que es posible hacerlo con Ajax, pero no tengo mucha idea de como hacerlo.
Necesito que me ayuden porfavor, estaré muy agradecido si alguien me da una orientación o un ejemplo.
Este es mi código donde muestro el Mapa:
index.php
Código
<?php //Quita las noticias //Incluyo el archivo de conexión require("../config/conexion.php"); $tabla = $_POST["tablas"]; if($tabla == "puntos") { $query = "SELECT * FROM puntos"; } } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../js/funciones.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> <script type="text/javascript"> function initialize() { var myOptions = { zoom: 15, center: new google.maps.LatLng(-44.117027, -24.619099), mapTypeId: google.maps.MapTypeId.ROADMAP }//Cierra myOptions var map = new google.maps.Map(document.getElementById("map"), myOptions); if($tabla == "puntos"){ ?> { ?> var myLatLng = new google.maps.LatLng(<?php echo $row['lat']; ?>, <?php echo $rsTurismo['lng']; ?>); var empresa = <?php echo "\"" . $row['empresa'] . "\""; ?>; var direccion = <?php echo "\"" . $row['direccion'] . "\""; ?>; var telefono = <?php echo "\"" . $row['telefono'] . "\""; ?>; var image = <?php echo "\"" . $row['icono']. "\""; ?>; //Vamos añaddiendo el marcador var marker = new google.maps.Marker( { position: myLatLng, draggable:false, animation: google.maps.Animation.DROP, map: map, icon: image });//Cerramos el maker var marcadores ='<b>Empresa:</b>' +empresa + '<br>' + '<b>Dirección:</b>' +direccion + '<br>' + '<b>Teléfono:</b>'+telefono; // Agregar ventana de información con evento MuestraInfo( marker, marcadores); //Función para mostrar mis datos function MuestraInfo(marker, msg) { // Crear ventana de información. var infowindow = new google.maps.InfoWindow({ content : msg }); // Crear evento para mostrar la ventana al dar click google.maps.event.addListener(marker, 'click', function(){ window.frames.resultado.location.href="info.php?id=<?php echo $row['id']; ?>"; //ACÁ ES DONDE ENVÍO EL RESULTADO A MI IFRAME de nombre "resultado". Acá me muestra solo el último ID }); } <?php } ?>/*Cierre del While*/ } $(document).ready(function() { initialize(); }); </script> ... Acá mi código html <html> .... <iframe name="resultado" width="260" height="200" align="left" frameborder="0" id="idifrm"> </iframe> </html>
El info.php es este:
Código
<?php require("../config/conexion.php"); $identificador = $_GET['id']; $query = "SELECT * FROM puntos WHERE id =$identificador"; ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="../css/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <h3>Resultados </h3> <table width="250" border="1"> <tr> <td width="73">Empresa</td> <td width="111"><?php echo $rs['empresa']; ?></td> </tr> <tr> <td>Direccion</td> <td><?php echo $rs['direccion']; ?></td> </tr> <tr> <td>Telefono</td> <td><?php echo $rs['telefono']; ?></td> </tr> <tr> <td>E-mail</td> <td><?php echo $rs['email']; ?></td> </tr> <?php } ?> </table>
Desde ya les agradezco me puedan ayudar
SandriCh