www. La Mandarina Mecánica .es

Google Maps fue una de las primeras aplicaciones basadas en AJAX de uso masivo por parte de los usuarios.

Google como casi siempre, nos ofrece de forma gratuita un API con la que poder desarrollar aplicaciones a medida basadas en Google Maps, con esto podemos integrar sus mapas en nuestras páginas web o en otras aplicaciones.

Para poder utilizar la API de Google Maps, es necesario obtener una ‘key’, esta es personal y única para cada sitio web. Tienes que tener una cuenta en google (vale con el gmail).   Puedes conseguir la tuya en http://www.google.com/apis/maps/ Necesitas una ‘key’ para cada dominio diferente, pero puedes utilizar esa ‘key’ para cualquier página que se encuentre bajo tu domino por ejem.: www.lamandarinamecanica.es /utiliza_la_key.

Una vez obtenida la clave tienes que cargar el script que ellos te proporcionan, los parámetros que carga son v(versión del API) , hl (lenguaje), sensor (true o false), key (pues eso).

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;keyqjkejefDA_

3juVpBuLWxRdZD5I4CcA13Hy9fhqe3dvQarqwxT2UpdNMF-NNfKklñuZCb6f4c-KHg” type=”text/javascript”></script>

Luego lo llamas desde donde quieras que se vea,  dentro de un iframe, div o cualquier contenedor.

 <div id=”mapa” style=”width: 350px; height: 350px”></div>

Y colocamos este script dentro del contenedor (div)

Donde GPoint((cordenada, ordenada)nivel_de_Zoom)), el nivel de zoom puede variar entre 1 y 18, pero no todos los sitios tienen el nivel de detalle 18.

  <script type=”text/javascript”>    

//<![CDATA[

window.onload=showMap;function showMap(){  

var map = new GMap(document.getElementById("mapa"));

map.addControl(new GSmallMapControl()); 

map.centerAndZoom(new GPoint(-3.713379,40.396764), 8);

 map.addOverlay(new GMarker(new GPoint(-3.713379,40.396764))); }   

//]]>  

</script>

Y aquí está el google Maps en tu web. Ahora posicionado en la Elipa.  

En esta dirección Google Maps tiene toda la documentación y algunos ejemplos.
http://www.google.com/apis/maps/documentation/

Desde hace tiempo he estado oyendo hablar de jQuery, la verdad es que no lo había probado, y NO soy fan de java script.

¿Qué es jQuery?
Es un framework de javaScript en el cual vienen un montón de funciones capaces de implementar muchas mejoras en nuestra pagina web. Se pueden hacer efectos muy buenos, también validaciones asíncronas con AJAX….

jquery , accordion

JQuery viene instalado en wordpress en wp-admin/js desde hace ya algunas versiones(mínimo la 2.5). JQuery y Thickbox, éstos son los encargados de mostrar el efecto similar a lightbox. Esto ocurre cuando buscamos una imagen para subir y se oscurece la pantalla mostrando solo el menú contextual.
Bien pues después de echar un ojo a las librerías jQuery, Mototols solo puede decir que me ha encantado, yo creía que estos efectos solo estaban al alcance de flash y similares.
(Para ejemplo la nieve que tenemos puesta estas navidades en el Blog, y los menús que están hechos con el famoso ‘accordion’).

¿Que necesitamos para utilizar jQuery?

Obviamente asegurarnos de cargar las librerías (sino tienes wordpress o es menor que 2.5 tendrás que subirtelas a tu servidor), en alguna parte de tu Web tienes que cargar las librerías con algo parecido a:
<script type=”text/javascript” src=”/ruta/donde/esta/jquery.js”></script>
Aunque también puedes cargar las que google pone a tu disposición:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js” type=”text/javascript”></script>

En este ejemplo con jQuery, quiero realizar el típico menú acordeon, en tres pasos.
PASO UNO.
Primero subo el css (hoja de estilo).
Algo parecido a:

accordion {
width: 200px;
border-bottom: solid 1px #24c3c4;
}
.accordion h3 {
background: #e9e7e7;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica,  Arial;
border: solid 1px #c4c2c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}

En mi caso lo agregué directamente al css del tema, o sea en “style.css” que se que wordpress lo carga siempre.
Así me ahorro tener que cargar la hoja de estilos que he subido. Si no lo haces así tendrás que cargarla.
PASO DOS.
Luego pongo los elementos del acordeon.

<div class=”accordion”>
<h3>Blog</h3>
<p>el texto</p>
<h3>Entradas</h3>
<p>el texto</p>
<h3>Encuestas</h3>
<p>el texto</p>
<h3>Objetos</h3>
<p>el texto</p>
<h3>Herramientas</h3>
<p>el texto</p>
</div>

PASO TRES.
Y por último, pongo como quiero que funcione.

<script type=”text/javascript”>
$(document).ready(function(){
$(”.accordion h3:first”).addClass(”active”);
$(”.accordion p:first(:first)”).hide();
$(”.accordion p:not(:first)”).hide();
$(”.accordion h3″).click(function(){
$(this).next(”p”).slideToggle(”slow”)
.siblings(”p:visible”).slideUp(”slow”);
$(this).toggleClass(”active”);
$(this).siblings(”h3″).removeClass(”active”);
});
});
</script>

Si queréis hacerlo mas fácil todavía, con wordpress podéis añadir un widget y copiar en él, el paso tres seguido del paso dos. Es un poco más “desordenado”, pero tienes el mismo resultado.