{"id":8487,"date":"2015-02-25T09:50:39","date_gmt":"2015-02-25T07:50:39","guid":{"rendered":"https:\/\/www.hostinet.com\/?p=8487"},"modified":"2017-07-14T10:49:16","modified_gmt":"2017-07-14T08:49:16","slug":"insertar-un-mapa-google-maps-en-joomla3","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/joomla\/insertar-un-mapa-google-maps-en-joomla3\/","title":{"rendered":"Insertar un mapa Google Maps en Joomla!3"},"content":{"rendered":"
<\/div>

\n\tHoy en día es bastante común encontrarnos con un mapa descriptivo<\/strong> en muchas páginas web. Ya sea una indicación<\/strong> sobre el cómo llegar a nuestro negocio, una localización<\/strong> de los mejores restaurantes de la zona o incluso la ruta<\/strong> en bicicleta programada para el fin de semana, la aplicación Maps<\/strong> de Google es la más utilizada en este sentido.\n<\/p>\n

\n\tHoy vamos a aprender cómo integrar un mapa en Joomla.<\/strong>\n<\/p>\n

\n

\n\t[ninja-popup ID=13602] *  SUSCRÍBETE AHORA <\/span><\/span> para recibir en tu email más artículos de expertos en Joomla. CLICK AQUÍ – ES GRATIS!!!<\/span><\/span><\/strong>[\/ninja-popup] \n<\/p>\n

\n

\n\t¿Cómo insertar un mapa Google Maps en Joomla!3?
\n<\/h2>\n

\n\tPara ello accedemos a Google Maps<\/a> y buscamos una dirección cualquiera<\/a> en la barra de búsqueda.\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tUna vez localizada nuestra geolocalización<\/strong>, en la parte baja de la pantalla veremos el icono de una rueda dentada<\/strong>, en la que haremos click para después seleccionar la opción “Compartir e insertar mapa<\/strong>”:\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tSe nos abre una ventanita<\/strong> nueva en la que se nos brindan dos opciones<\/strong>:\n<\/p>\n

\n\tCompartir enlace
\n<\/h3>\n

\n\tEste enlace es lo mismo que tenemos en nuestra barra de navegación<\/strong>. Podríamos copiarlo y pegarlo en nuestra entrada para generar así un link<\/strong> al mapa que se abriría en nuestro navegador<\/strong>.\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tEsta solución es muy provisional y nada práctica<\/strong> para nuestros visitantes. Nosotros queremos que el propio mapa<\/strong> quede embebido<\/strong> en nuestro artículo<\/strong>. Para ello, seleccionaremos la segunda opción:\n<\/p>\n

\n\tInsertar mapa
\n<\/h3>\n

\n\tEn esta sección nos encontramos el código para embeber<\/strong> un mapa en nuestra publicación. En la pestañita<\/strong> en la que por defecto aparece “Mediano” podemos escoger el tamaño<\/strong> del mapa que queremos publicar entre tres tamaños predeterminados (Pequeño, Mediano y Grande), e incluso podemos darle el tamaño del mapa<\/strong> en píxeles escogiendo la opción “Tamaño personalizado<\/strong>”.\n<\/p>\n

\n\tUna vez tengamos el código copiado<\/strong>, lo tendríamos que añadir en nuestra publicación vía texto. Para ello, hacemos click en el botón “cambiar editor<\/strong>” de nuestra entrada para que este nos permita introducir texto con etiquetas<\/strong> e introducimos el código copiado<\/strong> en Google Maps en el lugar escogido.\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tPublicamos la entrada<\/strong> y ya tendríamos nuestro mapa embebido en nuestro artículo.\n<\/p>\n

\n\tPero Joomla!<\/strong> tiene un problema<\/strong>: al pegar el código, éste desaparece<\/strong> sin motivo alguno y no nos permite embeber un mapa. Este problema lo causa del editor de textos<\/strong> que por defecto viene asignado en Joomla. Vamos a aprender a alterar este editor<\/strong> y a conseguir que nuestro mapa quede embebido.\n<\/p>\n

\n\tPara ello, accedemos a la sección Usuarios > Gestor de Usuarios<\/strong>.\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tEn este apartado, visualizamos los usuarios que hemos creado. Hacemos click en editar el usuario<\/strong> con el que vamos a embeber el mapa.\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tAccedemos a la pestaña “Opciones Básicas<\/strong>”.\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tEn este apartado, seleccionamos el menú desplegable de “Editor<\/strong>” y seleccionamos la opción “Editor – Ninguno<\/strong>”.\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tAplicamos<\/strong> los cambios y volvemos a nuestro artículo<\/strong>. Veremos que en este momento únicamente podemos editar<\/strong> el artículo en forma de texto<\/strong>. Es el momento de pegar el código<\/strong> <iframe> que hemos copiado de Google Maps:\n<\/p>\n

\n\t\"imagen<\/a>\n<\/p>\n

\n\tGuardamos los cambios<\/strong> y visualizamos el artículo. Veremos que el mapa se ha pegado sin problemas. El resultado<\/strong> sería el siguiente:\n<\/p>\n

\n\t