Categorías del Tutorial

icono_twiter icono LinkedIn icono Facebook Icono Xing
Roberto Canales Mora

Creador y propietario de AdictosAlTrabajo.com, Director General de Autentia S.L., Ingeniero Técnico de Telecomunicaciones y Executive MBA por el Instituto de Empresa 2007.
Twitter:

Autor de los Libros: Planifica tu éxito: de aprendiz a empresario y Informática profesional, las reglas no escritas para triunfar en la empresa

Puedes consultar mi CV y alguna de mis primeras aplicaciones (de los 90) aquí

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2006-04-11

Tutorial visitado 56.302 veces Descargar en PDF
http

Integrando Google Maps en tus Web/Portales

Cada día realizo menos labores técnicas debido a que las responsabilidades de administrar mi empresa (www.autentia.com) e impartir cursos de dirección de proyectos informáticos y análisis y diseño, patrones, etc. que me tienen separado del código ...

Para hacer mérito al nombre que le puse a este Web, www.adictosaltrabajo.com periódicamente me enredo en aventuras que me obliguen a sacar el pico y la pala (el compilador) para no perder soltura. Hace dos horas, me propuse aprender como funcionan las Apis de Google Maps para integrar mapas dentro de un Web y francamente me he quedado sorprendido (y sin reto para la semana santa) porque ya he terminado lo que pretendía hacer .....

Lo han echo tan sumamente fácil la gente de Google que parece mentira ...

Bueno, al tajo. Lo que pretendía hacer es poner en el Web de www.AdictosAlTrabajo.com un enlace que permitiera a todo el mundo ver la ubicación de nuestras instalaciones de Autentia, y vamos a contarlo paso a paso.

Lo primero que debemos hacer, es ir al Web de google y registrarnos para poder usar su API. En principio su uso es gratuito ..

Accedemos al enlace (aunque siempre se puede buscar en Google, jejeje)

http://www.google.com/apis/maps/documentation/#The_Hello_World_of_Google_Maps

Nos registramos

Y tras logarnos (perdonar los puristas por la palabra), se nos genera la clave (por cierto que no uséis la mía que no os va a funcionar) a utilizar en nuestro código.

Se nos proporciona un ejemplo que, con copiar y pegar, ya estamos funcionando.

<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAHCzNPZU_I7Rw6IxQ4Cg8uvpYKXtS3HuRtP3UdsoSF7xQyJ4lBGSea-ar0o_vtVLOwmGLQ" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

//]]>
</script>
</body>
</html>

Sobre el código que nos han proporcionado y colgándolo de nuestro Web, ya podemos hacer pequeñas variaciones.

Simplemente, siguiendo la documentación te describen como hacer varias cosillas ( http://www.google.com/apis/maps/documentation/ ) y entre ellas:

  • Establecer controles

  • Poner un marcador en un mapa

  • Establecer una etiqueta en un punto concreto

  • Ver las coordenadas de un punto buscado

La gracia es que podamos navegar por un mapa y pinchando en un punto de interés para nosotros, ser capaz recuperar las coordenadas para luego marcar en las mismas iconos o etiquetas .... vamos, que nos hacemos un pequeño editor.

El código es tan sencillo como esto:

<!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>Autentia en el Mundo</title>

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAhJvNRwdHCzNPZU_I7Rw6IxQ4Cg8uvp3HuRtP3UdsoSF7xQyJ4lBGSea-ar0o_vtVLOwmGoyLQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

var contador = 1; // contador para marcar puntos de interes

// Creates a marker at the given point with the given number label
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marcador#<b>" + number + "<br>Pos " + point.toString() + "</b>");
});
return marker;
}


function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"),"hybrid");

// insertar los controles
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());


// establecer el listener para actualizar la posición del punto central
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

// establecer el punto origen, nivel de zoom y tipo de mapa
map.setCenter(new GLatLng(40.594174919360,-3.70773553842666),15, G_SATELLITE_MAP);

// establecer marcadores
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(createMarker(point, contador));
contador = contador + 1;
}
});

// poner el texto de aquí esta Autentia
map.openInfoWindow(map.getCenter(),document.createTextNode("Aqui esta Autentia - info@autentia.com"));
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<center>
<div id="map" style="width: 800px; height: 600px"></div>
<div id="message"></div>
</center>

</body>
</html>
 

El resultado es sorprendente: Podemos ver el mapa de Tres Cantos y pinchando con el ratón, obtenemos las coordenadas deseadas.

Para cambiar la funcionalidad, solo hay que leerse el API (que no es muy grande) y, obviamente, tener conocimientos básicos de JavaScript y HTML.

El resultado funcionando http://www.adictosaltrabajo.com/googlemaps/autentia.php

Lo que ya es todavía más impresionante, es la capacidad que tiene la gente para compartir: Os recomiendo que visitéis este enlace http://www.econym.demon.co.uk/googlemaps/ donde hay una guía (en perfecto ingles) que complementa el propio manual de Google.

Simplemente construyendo este pequeño ejemplo se me ocurren mil usos:

  • Turísticos

  • Inmobiliarios

  • Logísticos

Pues ya sabéis, este ejemplo lo regalamos pero nos podéis contratar para ayudar a vuestras empresas a sacar verdadero partido a la tecnología. info@autentia.com

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2010-12-10-18:04:27

Autor: invisible

Hola
Me parece bien este tutorial, me gustaria saber como puedo cambiar las cordenadas map.setCenter(new GLatLng(40.594174919360,-3.70773553842666),15, G_SATELLITE_MAP); para que salgan estas 25º28'25"N 25º28'24"O que son mas manejables para los que tienen GPS.

Fecha publicación: 2010-12-10-17:58:54

Autor: invisible

Hola
Me parece bien este tutorial, me gustaria saber como puedo cambiar las cordenadas map.setCenter(new GLatLng(40.594174919360,-3.70773553842666),15, G_SATELLITE_MAP); para que salgan estas 25º28'25"N 25º28'24"O que son mas manejables para los que tienen GPS.

Fecha publicación: 2009-12-06-04:30:11

Autor: lunaazul1uchiha

oye me puedes ayudar como ubico una coordenada

Fecha publicación: 2009-08-21-10:14:41

Autor:

[carlos] cordial saludo, estoy realizando una aplicacion gps en el cual el el mapa donde veo la posicion del vehiculo es el de google maps, ya integre el mapa la pagina web donde vere el vehiculo, pero no he podido insertar un marcador diferente a los que me proponen en el api, ya cree el marcador en forma de carro y me arroja el sgte codigo var myIcon = new GIcon(); myIcon.image = 'markers/image.png'; myIcon.shadow = 'markers/shadow.png'; myIcon.iconSize = new GSize(38,11); myIcon.shadowSize = new GSize(44,11); myIcon.iconAnchor = new GPoint(19,11); myIcon.infoWindowAnchor = new GPoint(19,0); myIcon.printImage = 'markers/printImage.gif'; myIcon.mozPrintImage = 'markers/mozPrintImage.gif'; myIcon.printShadow = 'markers/printShadow.gif'; myIcon.transparent = 'markers/transparent.png'; myIcon.imageMap = [25,0,28,1,30,2,36,3,36,4,36,5,37,6,37,7,35,8,32,9,31,10,7,10,6,9,1,8,1,7,0,6,2,5,5,4,13,3,15,2,18,1,20,0]; pero no se como hacer para que me salga en el mapa el carro. por otra parte yo necesito que la posicion del marcador se mueva conforme la informacion del gps, como podria hacer para que la posicion del carrito sea dependiente de la info del gps? gracias de antemano.

Fecha publicación: 2009-08-06-10:52:20

Autor:

[Adolfo Antonio Ramir] me parece bien yo he hecho algunos kml en googleearth y me interesan mucho estas herramientas saludos

Fecha publicación: 2009-07-16-04:00:58

Autor:

[angel] me paraece mui bueno voi a comenzar a practicar algunas de sus recomendaciones, graciasmil.saludos

Fecha publicación: 2007-06-10-07:07:14

Autor:

[Araceli] Este tutorial al igual que otros esta execelente, sigan a delante.

Fecha publicación: 2007-02-22-10:33:57

Autor:

[Morales] Esta bien, aunque está un poco escueto. Saludos

Fecha publicación: 2006-10-06-08:03:39

Autor:

[higinio beltran] tu tutorial está muy bien: es claro, concreto y conciso. Gracias por el buen rato que he pasado leyendolo y jugando con él. Saludos

Fecha publicación: 2006-08-21-12:29:16

Autor:

[estupendo tutorial] Lo primero gracias por el tutorial Lo segundo ofreceros aparecer de forma gratuita si ofertais servicios sobre software libre o basados en el. Echad un ojo a http://libroblanco.com Salu2 y gracias

Fecha publicación: 2006-07-20-06:58:32

Autor:

[Marc] Hola, gracias por el tutorial, esta genial. queria preguntar, como podria trazar una linea, que indicara una rita, de un punto a otro del mapa? Necesitaria crearlo con base de datos? he visto algo pero no lo termino de entender, me gustaria poder crear (polylines) Un saludo y gracoas