Tutorial API google maps ¡hazte tu mapa!
7 Commentarios Publicado por txopo el jueves, 14 de junio de 2007 a las 0:52.
ú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é.
Así que aprovechando que se mas o menos trabajar con el API os voy a dar los básicos para que trasteéis lo que queráis en vuestra casa.
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:
Después en el cuerpo/body de la pagina definís una capa/div con estos parametros:
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:
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.
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!!
Así que aprovechando que se mas o menos trabajar con el API os voy a dar los básicos para que trasteéis lo que queráis en vuestra casa.
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 :P
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!!
Etiquetas: informatica
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 8-)
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 mostrando la ventana de los marcadores al dar click sobre ellos, mostrando un titulo, una foto y una descripcion, lo que pasa es que algunas veces me muestra la ventana perfectamente y otras veces me muestra la foto y la descripcion por fuera de la ventana, el codigo es este
GEvent.addListener(marker,"click", function(){
var myHtml = "-b-"+dat[i]["nom"]+"-/b--br/-"+
"-img src='imagenes/puntos_interes/imagenes/"+
dat[i]["foto"]+"' width='200px'/--br/-"+
"-div style='width:200px;'-"+dat[i]["des"]+"-/div--br/-";
marker.openInfoWindowHtml(myHtml);
});
LOS CARACTERES MAYOR Y MENOR PARA ABRIR Y CERRAR ETIQUETAS LOS HE CAMBIADO POR EL CARACTER "-" PARA PODER PUBLICAR ESTE COMENTARIO
Gracias por la ayuda
20150602chenyi
michael kors outlet
cheap ray ban sunglasses
cheap jerseys
ray ban sunglass
air max 95
michael kors bags
hollister clothing
coach outlet
ralph lauren
toms shoes
oakley sunglasses
abercrombie
michael kors bag
cheap oakley sunglasses
ray ban glasses
polo ralph lauren
gucci uk
burberry handbags
oakley sunglasses
ray bans
gucci outlet
tory burch handbags
burberry sale
ray ban outlet
oakley sunglasses
ralph lauren outlet
coach outlet online
kate spade outlet online
true religion jeans
pandora outlet
true religion outlet
burberry outlet
christian louboutin sale
pandora charms
prada outlet
air max 90
chanel handbags
coach outlet store online
toms outlet
true religion sale