Google Maps no intrusivo

He aquí un ejemplo e javascript no intrusivo. En este caso es para los mapas de google maps.

El ejemplo esta en esta dirección

El metodo consiste en generar la imagen estática, como si no existiera javascript, y mas adelante, llamar a la funcion del js para que todos los tags img que tengan como class google_maps (o el que querais), coja esos parametros de la ruta de la imagen y te los transforme automaticamente y te de paso al control javascript haciendo click en la propia imagen estatica…

aqui un ejemplo:

El img que deberiamos generar seria algo parecido a esto:

<img src=”http://maps.google.com/staticmap?center=40.714728,-73.998672&amp;zoom=13&amp;size=500×300&amp;maptype=mobile&amp;markers=40.714728,-73.998672&amp;sensor=false&amp;key=” class=”google_map” />

Lo que daria paso a la siguiente imagen:

Tras esto, simplemente deberiamos añadir un par de scripts a nuestra pagina y estaria listo.

los scripts son:

<scriptsrc=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>

<script src=”http://fresnaza.es/unobtrusive-google-maps.jquery.js” type=”text/javascript”></script>

1.- http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

2.- unobtrusive-google-maps.jquery.js

El unobtrusive-google-maps.jquery.js podeis encontrarlo en este enlace. Ya viene preparado para que a la carga del documento,todas las img con class google_maps se les aplique el sript no intrusivo.

Un saludo

Advertisement