miércoles, 10 de abril de 2013

Creando mapas de google usando jQuery


Extensión jQuery para crear mapas de google basados en direcciones.

Esta es una extensión para jQuery que sirve para crear mapas de google basados en una dirección humanamente legible.

Es muy simple de implementar:

1. copia este script jquery en alguna parte:


  1. <script>
  2. $.fn.googlemap = function(){
  3.         // author: Christian Salazar <christiansalazarh@gmail.com>
  4.         var src='';
  5.         $(this).each(function(){
  6.         var z = $(this);
  7.         var address = jQuery.trim(z.attr('streetnumber'))
  8.                 +'+'+jQuery.trim(z.attr('streetname'))
  9.                 +'+'+jQuery.trim(z.attr('cityname'))
  10.                 +'+'+jQuery.trim(z.attr('statecode'))
  11.                 +'+'+jQuery.trim(z.attr('zipcode'))
  12.         ;
  13.         src="https://maps.google.com/maps?"
  14.                 +"client=safari"
  15.                 +"&q="+address
  16.                 +"&oe=UTF-8&ie=UTF8&hq="
  17.                 +"&hnear="+address
  18.                 +"&gl=us"
  19.                 +"&z="+z.attr('zoom')
  20.                 +"&output=embed";
  21.                 z.html("<iframe src='"+src+"' width="+z.attr('width')+" height="
  22.                 +z.attr('height')+"></iframe>");
  23.         });
  24.         return src;
  25. }
  26. </script>


2. en alguna parte donde quieras mostrar un Mapa de Google pones este script:


  1. <div id='mapa' streetnumber='946' streetname='LAKE+DESTINY+RD'
  2.         cityname='ALTAMONTE+SPRINGS' statecode='FL' zipcode='32714'
  3.         zoom=18 width=500 height=300>
  4. </div>


3. Puedes poner varios mapas, con distintas direcciones, es decir, repitiendo el paso 2 por cada dirección que quieras mostrar,  en este ejemplo usé solo una, pero pudiera ser una lista, ahora usamos jQuery de nuevo para convertir esa cosa en un mapa:

<script>$('#mapa').googlemap();</script>

4. El resultado será:



Múltiples Direcciones

Si fuesen varias direcciones, como este caso que muestro (debajo de este texto), notarás que no uso "id='mapa'", sino un identificador de clase: "class='mapas'", eso es con el objeto de que el script de jquery pueda ser usado asi:

$(".mapas").googlemap();   // notas el punto antes de "mapas"  ? es importante.

lo que hará será que a todos los elementos que tengan la clase "mapas" los convertira en un mapa de google independiente.


  1. <div class='mapas' streetnumber='946' streetname='LAKE+DESTINY+RD'
  2.         cityname='ALTAMONTE+SPRINGS' statecode='FL' zipcode='32714'
  3.         zoom=18 width=500 height=300>
  4. </div>

    <div class='mapas' streetnumber='946' streetname='LAKE+DESTINY+RD'....bla

    <div class='mapas' streetnumber='946' streetname='LAKE+DESTINY+RD'....bla


Otra forma es crear los mapas mediante un elemento UL:


  1. <ul id='mymaps'>
    <li streetnumber='946' streetname='LAKE+DESTINY+RD'
  2.         cityname='ALTAMONTE+SPRINGS' statecode='FL' zipcode='32714'
  3.         zoom=18 width=500 height=300>
  4. </li>
    <li streetnumber='1002' ....bla....</li>
    <li streetnumber='9005' ....bla....</li>

    </ul>

    SIMPLEMENTE:

    $('#mymaps li').googlemap();



Extensión jQuery

La función $.fn.googlemap() es una extensión para jQuery. se denomina así por el uso de "$.fn", lo cual hace que podamos pedirle a un DIV que se convierta en un google map al ser reconocida la extensión.

Extras

var url = $("#mapa").googlemap();   // retorna la URL generada

podria ser usada para crear un vinculo de agrandamiento de mapa:

$("#mapa").parent().append("<a href="+url+">agrandar este mapa</a>");




    4 comentarios:

    1. Excelente!!! pero hay alguna manera de que si no encuentra la dirección solicitada, se vaya a una por defecto?? o por ejemplo, si no encuentra la calle, se sitúe en la ciudad??

      ResponderEliminar
      Respuestas
      1. hola, para eso en cambio es mejor trabajar directo con el API de Google para mapas. Esta via es una "via rapida",

        Eliminar
    2. como hago para asignarle el valor de una base de datos a streetname?? graicas

      ResponderEliminar