Como prometí en un post anterior, aquí va el pequeño artículo sobre el uso de google maps API.
¿Que es?
La API de Google Maps permite incrustar Google Maps en páginas web mediante JavaScript.
Se pueden añadir superposiciones al mapa, como marcadores y líneas poligonales, y mostrar “ventanas de información” sombreadas, etc…
Es un servicio gratuito, disponible tanto para sitios web públicos como no públicos (intranet, etc…).
Se pueden leer las condiciones de uso de la google map api
Para empezar a usar la API, es necesario registrarse como usuario de la API solicitando un nº de API en el enlace:
http://code.google.com/apis/maps/signup.html
Cada nº de API solo es válido para un mismo directorio o dominio. (No se puede utilizar el mismo número para 2 páginas diferentes).
Al proceso de traducción de una dirección que introduce un usuario por un punto en un mapa se le llama “geocoding”.
Existe un límite diario en el que 1 sola ip puede realizar estas peticiones (con la API standard unas 15.000 al día).
Si el sitio web espera tener más peticiones de este tipo, es necesario estudiar más detenidamente la implementación (añadiendo caché / otros servicios de geolocalización no-google, etc…), ya que un uso indebido puede ocasionar la denegación de uso del servicio de google-maps permanentemente.
Si esperas más de 500.000 vistas de página al día, es es conveniente contactar con google-maps para que acondicionen adecuadamente el tráfico de peticiones para nuestro número de API.
Es un servicio BETA que google actualiza muy a menudo, con lo que es recomendable mantener al día nuestra implementación.
Existe una solución empresarial en la que se amplian o eliminan algunas de las limitaciones de la API general. Se puede consultar más información en su apartado para google maps enterprise.
MODO DE EMPLEO
La API se puede utilizar tanto en flash (desarrollo de programas Flex) como en javascript.
Una vez que solicitamos y obtenemos nuestro número de API para nuestro sitio web, lo usaremos de la siguiente forma.
key de ejemplo: aAbBcCdDeEfFgGhHiIjJ
Web de ejemplo (la que solicita la key): http://alvarorc.wordpress.com/
Al ser un blog en un servidor exterior, NO puedo utilizar este ejemplo ya que necesito poder
acceder al código fuente (páginas html) para introducir el código javascript.
La documentación de la API de google maps es extensa, y para un mejor aprovechamiento de las posiblidades e ideas, es recomendable leerla y visitar alguna página con ejemplos:
Ver ejemplos uso de google maps API
Permite hacer desde las cosas más simples como añadir un marcador que al pulsarlo abra una caja
de texto, hasta las más complejas (panoramio/flickr/etc…)
El límite solo está en la imaginación de cada uno.
Ejemplo: En el siguiente código, he creado una página web con un google map, en el cual hay un marcador apuntando al club de márketing que al hacer click en él
se muestra una cabezera con 2 imágenes y algo de texto.
Es importante recordar que cada usuario de la api de google maps, ha de utilizar su propia key de la google API.
Para ver un ejemplo simple funcionando, copiar el siguiente código html en un nuevo documento de texto, y cambiarle la extensión a .html
Ejemplo
Los comentarios en el código javascript están precedidos por dos barras // en el apartado de javascript y de los tabls <!– texto_descriptivo –> para
la explicación de las funcionalidades del código.
<html>
<head>
<title>Localización del Club de Marketing de Navarra</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=aAbBcCdDeEfFgGhHiIjJ” type=”text/javascript”></script>
</head>
<body onunload=”GUnload()”>
<!– El mapa se muestra entro del elemento div –>
<div id=”map” style=”width: 650px; height: 450px”></div>
<!– Si el navegador no soporta Javascript, informamos al usuario. –>
<noscript><b>El navegador que uses ha de tener habilitado JavaScript para utilizar Google Maps.</b>
Parece que o bien tu navegador no soporta Javascript o lo tienes desactivado. Asegurate de utilizar el navegador adecuado y que Javascript se encuentre activado e intentalo de nuevo.
</noscript>
<script type=”text/javascript”>
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var map = new GMap2(document.getElementById(”map”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// indicamos la configuración inicial de la vista del mapa, posición y nivel de zoom.
var latitud = 42.795487000000001;
var longitud = -1.6209880000000001;
var nivel_de_zoom = 14;
map.setCenter(new GLatLng(latitud,longitud), nivel_de_zoom);
// definimos el punto en el cual queremos colocar el marcador a través de la latitud y longitud.
var latitud_marcador = 42.795487000000001;
var longitud_marcador = -1.6209880000000001;
var point = new GLatLng(latitud_marcador,longitud_marcador);
// Contenido de la ventana de informacion.
var contenidoHtml = ‘<a href=”http://cmn.navarra.net/”><img src=”http://cmn.navarra.net/imgs/logotipo.gif” alt=”Logotipo del Club de Marketing” border=”0″ /></a><br /><br />’;
contenidoHtml += ‘C/ Anaitasuna s/n, Mutilva Alta (Navarra) CP 31192′;
contenidoHtml += ‘<br /><br />Puedes ampliar más información sobre este lugar visitando <br />su página web haciendo click en la imagen de su logotipo.’;
var marker = createMarker(point,contenidoHtml)
map.addOverlay(marker);
}
else {
alert(”Lo sentimos, el navegador web que usas no es compatible con Google maps API”);
}
// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://econym.googlepages.com/index.htm
</script>
</body>
</html>
