Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

[SOLUCIONADO] Google Maps en WP para mostrar direccion

Estas en el tema de Google Maps en WP para mostrar direccion en el foro de WordPress en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/07/2011, 14:00
 
Fecha de Ingreso: julio-2009
Ubicación: Argentinalandia
Mensajes: 339
Antigüedad: 10 años, 5 meses
Puntos: 15
De acuerdo Google Maps en WP para mostrar direccion

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
__________________
Mi Perfil y Blog estan en Yeow.com.ar ✰✰✰✰✰
Pero en WONDED.COM estan Mis Proyectos OpenSource ;-)

Última edición por pleter; 06/07/2011 a las 14:01 Razón: agrego links
  #2 (permalink)  
Antiguo 06/07/2011, 14:06
 
Fecha de Ingreso: julio-2009
Ubicación: Argentinalandia
Mensajes: 339
Antigüedad: 10 años, 5 meses
Puntos: 15
Respuesta: Google Maps en WP para mostrar direccion

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!
__________________
Mi Perfil y Blog estan en Yeow.com.ar ✰✰✰✰✰
Pero en WONDED.COM estan Mis Proyectos OpenSource ;-)
  #3 (permalink)  
Antiguo 06/07/2011, 14:16
 
Fecha de Ingreso: julio-2009
Ubicación: Argentinalandia
Mensajes: 339
Antigüedad: 10 años, 5 meses
Puntos: 15
Respuesta: Google Maps en WP para mostrar direccion

Cita:
Iniciado por pleter Ver Mensaje
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?
__________________
Mi Perfil y Blog estan en Yeow.com.ar ✰✰✰✰✰
Pero en WONDED.COM estan Mis Proyectos OpenSource ;-)
  #4 (permalink)  
Antiguo 06/07/2011, 14:38
 
Fecha de Ingreso: julio-2009
Ubicación: Argentinalandia
Mensajes: 339
Antigüedad: 10 años, 5 meses
Puntos: 15
Respuesta: Google Maps en WP para mostrar direccion

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!!!
__________________
Mi Perfil y Blog estan en Yeow.com.ar ✰✰✰✰✰
Pero en WONDED.COM estan Mis Proyectos OpenSource ;-)
  #5 (permalink)  
Antiguo 26/02/2013, 05:26
Avatar de demeNcys  
Fecha de Ingreso: junio-2009
Ubicación: Buenos Aires
Mensajes: 147
Antigüedad: 10 años, 5 meses
Puntos: 9
Respuesta: Google Maps en WP para mostrar direccion

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

Etiquetas: api, google, maps
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 17:20.