Google Maps en tu Web
Lo primero que hay que hacer para incluir un objeto Google Maps en una página Web es obtener una Google Maps API key. Se puede obtener gratuitamente en Google Maps API, accediendo al enlace "Sign up for a Google Maps API key". Será necesario indicar el dominio donde se usará el objeto y disponer de una cuenta de Gmail. La clave obtenida únicamente se podrá utilizar en páginas del dominio indicado. En el caso de superar las 50.000 visitas diarias hay que contactar con Google.
La API de Google Maps utiliza Ajax (Asynchronous JavaScript and XML), la documentación se puede encontrar en la dirección Google Maps API Documentation.
Google ofrece el siguiente ejemplo donde hay que sustituir la cadena “abcdefg” por la clave obtenida.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>El código más significativo son las líneas:
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);La primera instrucción crea un objeto map y la segunda crea un punto con latitud 37.4419 y longitud -122.1419. Con la función setCenter se centra el mapa en el punto creado y se le asigna un zoom de 13. El valor del zoom varía entre 0 y 17, donde 17 indica la mayor aproximación.
El resultado obtenido sería el siguiente:
Entre la creación del mapa y su centrado se podrían añadir los controles:
map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GOverviewMapControl());
Donde GLargeMapControl (o GSmallMapControl) incluye el control de zoom (normal o reducido, respectivamente); GMapTypeControl incluye el control de tipo de mapa (mapa, satélite o híbrido); y GOverviewMapControl incluye el control overview del mapa.
El resultado obtenido sería el siguiente:
Los mapas anteriores apuntan a las oficinas centrales de Google en Palo Alto, ya que así se ha indicado con los parámetros latitud y longitud. Estos parámetros se pueden obtener en Google Maps. Mediante los controles y el zoom hay que situarse en el punto de interés. Una vez encontrado, hay que acceder al enlace "Enlazar con esta página" para obtener una dirección directa al lugar. Esta dirección contiene un parámetro:
ll=37.4419,-122.1419
Donde el primer valor es la latitud y el segundo la longitud.
Otra forma de posicionar un mapa es utilizando un objeto geocoder. Para ello, hay que sustituir la instrucción de centrado de punto por el siguiente código:
var geocoder = new GClientGeocoder();
var address = "Camí del Mig, 9 08970 Sant Joan Despí";
geocoder.getLatLng(address,
function showLocation(point) {
if (!point) {
alert(address + " no encontrado.");
} else {
map.setCenter(point, 17);
}
}
);La función getLatLng busca la dirección definida en el primer parámetro address y después ejecuta la función showLocation definida en el segundo parámetro. Si se ha encontrado un punto, se centra en el mapa, si no, se muestra una alerta.
El resultado obtenido sería el siguiente:
Lo siguiente sería incluir un marcador. Se tendría que incluir las siguientes sentencias al código anterior, justo después del centrado del punto:
var marker = new GMarker(point); map.addOverlay(marker);
El resultado obtenido sería el siguiente:
Por último, se podría incluir una etiqueta que aparezca al pulsar sobre el marcador. Para ello, se necesitaría incluir el siguiente código:
var label = "Ajuntament de Sant Joan Despí";
GEvent.addListener(marker, "click",
function showLabel() {
marker.openInfoWindowHtml(label);
}
);El resultado obtenido sería el siguiente:
Para concluir, el código definitivo sería el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
var address = "Camí del Mig, 9 08970 Sant Joan Despí";
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
geocoder.getLatLng(address,
function showLocation(point) {
if (!point) {
alert(address + " no encontrado.");
} else {
map.setCenter(point, 17);
var marker = new GMarker(point);
map.addOverlay(marker);
var label = "Ajuntament de Sant Joan Despí";
GEvent.addListener(marker, "click",
function showLabel() {
marker.openInfoWindowHtml(label);
}
);
}
}
);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
15 comentarios:
Excelente explicación, he usado un modulo en joomla (CMS), que puede uno usar la facilidad de google maps, pero no sabía donde encontrar la API Key, que necesitaba, y con este completisimo artículo he resuelto el problema.
Gracias,
5 de julio de 2007, 6:26
Buenos dias.
La explicacion, excelente, pero he venido a parar aqui porque estoy usando el objeto para geodecodear una direccion, pero no hay manera, siempre obtengo UNDEFINED en point, por lo que no me detecta ninguna direccion.
He probado las tuyas también, pero no hay manera.
¿Tienes idea de pq puede ser?
Muchas gracias de antemano.
24 de julio de 2007, 13:07
La verdad es que no sé a qué puede ser debido. Es cierto que en ocasiones me ha sucedido lo mismo con alguna dirección, quizás porque estaba mal escrita, por tema de acentos, o sencillamente porque no estaba indexada en Google Maps. Yo te recomiendo que sigas muy paso a paso este artículo y que vayas comparándolo con el tuyo hasta el más mínimo detalle, ya que seguramente lo que te ocurre es una tontería, un pequeño fallo del que no te estás dando cuenta.
Si quieres, puedes acceder a una mini-aplicación Google Maps que tengo publicada y haces pruebas, visualizas el código, a ver si puedes encontrar ese dichoso fallo: http://personales.ya.com/ertseam/google_maps_app/.
Un saludo.
24 de julio de 2007, 13:44
veo que abajo consigues mostrar las coordenadas para esa direccion, mirando tu codigo yo tambien lo he conseguido, pero mi pregunta es, se pueden utilizar esas coordenadas?, me explico, me gustaría que, una vez averiguadas, almacenarlas en una bbdd. gracias.
16 de agosto de 2007, 14:18
Hola gracias por el articulo esta claro y preciso. Tengo preguntas si me pudieras ayudar te lo agradeceria mucho.La primera ¿Donde usa tecnología AJAX google Maps? y ¿ donde pudiese encontrar documentacion sobre Descripción específica del AJAX utilizado en la aplicación?. Mil gracias nuevamente y por tu tiempo tambien gracias.
4 de enero de 2008, 18:29
Lo MAS FACIL ES : te vas directamente a google map, buscas lo que quieres poner en tu web, Al lado del mapa te sale un enlace que pone: ENLAZAR CON ESA PAGINA, te sales dos codigos y copias el de abajo, lo pegas en tu web donde quieras y ya esta. Es cosa de dos minutos y no tienes que saber nada de HTML. Asi quedara en tu web: http://www.barcelonanights.net/mapa.html
Ahhh, lo puedes poner como opcion satelite o como calles.
Espero que os haya servido de ayuda!!!!
22 de febrero de 2008, 11:31
Hola,
Me ha sido muy util la informacion pero tengo un problema, en los mapas no aparecen los acentos y se aparecen caracteres raros, sabes como solucionarlo?
un saludo y gracias.
Fernando
27 de marzo de 2008, 8:42
Hola,
Yo también me he encontrado con este tipo de problema al utilizar Google Maps en algún servidor. Lo he solucionado indicándole al mapa que use como lenguaje el inglés (hl=en), de manera que no aparecerán acentos pero tampoco carácteres raros:
http://maps.google.com/maps?hl=en&file=api&v=2&key=ZZZZ
Un saludo.
2 de abril de 2008, 9:38
Uso dicha función, y va bien. Hago que cargue el Load() en el onclick de distintos divs, pero en el primero funciona perfecto, y a partir de pinchar en el primero (aleatorio) los siguientes aparece el mapa pero no el punto con el comentario y aparece el error:
this.$e is null, o this.Ve is null, y no tengo ni idea de lo que es.
14 de julio de 2008, 1:39
Muchísimas gracias por tu mini-tutorial. Muy bien explicado e intuitivo.
22 de octubre de 2008, 13:19
Hola! quisiera saber si podrían explicarme como cambiar el marcador por otra imagen propia, no de las opciones que da google.
Gracias-
13 de enero de 2009, 22:45
Excelente articulo!!
Una explicación muy clara y fácil de entender, cuando llegue a esta pagina buscando información sobre google maps, y sin saber nada de como se implementa en una pagina web, termine implementando esta aplicación en un sitio en php y con contenido dinámico sin inconvenientes.
Muchas gracias por el tiempo de hacer este manual y compartirlo.
Saludos!!
11 de abril de 2009, 4:09
Gracias por la ayuda.
Tengo una duda: Como puedo incluir la opcion de StreetView en el label del icono cuando se pincha? (si se puede hacer, claro. Y otra cosa. Para que en la etiqueta que sale al pinchar en el icono del mapa salga mas de una línea, ¿Como se hace?.
Estoy empezando en esto de las paginas web por lo que si las preguntas son una chorrada te pido disculpas de antemano.
Gracias.
14 de diciembre de 2009, 20:08
Hola
soy de colombia
y estoy tratando de usar el geocode de google maps
con direcciones para colombia pero nunca me las ubica exactamente donde debe ser.
incluso en maps.google.com tampoco ubica bien las direcciones en colombia.
pero si las escribo en mapas.publicar.com ahi si las ubica excatamente donde deben estar.
sera que el geocode de google esta malo para colombia?
alguien tiene algun geocode para colombia?
gracias espero me puedan colaborar mi correo es obdcla arroba hotmail .com
12 de abril de 2010, 18:19
espectacular, no encuentro otra palabra para describir el tutorial, sencillo y rápido para quienes tenemos las nociones básicas de java
saludos y mucha fuerza para seguir así
4 de febrero de 2011, 5:13
Publicar un comentario