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:
- <script>
- $.fn.googlemap = function(){
- // author: Christian Salazar <christiansalazarh@gmail.com>
- var src='';
- $(this).each(function(){
- var z = $(this);
- var address = jQuery.trim(z.attr('streetnumber'))
- +'+'+jQuery.trim(z.attr('streetname'))
- +'+'+jQuery.trim(z.attr('cityname'))
- +'+'+jQuery.trim(z.attr('statecode'))
- +'+'+jQuery.trim(z.attr('zipcode'))
- ;
- src="https://maps.google.com/maps?"
- +"client=safari"
- +"&q="+address
- +"&oe=UTF-8&ie=UTF8&hq="
- +"&hnear="+address
- +"&gl=us"
- +"&z="+z.attr('zoom')
- +"&output=embed";
- z.html("<iframe src='"+src+"' width="+z.attr('width')+" height="
- +z.attr('height')+"></iframe>");
- });
- return src;
- }
- </script>
2. en alguna parte donde quieras mostrar un Mapa de Google pones este script:
- <div id='mapa' streetnumber='946' streetname='LAKE+DESTINY+RD'
- cityname='ALTAMONTE+SPRINGS' statecode='FL' zipcode='32714'
- zoom=18 width=500 height=300>
- </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.
- <div class='mapas' streetnumber='946' streetname='LAKE+DESTINY+RD'
- cityname='ALTAMONTE+SPRINGS' statecode='FL' zipcode='32714'
- zoom=18 width=500 height=300>
- </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:
- <ul id='mymaps'>
<li streetnumber='946' streetname='LAKE+DESTINY+RD' - cityname='ALTAMONTE+SPRINGS' statecode='FL' zipcode='32714'
- zoom=18 width=500 height=300>
- </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>");
