05 abril 2007

Introducir GoogleMaps en Blogger

He conseguido introducir el mapa que he creado anteriormente en Google Maps dentro de este blog. Para eso estoy siguiendo las instrucciones del blog de un Aussie. Sin embargo, estas instrucciones simplemente dicen cómo introducir un mapa en tu blog, pero yo voy a intentar ir más allá y voy a poner un mapa personalizado (de los MyMaps)...

Pasos a seguir:
1.- Consigue una key de uso de Google Maps aquí
2.- Edita tu plantilla de blogger e introduce el siguiente código en justo después de abrir el tag head:

3.- Crea un nuevo post y añade el siguiente código. Atención,que aquí es donde debes sustituir tus valores. Luego veremos como...

4.- sustituye el text -- your key here -- por tu key de google maps (la del punto 1)
5.-Supongo que has creado un mapa en MyMaps con tus marcadores, si no esto no tiene sentido. Ve a la página de tu mapa
6.- Encima del mapa hay un menú que dice KML. Pon el ratón encima, pulsa botón derecho y elige "Copiar ruta enlace" (Yo uso firefox, si tu usas ie es tu problema)
7.- Sustituye la url de la funcion GGeoXml con esta url que tienes en el portapapeles
8.- Vuelve al map y pulsa sobre el menú "Enlazar esta página". Aparecerá una url completa en tu navegador, copia y pégala en el notepad porque hemos de destriparla
9.- Entre los parámetros de la url busca uno llamado ll=. Esos son tu longitud y latitud. Debes ponerlos en el orden que vienen dentro del método map.setCenter(new GLatLng(X,Y),zoom);
10.- Añade el siguiente div en el sitio donde quieras poner tu mapa:


Y ya está! A algunos no entenderán ni una palabra de este post, y a mi bricomanía me parece ciencia ficción, pero tiene mucho éxito. Así que cada uno a lo suyo... Hasta luego, corazones.

ACTUALIZACIÓN (27/5):Han habido algunos cambios en la API que provocaban que no se visualizaran los tags azules! Simplemente hay que cambiar la referencia a la versión de la API (la primera línea del segundo script) a v=2.x, y todo vuelve a funcionar.


24 comentarios:

Kenneth Mata dijo...

Te agradesco muchisimo el post sobre este topico, justamente el Jueves empeze a hacer un mapa.

De hecho My Maps lo hace super facil de implementar y las instrucciones que pusiste fueron super importantes para poder hacer trabajar esto.

R R dijo...

Lo de google maps es increible, utilisimo. En nuestro caso, hemos hecho un mashup que presenta los anuncios, tanto los nuevos como los que caducan, en el mapa en tiempo real: www.tablondeanuncios.com/live
Que os parece!

Vig dijo...

Ciao, ho scritto un breve tutorial in Italiano anch'io. Ho preso spunto dal tuo. Spero non ti dispiaccia. Puoi vederloo a questo indirizzo:Vigolo.info

Christian dijo...

Excelente post. Será de gran utilidad.

Saludos

DR2ooo dijo...

Looks like there is one problem with GeoXML. The lines and the polygons created in MyMaps are not clickable, and the coments won't show up for them as they do on MyMaps.

Bosco dijo...

Hi dr2ooo! lines and polygons are working in my embeded MyMap... You can click on any mark, and I've just created a polygon over the montain, and it's working too... May it be a browser problem? I use firefox 2.0

DR2ooo dijo...

