Google maps Mostrar globo de texto de marcador con un enlace <a href

Brian_91 · #1 (**permalink**) 27/09/2009, 13:37

Hola, les cuento mi problema, estoy usando php y mysql, en la base de datos guardo las coordenadas de sucursales, luego muestro una lista con todas las sucursales que se encontraron en la busqueda que realice el cliente, y quisiera que al clickear sobre una de ellas, con un enlace pueda centrar el mapa sobre el marcador que tengo ubicado en el mapa y desplegar el globo de texto con dirección, tel,etc.

Lo que deberia hacer supongo es jecutar el evento click del marcador de esa sucursal, pero ese es mi problema.

En este .php, voy armando el script con las coordenadas de sucursales y agrego marcadores con su globo de texto:

Código PHP:

 
 <script type="text/javascript">

 
    //<![CDATA[

 
function load() {

      if (GBrowserIsCompatible()) {

        var map = new GMap2(document.getElementById("map"));

        map.setCenter(new GLatLng(-32.954597288751664,-55.865478515625), 6);

        map.addControl(new GMapTypeControl());

        map.addControl(new GSmallMapControl());

 //       map.addControl(new GScaleControl());

        map.addControl(new GOverviewMapControl());

        map.setMapType(G_NORMAL_MAP);

        function addtag(point, address) {

        var marker = new GMarker(point);

        

        GEvent.addListener(marker, "click", function() {

    marker.openInfoWindowHtml(address); } );

        return marker;

        }

         <?php

         include_once("./include/connection.php");

        conectar();

        $sql="select succoordenadas,sucmarcadortexto,sucdir from sucursal";//coordenadas

        $result=mysql_query($sql);

        

        while($row=mysql_fetch_assoc($result)){

            echo "var point2 = new GLatLng(".$row['succoordenadas'].");\n";

            echo "var address2 = '<img src=\"imagenes/logo.jpg\" width=\"200\" height=\"50\" /><br/><font color=#A0E01E size=2><b>".$row['sucmarcadortexto']."</b></font><br /><font size=2>".$row['sucdir']."</font><br /><br />Teléfono: 928 222 345<br />';\n";

            echo "var marker2 = addtag(point2, address2);\n";

            echo "map.addOverlay(marker2);\n";

            echo"GEvent.trigger(marker2,\"click\");\n";

        }

        ?>

      }

    else {

      alert("Sorry, the Google Maps API is not compatible with this browser");}  

    }

 
 
    //]]>

    </script>

Esta es la funcion que me despliega dicho texto:

Código PHP:

  GEvent.addListener(marker, "click", function() {

    marker.openInfoWindowHtml(address); } );

        return marker;

        }

En esta imagen se entiende mejor, tengo la lista de sucursales a la izquierda y me gustaria que al clickear sobre una de ellas se despliege el globo de texto en el mapa.

img515.imageshack.us/img515/5649/mapw.png no puedo poner links sorry cut & paste por favor, soy nuevo

.

Desde ya gracias, espero me puedan ayudar.

Brian_91 · #2 (**permalink**) 04/10/2009, 23:17

No encontre nada googleando, pero toqueteando me salio

Dejo el codigo, x si a alguien le sirve, aunque no tuve respuesta pero ..... me soluciono bastantes problemas este foro asi que hay que ser agradecido

Código PHP:

 
<html>

<head>





<script src="api google  + key sensor=false" type="text/javascript"></script>
            
  
    <script type="text/javascript">

    //<![CDATA[
var map;
var marker;    
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 1);
        map.addControl(new GMapTypeControl());
        map.addControl(new GSmallMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        map.setMapType(G_NORMAL_MAP);
      }
      
      function addtag(point, address) {
        marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(address); } );
        return marker;
        }
         <?php
         include_once("include/connection.php");
        conectar();
        
        for($x=0; $x<=$_GET['sucs'];$x++){
                $sql="select sucid,succoordenadas,sucmarcadortexto,sucdir from sucursal where succoordenadas<>'empty' and sucid=".$_GET["suc$x"]; //coordenadas
                $result=mysql_query($sql);
                $filas=mysql_num_rows($result);
                
                while($row=mysql_fetch_assoc($result)){
                    $coordenadas[]=$row['succoordenadas'];
                    $marcador_texto[]=$row['sucmarcadortexto'];
                    $direccion[]=$row['sucdir'];
                    $sucid[]=$row['sucid'];
                    
                }
        }    
        
        for($i=0;$i<$filas;$i++){
                echo "var point2 = new GLatLng(".$coordenadas[$i].");\n";
                echo "var address2 = '<img src=\"imagenes/logo.jpg\" width=\"200\" height=\"50\" /><br/><font color=#A0E01E size=2><b>".$marcador_texto[$i]."</b></font><br /><font size=2>".$direccion[$i]."</font><br /><br />Teléfono: 928 222 345<br />';\n";
                echo "var marker2 = addtag(point2, address2);\n";
                echo "map.addOverlay(marker2);\n";
                echo"GEvent.trigger(marker2,\"click\");\n";
        }
        ?>
      
    }
    
    <?php
    for($z=0;$z<$filas;$z++){
        $function = preg_replace("/ /","a",$marcador_texto[$z]);
        echo"function ".$function."() {\n";    
        echo"map.setCenter(new GLatLng(".$coordenadas[$z]."), 10);\n";
        echo "var address2 = '<img src=\"imagenes/logo.jpg\" width=\"200\" height=\"50\" /><br/><font color=#A0E01E size=2><b>".$marcador_texto[$z]."</b></font><br /><font size=2>".$direccion[$z]."</font><br /><br />Teléfono: 928 222 345<br />';\n";
        
        
        echo"map.openInfoWindow(map.getCenter(),(address2));\n";
        echo"}\n";
        //
    }
    ?>
    
    //
    
    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()" style="background-color:black;">
   <table>
       <tr>
            <td><h2 style="font:italic 24px Georgia, 'Times New Roman', Times, serif;color:#B8F84E;letter-spacing:-1px;">Hoteles</h2>
                <div style="width:150px;height:382px;overflow:auto;background-color:lightgrey;">
                <?php
                for($t=0;$t<$filas;$t++){
                    $var2 = preg_replace("/ /","a",$marcador_texto[$t]);
                    echo"<form action=\"\" onsubmit=\"".$var2."(); return false\">";
                        echo"<input type=\"submit\" value=\"".$marcador_texto[$t]."\" style=\"border:1px solid green;background-color:grey;\" /><br>";
                    echo"</form>";
                }
                ?>
                </div>
            </td>
            <td>
                    <div id="map_canvas" style="width: 750px; height: 430px" style=""></div>
            </td>
       </tr>
   </table>
   
  </body>
