[SOLUCIONADO] Google Maps en WP para mostrar direccion

pleter · #1 (**permalink**) 06/07/2011, 13:00

Buenos dias.

Andaba buscando una forma de insertar en un blog la direccion de varias bibliotecas de varias escuelas (si, soy el que publique unos dias atras como hacer las categorias para los libros de mi escuela) bueno.. ahora salio la idea de poner en un mapa la direccion de la biblioteca escolar y estoy guardando la direccion en una meta etiqueta de WP entonces la llamo con:

Código PHP:

<?php echo $web ; ?>

entonces de esa forma lo puedo poner en una tabla de la derecha que tiene el nombre, la direccion y el telefono.

ahora, volviendo al tema, quiero insertarlo en un mapa de Google e investigando bastante me tope con un script que se llama gaddress pero no logro hacerlo andar.

Introduje en el <header>

Código PHP:

      <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuPzVvblablabla-aca-la-api-de-google" type="text/javascript"></script>
    <script src="gaddress.js" type="text/javascript"></script>

luego en la parte del post coloque en single.php

Código PHP:

 
        <div id="map" style="width: 640px; height: 300px;"></div>
    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap(document.getElementById("map"));
      map.addControl(new GSmallMapControl());
    }

    function move( p, a ) {
      if ( p == null ) {
        alert( "Sin direccion, contactenos para mas informacion." );
      } else {
        map.centerAndZoom( p, 4 );
        var marker = new GMarker(p);
        map.addOverlay(marker);
        map.openInfoWindow(p, document.createTextNode(a));
      }
    }
    
    function address() {
      GAddress( document.getElementById("a").value, move );
      return false;
    }
    //]]>
    </script>
    <form action="" method="" onsubmit="return address();">
    <input type="text" id="a" size="40" value="<?php echo $web ; ?>"> <input type="submit" value="Buscar">
    </form>

y para rematar, el body lo hice

Código PHP:

  <body onload="address();">

para que llame al formulario cada vez que carga la pagina y muestre la direccion

el problema es que algo debo estar haciendo mal porque no sale ningun mapa, no solo que no lo ubica, sino que no sale el mapa ni nada

Alguien se da cuenta si estoy cometiendo algun error? o mejor aun...
Alguien utiliza algun otro modo para mostrar con un puntito rojo en google maps una direccion llamandola con el ECHO de la metaetiqueta?

Se agradece profundamente cualquier ayuda

Para todos aquellos interesados en el Script, les dejo el link del autor:
http://ejohn.org/projects/gaddress/

Gracias nuevamente

pleter · #2 (**permalink**) 06/07/2011, 13:06

por cierto y por las dudas ...
ya lei la informacion en otro post de aca:
http://www.forosdelweb.com/f91/como-...arte-i-411647/
pero ese es para la latitud y longitud y no me sirve,tengo que poder mostrar con la direccion, sino la bibliotecaria se muere jajaja vamos! que no todas las edades son las mismas para aprender y para hacer jeje

saludos de nuevo!

pleter · #3 (**permalink**) 06/07/2011, 13:16

Cita:

Iniciado por pleter

Buenos dias.

Andaba buscando una forma de insertar en un blog la direccion de varias bibliotecas de varias escuelas (si, soy el que publique unos dias atras como hacer las categorias para los libros de mi escuela) bueno.. ahora salio la idea de poner en un mapa la direccion de la biblioteca escolar y estoy guardando la direccion en una meta etiqueta de WP entonces la llamo con:

Código PHP:

<?php echo $web ; ?>

entonces de esa forma lo puedo poner en una tabla de la derecha que tiene el nombre, la direccion y el telefono.

ahora, volviendo al tema, quiero insertarlo en un mapa de Google e investigando bastante me tope con un script que se llama gaddress pero no logro hacerlo andar.

Introduje en el <header>

Código PHP:

      <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuPzVvblablabla-aca-la-api-de-google" type="text/javascript"></script> 
    <script src="gaddress.js" type="text/javascript"></script>

luego en la parte del post coloque en single.php

Código PHP:

 
        <div id="map" style="width: 640px; height: 300px;"></div> 
    <script type="text/javascript"> 
    //<![CDATA[ 
 
    if (GBrowserIsCompatible()) { 
      var map = new GMap(document.getElementById("map")); 
      map.addControl(new GSmallMapControl()); 
    } 
 
    function move( p, a ) { 
      if ( p == null ) { 
        alert( "Sin direccion, contactenos para mas informacion." ); 
      } else { 
        map.centerAndZoom( p, 4 ); 
        var marker = new GMarker(p); 
        map.addOverlay(marker); 
        map.openInfoWindow(p, document.createTextNode(a)); 
      } 
    } 
     
    function address() { 
      GAddress( document.getElementById("a").value, move ); 
      return false; 
    } 
    //]]> 
    </script> 
    <form action="" method="" onsubmit="return address();"> 
    <input type="text" id="a" size="40" value="<?php echo $web ; ?>"> <input type="submit" value="Buscar"> 
    </form>

