Friday, August 25, 2006

Inserte un mapa satelital de google map en su pagina web
Insertando el api de google map

Primero ir a la siguiente pagina http://www.google.com/apis/maps/signup.html
Acepta los terminos, registra la direccion de tu pagina y luego Click en "Generate Api Key", te generara codigo html.

Extrae todo el codigo q esta entre los tag y y pegalo en el tag <> de tu pagina, lo mismo para lo que esta en y ponerlo entre los tag de tu pagina.
Guardas y recargas y listo.

Modifica la posicion geografica de inicio
Ubica el siguiente segmento en tu codigo:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Ahora modifica las coordenadas geograficas, lo que esta aqui
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
por las coordenadas q desees, x ejemplo ( 123.123 , 123.123 ), lo reemplazas y listo.
Para modificar el acercamiento de la vista mofica el valor de
map.setCenter(new GLatLng(37.4419, -122.1419), 13 ); 
por un valor entre 0 y 60, mientras mayor sea el numero, mas acercamiento obtendras.

Algunas recomendaciones son que agreges estas 2 lines a de codigo para mejor control y para que el mapa sea tipo satelital, (agrega solo lo que esta de color morado).

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.setMapType(G_SATELLITE_MAP);



Agrega una marca de informacion personal

Para agregar una marca personal a tu api de google map debes agregar el siguiente codigo (solo lo de morado):

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.setMapType(G_SATELLITE_MAP);

function createMarker(point, title, content) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("" + title + "" + content);
}); return marker;
}


map.addOverlay(createMarker( new GLatLng( 123.123, 123.123 ) , "Mi Casa", "Aqui pones tu mensaje :p"));

ahora cada vez que quieras agregar una marca pon el siguiente codigo(lo de morado, rojo y verde):


map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.setMapType(G_SATELLITE_MAP);
function createMarker(point, title, content) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("" + title + "" + content);
}); return marker;
}

map.addOverlay(createMarker( new GLatLng( 123.123, 123.123 ) , "Mi Casa", "Aqui pones tu mensaje :p"));

donde los numeros en rojo son las coordenadas y el texto en verde es el texto q quieres q se muestre.

Espero que no tengan problemas, cualquier duda envien sus comentarios y pueden recomendar esta pagina a sus amigos. :P

12 Comments:

Blogger Juan Agramonte said...

Cuando tenga mas tiempo pondre una pagina de ejemplo de api de google maps.
Tambien en unos dias pondre como extraer cualquier coordenada geografica mediante google maps.
bye

6:10 PM  
Blogger Kike said...

juan necesito ayuda, no se como organizar el script que google me da, me rompe los css y encuadres, aparte que no veo la web segun donde lo pegue, si separo el script y lo pongo en donde teoricamente son sus sitios no me va, a ver si tu pudieras explicarme onde va exactamente cada codigo, muchas gracias por anticipado, un saludo, Kike

10:58 PM  
Blogger luchosar said...

mil y mil gracias..si no hubiese visto este tutotial jamas lo hubiese logrado..gracias

10:35 PM  
Blogger luchosar said...

otra cosa importante en esta web encuentras la ubicacion de tu mapa es decir la latitud y longitud, que son los numeros que piden http://mapmaker.donkeymagic.co.uk/

10:50 PM  
Blogger Unknown said...

hola amiiaso.. kisiera saber si el mapa lo pued mostrar en mi HI5.. he intentado pero naa.. haber si me das una mano =) saludos..

5:01 PM  
Blogger Nelly said...

Hola... veras necesito cargar un mapa nuevo en google maps pues aún no consta necesito saber si mediante tu consejo actual lo puedo hacer...
Caso contrario me ncantaría ayuda...nose me ayudas con algo porfa anticipo mis gracias

2:29 PM  
Blogger Escuela de Formación Política said...

Hola quisera saber como ingreso el codigo HTML que me genera..en que lugar exacto de mi blog debo pegarlo.
Gracias

otraezcuela@gmail.com

4:59 PM  
Blogger Kuminabe said...

This comment has been removed by the author.

7:11 AM  
Blogger Kuminabe said...

This comment has been removed by the author.

7:15 AM  
Blogger Kuminabe said...

tengo un par de problemas con un mymaps insertado en blogger. mapa en mi blog. Intento indicar las dos instrucciones que indicas para que me muestre el mapa de tipo satelital y al incluirlas en mi codigo deja de cargarme el mapa, tampoco me muestra los comentarios que ya existen en el mymap y sin embargo desde google maps si que me lo muestra:
mapa en google maps

7:33 AM  
Blogger Kuminabe said...

pues tras insertar un par de comentarios incorrectos (que luego he borrado), e investigar un poco me auto-contesto a mis preguntas y poder así ayudar a alguién que se vea en la misma situación.

el hecho de que no se me mostrase la información del marcador en el mapa insertado en mi blog y si se mostrase al visualizarlo directamente en google maps, es que tengo como predefinido como color de texto para el blog blanco. como el color de fondo de las ventanas de información de marcador de google maps también es blanco, no se visualizaban. la solución es cambiarle la propiedad color al div donde se muestra el mapa y solucionado.

9:14 AM  
Blogger tal rasha said...

Puedo incrustar el código que biene con la key generada de google maps en el hi5 por ejemplo o dentro del blogger o blogspot, y si se puede como se hace porfa necesito ayuda

10:16 PM  

Post a Comment

<< Home