</html>

joaowizard · #3 (**permalink**) 05/10/2009, 16:42

buenno está !!! gracias ...

Brian_91 · #4 (**permalink**) 05/10/2009, 17:50

Edite porque habia un error en los contadores "for".
Funciona asi, mando el id de las sucursales con un enlace <a href="mapa.php?suc0=1&suc1=28&sucs=1">link</a>

donde suc0 es la primer sucursal y el id es 1,suc1 segunda sucursal valor=2 la variable sucs contiene la cantidad de sucursales, yo lo muestro en un sexylightbox con jquery y no tengo problemas que me editen la url, en caso que editen la variable sucs daria error, igual se prodria pasar por $_SESSION[' sucs '].

Código PHP:

 
<html>

<head>





<script ***direccion de api mas key ***></script>
            
  
    <script type="text/javascript">

    //<![CDATA[
var map;
var marker;    
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 1);
        map.addControl(new GMapTypeControl());
        map.addControl(new GSmallMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        map.setMapType(G_NORMAL_MAP);
      }
      
      function addtag(point, address) {
        marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(address); } );
        return marker;
        }
         <?php
         include_once("include/connection.php");
        conectar();
        
        for($x=0; $x<=$_GET['sucs'];$x++){
                $sql="select sucid,succoordenadas,sucmarcadortexto,sucdir from sucursal where succoordenadas<>'empty' and sucid=".$_GET["suc$x"]; //coordenadas
                $result=mysql_query($sql);
                $filas=mysql_num_rows($result);
                
                while($row=mysql_fetch_assoc($result)){
                    $coordenadas[]=$row['succoordenadas'];
                    $marcador_texto[]=$row['sucmarcadortexto'];
                    $direccion[]=$row['sucdir'];
                    $sucid[]=$row['sucid'];
                    
                }
        }    
        
        for($i=0;$i<$filas;$i++){
                echo "var point2 = new GLatLng(".$coordenadas[$i].");\n";
                echo "var address2 = '<img src=\"imagenes/logo.jpg\" width=\"200\" height=\"50\" /><br/><font color=#A0E01E size=2><b>".$marcador_texto[$i]."</b></font><br /><font size=2>".$direccion[$i]."</font><br /><br />Teléfono: 928 222 345<br />';\n";
                echo "var marker2 = addtag(point2, address2);\n";
                echo "map.addOverlay(marker2);\n";
                echo"GEvent.trigger(marker2,\"click\");\n";
        }
        ?>
      
    }
    
    <?php
        
    for($z=0;$z<$filas;$z++){
        $function = preg_replace("/ /","a",$marcador_texto[$z]);
        $function= preg_replace("/0/","a",$function);
        $function= preg_replace("/1/","a",$function);
        $function= preg_replace("/2/","a",$function);
        $function= preg_replace("/3/","a",$function);
        $function= preg_replace("/4/","a",$function);
        $function= preg_replace("/5/","a",$function);
        $function= preg_replace("/6/","a",$function);
        $function= preg_replace("/7/","a",$function);
        $function= preg_replace("/8/","a",$function);
        $function= preg_replace("/9/","a",$function);
        
        
        echo"function ".$function."() {\n";    
        echo"map.setCenter(new GLatLng(".$coordenadas[$z]."), 10);\n";
        echo "var address2 = '<img src=\"imagenes/logo.jpg\" width=\"200\" height=\"50\" /><br/><font color=#A0E01E size=2><b>".$marcador_texto[$z]."</b></font><br /><font size=2>".$direccion[$z]."</font><br /><br />Teléfono: 928 222 345<br />';\n";
        
        
        echo"map.openInfoWindow(map.getCenter(),(address2));\n";
        echo"}\n";
        //
    }
    ?>
    
    //
    
    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()" style="background-color:black;">
  <?php echo $marcador_texto[1]." ".$marcador_texto[0]; ?>
   <table>
       <tr>
            <td><h2 style="font:italic 24px Georgia, 'Times New Roman', Times, serif;color:#B8F84E;letter-spacing:-1px;">Hoteles</h2>
                <div style="width:150px;height:382px;overflow:auto;background-color:lightgrey;">
                <?php
                for($t=0;$t<$filas;$t++){
                    $var2 = preg_replace("/ /","a",$marcador_texto[$t]);
                    echo"<form action=\"\" onsubmit=\"".$var2."(); return false\">";
                        echo"<input type=\"submit\" value=\"".$marcador_texto[$t]."\" style=\"border:1px solid lightgrey;background-color:lightgrey;color:white\" /><br>";
                    echo"</form>";
                }
                ?>
                </div>
            </td>
            <td>
                    <div id="map_canvas" style="width: 750px; height: 430px" style=""></div>
            </td>
       </tr>
   </table>
   
  </body>
</html>