You're right! It's [style] type="text/css" v\:* { behavior:url(#default#VML); } [/style] that I've been missing. Without that it doesn't work in IE, even though it works fine in Firefox without that. Too bad the polygons and lines are not clickable as in MyMaps.

DR2ooo dijo...

Do you have an example of the embedded map with clickable polygons?

Overall I had 2 issue:
1. IE didn't work, but I found a problem with that.
2. Polygons and Lines are still not clickable, as they are in MyMaps directly.

Aragorn dijo...

Thanks for the tutorial, truly useful and clear! u are great!!
Hello from Italy

Ignasi dijo...
El autor ha eliminado esta entrada.
Ignasi dijo...

Hola!

Perdona per eliminar la entrada anterior, me he equivocado antes.

He puesto el codigo que pones, y funciona mas o menos.

Sale el mapa que quiero, con las lineas y puntos de interes, pero no sale la información que hay en "my maps"

Tambien en my maps sale en vista hibrida, pero en la de mo blog sale solo calles.

Que puede ser?

Moltes gràcies!

Bosco dijo...

Ignasi, lee la actualización que acabo de hacer en el post, seguramente es el problema del cambio de versión de las APIs. Prueba con eso!

Ignasi dijo...

Moltes gràcies per l'informació :)

Ara ja puc posar els mapes que vull!

El tema que m'ocupa ara es posar en un ifram (o embeded) els video de tv3
(va bé en firefox, pero funciona malament en explorer, que extrany!!) :(

Josue M. dijo...

hola man , estaba viendo tu tutorial y esta bueno pero no me salen los mensajes de las marcas en los mapas.
cual puede ser el problema?
te dejo el link para que veas, lo puse en mi blog, solo aparecen los cuadros de mensaje vacios, este es el link
www.mundocoolf.blogspot.com

Bosco dijo...

Josué:

Es posible que no estés utilizando la api correcta. Mira esta línea de tu código:


    <script src="http://maps.google.com/maps?file=api&v=2&key=A..." type="text/javascript"></script>



Y pureba a cambiar la versión por v=2.x


    <script src="http://maps.google.com/maps?file=api&v=2.x&key=A..." type="text/javascript"></script>

Josue M. dijo...

ok gracias eso era,ya voy estudia la API de googlempas para personalizarlo mas todavia...
mil gracias

Saludos...

Alvaro Fernandez dijo...

Hola, queria saber si sabes como hacer para que el mapa que salga por defecto sea el satelita, pues el area que quiero incluir no tiene mapas de calles y avenidas pero si satelital, sabras como hacerlo? Saludos

martamans dijo...

Otra solución que he encontrado que me ha sido más fácil, y que con una cuenta de google puedes hacer
1) en http://maps.google.es/ te pones en Mis Mapas
2) creas un mapa nuevo, si quieres con indicacones encima y todo
3) te vas a la pagina http://www.dr2ooo.com/tools/maps/
En el mapa de la izquierda, buscas la zona que tienes en tu mapa original, cuando la has encontrado, haces clic en set zoom y set center, te aparecerá a la derecha.
4)vas a tu google maps i donde pone KML , con el boton derecho copias la direccion del enlace, y lo pegas en la pagina de embed maps , dónde pone My Maps KML y lo pegas. Luego te saldrá encima del mapa tus anotaciones.
5) ya solo falta que pegues en tu blog o página web, lo que sale en embed maps en la parte del codigo "iframe..."
En la misma página, en inglés, ay un enlace donde viene muy bien explicado:http://www.digitalgeography.co.uk/juicy-geography/
espero que os sirva!

Anónimo dijo...

Juntos y revueltos Google Maps con YouTube, Panoramio y Flickr.

Los rincones más interesantes de nuestro planeta, agrupados por tipología, con sus coordenadas y un video. Obsérvalos a vista de pájaro o visualiza fotografías del lugar.

MundiVideo

Saludos a todos,

juanito dijo...

yo integro algunos mapas de Google Maps en Blogger a través de este sitio web www.mapalia.com que tiene un sistema para crear tu punto en el mapa con el texto que quieras y luego meterlo en el blog.

Johann Titor dijo...

¿no es más facil usar el iframe que te da por defecto el enlace de página y dimensionarlo a tu antojo con width y height? el resultado es prácticamente el mismo :/

Comunidad de Puebla dijo...

¿Estas indicaciones sirven para Wordpress?

Bosco dijo...

No, para usarlo en wordpress mira esta otra entrada en mi nuevo blog de wordpress:
http://bcurtu.com/?p=195

Cinthya Lyn dijo...

Hola Muchas gracias por lo que pusiste, estuvo genial, me fue de mucah ayuda

Gracias, besito :D