Office 365: Como insertar un mapa en nuestro sitio público!

Cuando creamos un sitio web para dotarnos de presencia en Internet, normalmente necesitaremos añadir la típica página de localización al mismo…lógicamente, con el sitio web que se crea por defecto en SharePoint Online en Office 365 sucede lo mismo. Para poder disponer de un mapa en nuestro sitio público de Office 365:

  • Navegamos hasta el sitio público y nos validamos pulsando la opción “Iniciar sesión de miembro” del menú vertical.
  • De esta forma, accedemos a la biblioteca “Páginas web” que contiene las páginas de nuestro sitio público. Pulsamos sobre la opción “Nueva página” de la Ribbon para crear una nueva página.
  • En la ventana que se abre, elegimos el tipo de plantilla a aplicar para la página y pulsamos “Siguiente”.
image image image
  • A continuación especificamos el nombre de la página y la ubicación de la misma en el menú vertical. Pulsamos “Finalizar” para que se cree la página.
  • Cuando concluye el proceso de creación de la página, se muestra la misma en tiempo de diseño en el navegador de forma que podremos comenzar su personalización.
  • En este caso, lo que queremos es añadir un mapa de contacto y tenemos dos opciones: usar el gadget “Mapa e instrucciones” disponible en la sección “Insertar” de la Ribbon o bien usar el gadet HTML que nos permite insertar el código HTML de un mapa de Bing Maps o de Google Maps. Si comenzamos por la primera de las posibilidades, se abre una ventana modal en la que podremos especificar la dirección concreta a partir de una dirección de ejemplo. Como veis, dicha ventana cuenta con la pestaña “Opciones de presentación” que nos permite realizar configuraciones adicionales como el tamaño del mapa, que sea interactivo, etc.
image image image
  • Una vez configurado el mapa, pulsamos “Aceptar” para que se inicie el proceso de validación de dirección que realiza este Gadget. En el caso de la dirección que he indicado, este proceso ha identificado dos direcciones coincidentes y nos pide confirmación de cuál es la correcta.
  • Seleccionamos la dirección correcta (en mi caso la segunda), pulsamos de nuevo “Aceptar” de forma que se inserte en la página y comprobamos el resultado obtenido. Aunque el resultado obtenido es aceptable, he de decir que el efecto de las parametrizaciones adicionales que se han añadido da un resultado tanto pobre.
  • La segunda de las opciones para insertar el mapa pasa por incrustar un gadget de tipo HTML en la página que visualice un mapa de Bing Maps o de Google Maps. Si vamos por esta última opción, lo primero que tenemos que hacer es ir a la página de Google Maps, introducir la dirección en cuestión y una vez visualizada pulsar sobre el botón “Enlazar” que nos da tanto la Url de la página como el código HTML necesario para poder visualizar el mapa en otra web.
image image image
  • En mi caso, el código HTML a insertar es el siguiente:
   1: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Camilo+Alonso+Vega,+41+Santander&amp;aq=&amp;sll=40.396764,-3.713379&amp;sspn=10.921213,23.269043&amp;ie=UTF8&amp;hq=&amp;hnear=Av+de+Camilo+Alonso+Vega,+41,+39012+Santander,+Cantabria&amp;z=14&amp;ll=43.465155,-3.821124&amp;output=embed"></iframe><br /><small><a href="http://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=Camilo+Alonso+Vega,+41+Santander&amp;aq=&amp;sll=40.396764,-3.713379&amp;sspn=10.921213,23.269043&amp;ie=UTF8&amp;hq=&amp;hnear=Av+de+Camilo+Alonso+Vega,+41,+39012+Santander,+Cantabria&amp;z=14&amp;ll=43.465155,-3.821124" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>

  • Este código es el que tenemos que añadir en la ventana modal de configuración del gadget HTML.
  • Tras pulsar el botón “Aceptar”, observaremos el resultado que en mi opinión mejora al gadget propio de mapas que viene en el diseñador de sitios públicos de SharePoint Online.
  • Si hacemos lo mismo con un mapa de Bing Maps, en este caso usaremos la opción “Share” disponible tras localizar la dirección correspondiente.
image image image
  • En este caso, el código HTML a usar en el nuevo gadget HTML que insertaremos es el siguiente:
   1: <div id="mapviewer"><iframe id="map" scrolling="no" width="500" height="400" frameborder="0" src="http://www.bing.com/maps/embed/?v=2&amp;cp=43.464749283409375~-3.8214156000000065&amp;lvl=16&amp;dir=0&amp;sty=r&amp;where1=Calle%20Camilo%20Alonso%20Vega%2C%2041%2C%2039006%20Santander&amp;form=LMLTEW&amp;pp=43.46474916~-3.8214156000000003&amp;emid=66328a7e-b2c8-6987-7432-5721f6546521"></iframe><div id="LME_maplinks" style="line-height:20px;"><a id="LME_largerMap" href="http://www.bing.com/maps/?v=2&amp;cp=43.464749283409375~-3.8214156000000065&amp;lvl=16&amp;dir=0&amp;sty=r&amp;where1=Calle%20Camilo%20Alonso%20Vega%2C%2041%2C%2039006%20Santander&amp;form=LMLTEW" target="_blank" style="margin:0 7px">View Larger Map</a><a id="LME_directions" href="http://www.bing.com/maps/?v=2&amp;cp=43.464749283409375~-3.8214156000000065&amp;lvl=16&amp;dir=0&amp;sty=r&amp;where1=Calle%20Camilo%20Alonso%20Vega%2C%2041%2C%2039006%20Santander&amp;form=LMLTEW&amp;rtp=%7Epos.43.464749283409375_-3.8214156000000065_Santander" target="_blank" style="margin:0 7px">Driving Directions</a></div></div>

  • Repetimos el proceso comentado para el mapa de Google Maps para poder insertar en este caso el código HTML correspondiente al mapa de Bing Maps.
  • Comprobamos el resultado obtenido que es muy aceptable al igual que sucede con el mapa de Google Maps mejorando bastante las prestaciones del Gadget de tipo mapa disponible en el diseñador.
image image

Y hasta aquí llega este post sobre posibilidades para insertar un mapa de localización en nuestra web pública de Office 365.

Publicado por

Juan Carlos González

Juan Carlos es Ingeniero de Telecomunicaciones por la Universidad de Valladolid y Diplomado en Ciencias Empresariales por la Universidad Oberta de Catalunya (UOC). Cuenta con más de 12 años de experiencia en tecnologías y plataformas de Microsoft diversas (SQL Server, Visual Studio, .NET Framework, etc.), aunque su trabajo diario gira en torno a SharePoint & Office 365. Juan Carlos es MVP de Office Servers & Services desde 2015 (anteriormente fue reconocido por Microsoft como MVP de Office 365 y MVP de SharePoint Server desde 2008 hasta 2015), coordinador del grupo de usuarios .NET de Cantabria (Nuberos.Net, www.nuberos.es), co-fundador y coordinador del Grupo de Usuarios de SharePoint de España (SUGES, www.suges.es), así como co-director de la revista gratuita en castellano sobre SharePoint CompartiMOSS (www.compartimoss.com). Hasta la fecha, ha publicado 8 libros sobre SharePoint & Office 365 y varios artículos en castellano y en inglés sobre ambas plataformas.

2 comentarios en “Office 365: Como insertar un mapa en nuestro sitio público!”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *