últimamente no he estado muy blogger, y es que he estado trasteando con el API de google maps, potentisimo por cierto, y me he montado una pequeña aplicación buscador/agregador de eventos -cutre, sin arreglar, ni calendario integrado, y sin esos efectos 2.0 que tanto nos molan- pero lo que realmente quería era probarlo, aunque en breve tendréis una versión pro de lo mismo con mas colorines, buscador y toda la web social, ya lo publicaré.
Primero lo oficial: http://www.google.com/apis/maps/documentation/ este es el sitio de google para aprender a manejar cosillas, cualquier duda hay que os vais: tiene ejemplos de todo.
Para empezar a trabajar con un mapa primero tenéis que poseer una clave para vuestra web (debe de ser una comprobación en cliente de la web y el código, pq es rapidísimo) que se consigue metiendo la dirección de la web que va a contener el mapa (o de localhost si tenéis instalado un servidor en vuestra casa, que también vale) aquí: http://www.google.com/apis/maps/signup.html
Después de esto y para ver el primer mapa hacéis un html donde se incluya el archivo que hace que esto funcione, asique al principio de la pagina colocáis un script type=»text/javascript» indicando esto:
src=»http://maps.google.com/maps?file=api&v=1&key=AQUI_TU_CLAVE»
para incluir el archivo que hace que esto funcione 😛
Después en el cuerpo/body de la pagina definís una capa/div con estos parametros:
id=»map» style=»width: 500px; height: 400px»
Lo importante es que el id sea «map», ya que luego se va a buscar ese nombre para meter un mapa.
Ya solo queda un paso para que se cargue: dentro de etiquetas javascript se crea el objeto mapa y se le da la orden de obtener para que se calcule, algo como esto:
var map = new GMap(document.getElementById(«map»));
map.setMapType(map.getMapTypes()[2]);
map.addControl(new GMapTypeControl()); // esto es para el control de satelite, hibrido, mapa.
map.addControl(new GLargeMapControl()); // y esto para el zoom y el control que esta encima
Felicidades habéis hecho vuestro primer hola mundo con Gmaps!!
Ahora unas funciones de interés, a lo rápido, así como ‘aprende a usar Gmaps en 3 minutos‘:
Estas funciones se ponen en un javascript como el de antes, es mas pueden estar justo debajo del anterior o en uno externo o dentro de funciones que se ejecuten cuando un usuario de le a un botón.
- centrar el mapa en un punto:
map.recenterOrPanToLatLng(new GPoint(-8.7288818359375, 43.89206418807337));
- poner una ventana de informacion en el mapa:
map.openInfoWindow( (-8.7288818359375, 42.89206418807337) , document.createTextNode(«Se alquila»));
- Colocar un marcador estandar en el mapa:
var punto = new GPoint(-9.7288818359375, 43.89206418807337); //crea una variable punto
var marcador = new GMarker(punto); //creo un marcador asociado a ese punto
map.addOverlay(marcador); // hago que se superponga en el mapa - hacer que un marcador tenga una ventana con el contenido de la variable html (y formato html) al pulsarse:
GEvent.addListener(marker, «click», function() { marker.openInfoWindowHtml(html); });
- una función que te mueve el mapa al sitio donde le digas (si, si y no solo con nombres de ciudades, sino con sitios :P):
function buscarSitio(nombreSitio){
var geocoder = new GClientGeocoder();
geocoder.getLatLng(nombreSitio, function(point) {
if (!point) { alert(nombreSitio + » no se ha encontrado el sitio»);
} else {map.setCenter(point, 15);} } );
}
Bueno, y ya esta bien por hoy que esto no es un blog tecnologico y nos sobresaturamos, para continuar con el tema si os ha interesado aqui teneis una serie de links muy muy interesantes.
Animaros a probarlo es muy sencillo!!
muy claro. muchas gracias
Ha sido mi pequeño homenaje a los tutoriales que dia a dia me salvan el culo en el curro
ya podremos entonces trazarnos las rutas de baretos de moda por la ciudad 😎
Hola,
Necesito poner 2 mapas en la misma pagina web, pero no consigo que me funcione. Alguien me puede decir como o de algun tutorial , porque he estado buscando y encuentro poca cosa.
Un saludo
Hola amigos! Tengo una interrogante: estoy creando un mapa en google maps y los mapas de algunos usuarios he visto que puedes crear una lista desplegable para asociar un grupo. Por ejemplo, si creo mi mapa MI CIUDAD, y quiero agrupar las gasolineras en una lista donde el usuario pueda hacer click en un simbolo de + para desplegar todas las gasolineras o un apartado para las escuelas por ejemplo… cómo se hace eso?
gracias por sus respuestas.
Hola!
Estoy trasteando con la apis de google maps y me ha surgido un
problema. A ver si me podeis ayudar.
He creado una ruta y he eliminado las marcas que me creaba (he usado
el loadFromWaypoints para ello) y quiero poner mis propias marcas con
el texto que yo quiera. Para ello he hecho un bucle for que crea las
marcas en las posiciones que yo quiero que esten, el problema me surge
es a la hora de ponerle un texto (openInfoWindowHtml) a la marca, y es
que solo me pone el texto en el ultimo punto y luego si le pincho a
alguno de los puntos, me va al punto con texto y me lo abre.
os pongo el codigo del for a ver si me podeis ayudar en esto.
for (i = 0; i < fd; i )
{
var point = new GLatLng(lat[i],long[i]);
var marker = new GMarker(point, iconoMarca);
mensaje = ‘Hora –> ‘ fecha2[i] ‘‘;
GEvent.addListener(marker, «mouseover», function()
{marker.openInfoWindowHtml(mensaje); } );
mapa.addOverlay(marker);
} // for i
tengo por ahi unos arrays que son los que guardan la informacion que
deberia salir en el bocadillo ese y otros con las latitudes y las
longitudes. Como digo, los puntos me salen bien, la ruta tambien, lo
que no me salen son esos textos.
Otra cosa mas, es posible editar las marcas que salen con el
loadFromWayPoints (esas que son de la A a la Z)????
Bueno, muchas gracias anticipadas.
Buenas, no sé si para esto es necesario la API pero es que ya no sé como hacer que funcione, lo he preguntado en el foro de ayuda de Google pero nadie me da respuesta:
Necesito incluir en una web un frame con google maps en el que aparezca el mapa que he creado marcando áreas, lo que quiero hacer es que la gente introduzca su dirección y google maps le responda con el posicionamiento marcando como el típico globito, como este mapa está marcado por áreas, el usuario a simple vista verá a que zona pertenece la dirección que ha introducido.
El problema es el siguiente yo utilizo el «enlazar» que me proporciona google maps para el mapa que he creado, pero cuando se realiza la búsqueda se borran las zonas que he marcado y la realiza sobre un mapa «virgen», no sobre el mapa que yo he creado.
¿Alguna Solución?
El mapa en cuestión es este:
http://maps.google.es/maps/ms?ie=UTF8
Hola,
alguien me puede decir como puedo localizar una zona (sacar latitud y longitud) al seleccionar una zona en el mapa con el api de google maps?.
Por ejemplo, cuando en google maps seleccionas un punto y pones ruta desde aqui te sale la latitud y longitud. Alguien sabe como se hace?.
Muchas gracias
Un saludo.
Laura