y para rematar, el body lo hice

Código PHP:

  <body onload="address();">

para que llame al formulario cada vez que carga la pagina y muestre la direccion

el problema es que algo debo estar haciendo mal porque no sale ningun mapa, no solo que no lo ubica, sino que no sale el mapa ni nada

Alguien se da cuenta si estoy cometiendo algun error? o mejor aun...
Alguien utiliza algun otro modo para mostrar con un puntito rojo en google maps una direccion llamandola con el ECHO de la metaetiqueta?

Se agradece profundamente cualquier ayuda

Para todos aquellos interesados en el Script, les dejo el link del autor:
http://ejohn.org/projects/gaddress/

Gracias nuevamente

-----------------------------------------------------------
Actualizacion:
Naaaa! que tonto soy! el script es solo valido para direcciones en Estados Unidos, no sirve para otro pais :(
Alguien tiene idea entonces como puedo hacer esto? o es casi imposible pasarle una direccion (con el ECHO) y que me lo devuelva en el mapa?

pleter · #4 (**permalink**) 06/07/2011, 13:38

Solucion
Dejo la solucion a modo de bitacora para cualquiera que lo necesite

Simplemente coloque este codigo donde quieran que aparezca el mapa

Simplemente coloquen su API de Google Maps y en direccion coloquen ladireccion que quieren mostrar, en mi caso, coloco la funcion PHP que devuelve la direccion

Código PHP:

 
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ACALAAPIDEGOOGLEMAP"></script> 
    <script type="text/javascript"> 
     var direccion      = "<?php echo $direccion ; ?>"; 
     var direccion2     = ""; 
     var textInfoWindow = ''; 
     var coord1         = ""; 
     var coord2         = ""; 
     var levelZoom      = 15; 
     var showControls   = true; 
     var showMarker     = true; 
 
     var map      = null; 
     var geocoder = null; 
 
     //---------------------------------------------------- 
     function loadMap() 
     { 
       map = new GMap2(document.getElementById("map")); 
 
       // Tools 
       if(showControls) { 
          map.addControl(new GLargeMapControl()); 
          map.addControl(new GMapTypeControl()); 
       } 
 
       // 
       geocoder = new GClientGeocoder(); 
       //map.clearOverlays(); 
 
       if(coord1 && coord1) { 
          addCoordToMap(); 
       } 
       else if(direccion)   { 
          geocoder.getLocations(direccion, addAddressToMap); 
       } 
       else { 
          alert("Error: dirección vacía."); 
          return; 
       } 
     } 
     //---------------------------------------------------- 
     function addAddressToMap(response) 
     { 
       if(!response || response.Status.code != 200) { 
         //alert("KO: "+direccion); 
 
         if(direccion == direccion2) { 
            map.setCenter(new GLatLng(40, -3), 5); 
         } 
         // Dirección alternativa 
         else if(direccion2 != '') { 
            direccion = direccion2; 
            loadMap(); 
         } 
         else { 
            map.setCenter(new GLatLng(40, -3), 5); 
         } 
       } 
       else { 
         //alert("OK: "+direccion); 
         place = response.Placemark[0]; 
 
         // Situar mapa 
         map.setCenter(new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]), levelZoom); 
 
         // Marcador 
         if(showMarker) { 
            var point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); 
            map.addOverlay(new GMarker(point)); 
         } 
 
         // Text info 
         if(textInfoWindow) map.openInfoWindowHtml(map.getCenter(), textInfoWindow); 
       } 
     } 
     //---------------------------------------------------- 
     function addCoordToMap() 
     { 
       map.setCenter(new GLatLng(coord1, coord2), levelZoom); 
 
       // Marcador 
       if(showMarker) { 
          var point = new GLatLng(coord1, coord2); 
          map.addOverlay(new GMarker(point)); 
       } 
        
       // Text info 
       if(textInfoWindow) map.openInfoWindowHtml(map.getCenter(), textInfoWindow); 
     } 
     //---------------------------------------------------- 
    </script> 
    <div id="map" style="border: 1px solid #999; width:669px; height:210px"></div> 
    <script>window.onload=loadMap;</script>

Gracias a todos por entrar aunque sea a leer y espero que le sirva a alguien mas que lo ande buscando

Saludos!!!

demeNcys · #5 (**permalink**) 26/02/2013, 05:26

Te agradesco!, me sirvio muchisimo, lo venia buscando hace un tiempo y no entendia de que manera se hacia!