{"id":175,"date":"2014-11-03T09:00:40","date_gmt":"2014-11-03T08:00:40","guid":{"rendered":"https:\/\/blogs.ua.es\/idesweb\/?p=175"},"modified":"2014-10-19T19:11:34","modified_gmt":"2014-10-19T17:11:34","slug":"google-maps-insercion-de-un-mapa-personalizado","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/idesweb\/2014\/11\/03\/google-maps-insercion-de-un-mapa-personalizado\/","title":{"rendered":"Google Maps: inserci\u00f3n de un mapa personalizado"},"content":{"rendered":"

Un nuevo v\u00eddeo de\u00a0iDESWEB<\/a>\u00a0que se ofrecer\u00e1 a trav\u00e9s de la iniciativa\u00a0Act\u00edvate<\/a>\u00a0patrocinada por Google.<\/p>\n

[kml_flashembed movie=”http:\/\/www.youtube.com\/v\/fBgUB_t0Hq8″ width=”560″ height=”315″ wmode=”transparent” \/]<\/p>\n

Transcripci\u00f3n:<\/p>\n

Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a explicar c\u00f3mo puedes insertar un mapa personalizado de Google Maps en una p\u00e1gina web.<\/p>\n

En el v\u00eddeo anterior \u201cGoogle Maps: inserci\u00f3n de un mapa\u201d, te expliqu\u00e9 c\u00f3mo insertar un mapa sencillo en una p\u00e1gina web.<\/p>\n

En este v\u00eddeo te voy a explicar c\u00f3mo insertar un mapa personalizado, es decir, un mapa en el que se muestra informaci\u00f3n de nuestro inter\u00e9s.<\/p>\n

Se puede mostrar texto, im\u00e1genes, v\u00eddeos.<\/p>\n

Muy importante, lo que te voy a mostrar a continuaci\u00f3n puede ser que s\u00f3lo funcione si la p\u00e1gina est\u00e1 publicada en Internet o en un servidor web propio. Con una p\u00e1gina local puede ser que no funcione correctamente.<\/p>\n

El acceso a la herramienta de creaci\u00f3n de mapas personalizados lo podemos hacer de diferentes formas. Por ejemplo, [PULSAR] podemos acceder a trav\u00e9s de esta URL.<\/p>\n

O tambi\u00e9n podemos, en Google Maps, pulsar en el cuadro de b\u00fasqueda y se desplegar\u00e1 la opci\u00f3n de \u201cMis mapas\u201d.<\/p>\n

Vamos a crear un mapa personalizado.<\/p>\n

En Google Maps, para que aparezca la opci\u00f3n de \u201cMis mapas\u201d tengo que estar dentro de mi cuenta de usuario de Google, ya que mis mapas se asocian, se almacenan en mi cuenta. Si no estoy dentro de mi cuenta pues no aparecer\u00e1 la opci\u00f3n.<\/p>\n

Una vez que est\u00e9 ya registrado, puedo acceder a \u201cMis mapas\u201d y puedo crear un mapa nuevo.<\/p>\n

Se abre una nueva pesta\u00f1a en la que se mostrar\u00e1 un mapa de Google Maps pero con una serie de opciones para personalizar el mapa.<\/p>\n

En primer lugar puedo cambiarle el nombre al mapa y ponerle por ejemplo \u201cMapa de prueba para iDESWEB\u201d. Le puedo poner una descripci\u00f3n si quiero.<\/p>\n

A continuaci\u00f3n puedo empezar a dibujar el mapa, por ejemplo, me voy a situar sobre la Universidad de Alicante y voy a buscar el edificio en el que se encuentra mi despacho y voy a situar un marcador, las chinchetas que aparecen sobre los mapas en Google Maps. Por ejemplo, la voy a situar aqu\u00ed y le puedo poner un nombre, \u201cMi despacho\u201d, le puedo poner tambi\u00e9n una descripci\u00f3n y lo guardo.<\/p>\n

Ya tengo un marcador en mi mapa personalizado, que aqu\u00ed puedo editar sus caracter\u00edsticas. Puedo cambiar el color, por ejemplo, o puedo cambiar el icono y podr\u00eda buscar un icono m\u00e1s apropiado. Por ejemplo, podr\u00eda poner un ordenador.<\/p>\n

A continuaci\u00f3n voy a buscar otro elemento. Por ejemplo aqu\u00ed este comedor, este restaurante y le voy a poner otro marcador. Y voy a editar otra vez el icono y como es un restaurante le voy a poner este icono. Y ya lo tenemos ah\u00ed. Y ahora por ejemplo voy a buscar otro restaurante en la Universidad de Alicante, este bar, y le voy a colocar otro icono m\u00e1s. Y le vuelvo a cambiar el icono.<\/p>\n

Y ya tenemos aqu\u00ed un mapa personalizado en el que se muestran tres marcadores que yo he definido.<\/p>\n

Podemos dibujar m\u00e1s cosas, por ejemplo podemos dibujar l\u00edneas. Voy a a\u00f1adir una l\u00ednea que es la ruta desde mi despacho hasta el restaurante. Este es el camino que suelo realizar para ir a comerme un bocadillo. \u201cCamino al restaurante\u201d. Guardo.<\/p>\n

Otra vez aqu\u00ed si quiero puedo editar algunas propiedades, por ejemplo el ancho. Y puedo cambiar pues tambi\u00e9n el color. Y voy a dibujar otra l\u00ednea m\u00e1s, ya la \u00faltima, al otro restaurante.<\/p>\n

Pulso aqu\u00ed, a\u00f1adir l\u00ednea. Y este es el camino que me conduce. Y a este tambi\u00e9n le voy a cambiar el ancho y le voy a poner otro color.<\/p>\n

Muy bien, ya tenemos nuestro mapa. Y ahora yo lo quiero publicar en una p\u00e1gina web. Para ello en primer lugar tengo que compartirlo. Le doy a esta opci\u00f3n de aqu\u00ed, compartir. Con esto puedo indicar si quiero que el mapa sea privado, solamente compartirlo con una serie de usuarios que yo introduzco. O puedo cambiarlo y que el mapa sea p\u00fablico en la Web, de forma que cualquier persona pueda acceder. Lo cambio a \u201cP\u00fablico en la Web\u201d y ahora ya a este mapa puede acceder cualquier persona.<\/p>\n

\u00bfC\u00f3mo lo comparto? \u00bfC\u00f3mo obtengo el c\u00f3digo necesario para insertarlo en mi p\u00e1gina web?<\/p>\n

Necesito un fragmento de c\u00f3digo HTML para insertarlo en mi p\u00e1gina web. Esto me lo proporciona el propio Google Maps. Vengo a esta opci\u00f3n de aqu\u00ed, tengo una serie de opciones, un men\u00fa. Y le doy a \u201cInsertar en mi sitio\u201d. Pulso y se me proporciona un fragmento de c\u00f3digo HTML que debo de pegar en mi p\u00e1gina web. Lo copio y ahora me voy a una p\u00e1gina de ejemplo que tengo realizada y lo pego. Evidentemente no tengo que cambiar nada de este c\u00f3digo HTML. Bueno, podr\u00eda cambiar aqu\u00ed la anchura y la altura para que el mapa fuera m\u00e1s o menos grande.<\/p>\n

Lo guardo, lo ejecuto. Y, se est\u00e1 cargando, mi mapa, que ya puedo pues utilizar. Y aqu\u00ed aparecen las descripciones que yo he etiquetado en mi mapa. Y lo puedo usar como cualquier otro mapa de Google Maps.<\/p>\n

Interesante, \u00bfverdad?<\/p>\n

Ya para terminar, me gustar\u00eda recordarte algunos de los sitios web en los que puedes encontrar m\u00e1s informaci\u00f3n sobre m\u00ed y sobre mi trabajo, y dos formas de contactar conmigo, a trav\u00e9s de mi correo electr\u00f3nico sergio.lujan@ua.es y a trav\u00e9s de mi cuenta en Twitter @sergiolujanmora.<\/p>\n

Recuerda que este v\u00eddeo forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d que est\u00e1 disponible en la direcci\u00f3n idesweb.es.<\/p>\n

Muchas gracias por tu atenci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"

Un nuevo v\u00eddeo de\u00a0iDESWEB\u00a0que se ofrecer\u00e1 a trav\u00e9s de la iniciativa\u00a0Act\u00edvate\u00a0patrocinada por Google. [kml_flashembed movie=”http:\/\/www.youtube.com\/v\/fBgUB_t0Hq8″ width=”560″ height=”315″ wmode=”transparent” \/] Transcripci\u00f3n: Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a explicar c\u00f3mo puedes insertar un mapa … <\/p>\n

Continue reading “Google Maps: inserci\u00f3n de un mapa personalizado”<\/span><\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[676],"tags":[],"class_list":["post-175","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":2,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/175\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/175\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/media?parent=175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/categories?post=175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/tags?post=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}