Estaba planificando el diseño web de una empresa, cuando me di cuenta que solicitaban un mapa de localización del negocio.
La primera opción y la más fácil era poner una imagen de un callejero, pero esta opción tiene muchas carencias y hoy en día no cumple con la función de localización asi que la deseche rapidamente.
Otra solución era diseñar una animación gif que permitiese ver en un intervalo de tiempo determinado, distintas imágenes de la localización de la empresa… o programar una animación flash con botones de acción de acercamiento y alejamiento sobre una imagen de alta resolución o botones para que cambiaran de imágenes, haciendo el efecto de acercamiento… pero ¿para que inventar lo que ya esta inventado? lo que yo quería era Google maps. Con posibilid de zoom, mapa de calles, mapa satelitario… pero con un aspecto profesional en la presentación. Quería los mapas de google, pero no me interesaba su entorno web.
Investigando un poco, descubri la API de google MAPS://www.google.com/apis/maps
asi como otros servicios parecidos a Google maps:
Live Maps (Los mapas de Microsoft): http://maps.live.com
OpenLayers (versión Open source): http://www.openlayers.org
Openlayers me ofrecía una API en javascript para incluir un mapa en cualquier web, pero desde mi punto de vista y sin hacer un estudio muy profundo, su API y el entorno no me parecio tan potente y sobre todo tan conocido, como el de Google.
Para poder usar el API de google hay que solicitar una API Key.
Esta Clave se genera a partir de la dirección del sitio web en el que se quiere incrustar el mapa. Son únicas para cada sitio y no se pueden intercambiar. Para solicitarla hay que estar dado de alta en google como usuario (cuenta de Gmail). Me dirigi a la dirección: http://www.google.com/apis/maps/signup.html
Introduje la URL del sitio y la clave se genero después de identificame como usuario de google.
Además de la clave para poder usar la API, obtuve un código javascript de ejemplo del uso de la misma.
Con estos datos estudie el código y lo personalice obteniendo el resultado que se puede ver en el siguiente enlace:
https://www.opcionweb.com/ngarrido/mapa.htm
El código API de Google Maps tiene 3 partes:
1.- El código javascript que se pone a continuación del tag <title></title>
2.- El código onload=”load()” onunload=”GUnload()” que se pone dentro del tag <body>
3.- El tag <div></div> que carga el mapa con el tamaño y en la ubicación seleccionada de la página web.
El código javascript esta bien estructurado y es fácil de comprender. Los comandos más interesantes que permiten personalizar el mapa son:
map.addControl(new GLargeMapControl());
Para ver los botones de control de zoom sobre el mapa.
map.addControl(new GMapTypeControl());
Para ver los botones de control Mapa, Satélite e Hibrido.
map.setMapType(G_SATELLITE_TYPE);
Para ver por defecto el mapa satelitario. Por defecto se ve el mapa callejero.
map.setCenter(new GLatLng(40.970178, -5.658656), 17);
Especifica las coordenadas del centro del mapa y el zoom (0 lo más lejos a 17 lo más cercano)
document.createTextNode(“TEXTO”));
Texto informativo que pondrá en el bocadillo.
map.openInfoWindowHtml(map.getCenter(),html);
Código html que aparecera en el bocadillo, se puede usar texto formateado e imágenes.
ATENCIÓN: map es el nombre de la instancia definida en
var map = new GMap2(document.getElementById(“map”));
Se puede definir otro nombre de instancia, el cual precedera a los comandos descritos anteriormente.
icon.image = “http://labs.google.com/ridefinder/images/mm_20_red.png”;
Icono gráfico que se desea usar para marcar la zona. Algunos de los iconos que ofrece google:
http://labs.google.com/ridefinder/images/mm_20_blue.png
http://labs.google.com/ridefinder/images/mm_20_green.png
http://labs.google.com/ridefinder/images/mm_20_yellow.png
http://labs.google.com/ridefinder/images/mm_20_orange.png
http://labs.google.com/ridefinder/images/mm_20_brown.png
http://labs.google.com/ridefinder/images/mm_20_white.png
http://labs.google.com/ridefinder/images/mm_20_black.png
http://labs.google.com/ridefinder/images/mm_20_gray.png
http://labs.google.com/ridefinder/images/mm_20_purple.png
Aunque se puede usar cualquier icono propio o de internet que se desee.
icon.shadow = “http://labs.google.com/ridefinder/images/mm_20_shadow.png”;
Icono gráfico que hace el efecto de sombra del bocadillo.
Si no quieres sombra quita esta linea.
icon.iconSize = new GSize(12, 20);
Tamaño del icono gráfico que marca la localizacion (ancho, alto)
icon.shadowSize = new GSize(22, 20);
Tamaño del gráfico de la sombra (ancho, alto).
var point = new GLatLng(40.970178, -5.658656);
Variable point contine las coordenadas donde colocar el grafico de localizacion (x, y)
Estas coordendas se pueden averiguar desde google maps en la opción enlazar con esta página y cogiendo los valores que especifica la url en la barra de dirección.
http://maps.google.com/maps?f=q&hl=es&q=Clinica+Dental+Natalia+garrido+Salamanca&
layer=&ie=UTF8&z=13&ll=40.993893,-5.645771&spn=0.043664,0.09407&om=1&iwloc=A
map.addOverlay(new GMarker(point, icon));
Pone el icono seleccionado en las coordenadas especificadas de localización.
5 COMENTARIOS
hola necesito hacer funcionar una pagina y me pide una clave api y me da una direccion, genero la clave api y luego nada no funciona la pagina me sigue tirando el mismo mensaje, me podras ayudar??
Hola Romina.
Como comento en el post, supongo que la clave API la das de alta con tu cuenta de correo de GMAIL? ¿Que mensaje te sale? Un saludo.
Hola, estoy intentando poner el mapa pero no quiero hacer la llamada de la clave desde el header. Quiero pegar todo el código en el body, porqu eestoy trabajando con Dot Net Nuke. Cómo lo puedo hacer? Gracias
Continuo con problemas del API me continua mostrando la leyenda “La clave API key de google maps que se utiliza en este sitio se ha registrado para otro sitio” he generado la clave y nada, estoy programando en VB .NET 2003 pero no puedo, como puedo solucionarlo a ver si me puedes agregar a tu msn para ayudarme por favor.
gracias y saludos
Hola Sergio:
¿Has dado de alta tu PROPIA clave? Si usas cualquier otra no funcionará. Espero que sea eso. Usa el FAQ de google con respecto a este tema. Un saludo.