Antes de comenzar, si no estas interesado en construir y personalizar tu propio código entonces ve los vínculos siguientes a desarrollos ya hechos y publicados en CodePlex
1.- Display Google Maps in a Sharepoint Web Part using a Sharepoint List
2.- Google Map WebPart from SharePoint List
3.- Basic SharePoint-Google-Maps-WebPart for SharePoint-Lists
Yo use el tercero, me gusto y revisando/analizando el codigo aprendí algunas cosas que no sabía, mi problema fué que no hacía lo que yo requería. Sin embargo si vale la pena conocer estos desarrollos.
Personalmente tengo que decir que este reto me encantó, desesperó, emocionó y angustió. Pase mucho tiempo haciendo pruebas con la API 2.0 de Google maps, luego me percaté de que pronto estará fuera y que Google no dará mas servicio a esta por lo que decidí intentarlo con la API 3 (al final lo logre) sin embargo me estaba demorando mucho y en mi desesperación intente inclusive hacerlo con el servicio de mapas de Microsoft llamados Bing Maps a lo cual diré que me dejo mucho de que desear, tan solo en el tema de la velocidad de carga de los mapas fué motivo suficiente para que reintentara con Google o talvez no supe usarlo como se debe para sacarle todo el jugo, este punto después lo voy a intentar solo por curiosidad.
Nota 1: solo en algunos de los pasos que voy a describir voy a explicar a detalle, en la mayoría no pues estaré asumiendo que los lectores tienen suficiente experiencia en SharePoint como para crear una lista personalizada e importar datos de Excel. También aviso que la información aquí contendida es el resultado de haber tomado ideas de otros blogs (los cuales nombraré mas adelante), quiero agradecer en especial a mis buenos amigos Manuel Iván García Sandoval y Luis Angel Gutierrez Guevara por su enorme ayuda con JavaScript, ellos dos son dos de los mejores desarrolladores web que yo conozco.
Nota 2: estoy usando el API 3 de Google, en este artéculo no describo a detalle ninguna de las funciones que uso en mi JavaScript por la razón de que Google ha documentado bastante bien y no tendría caso que yo las repita, sin embargo si gustas enviarme correo electrónico para preguntarme sobre alguna en particular puedes hacerlo. Debido a que no estoy pagando por el servicio de mapas Google me limita a únicamente 5 (cinco) Geolocalizaciones (para decirlo de otra forma poner 5 pines) por búsqueda por lo que si tu deseas mejorar la velocidad de la busqueda de Geolocalización y no tener limite entonces hay que pagarle a Google.
Objetivo y Características
Objetivo: Conectar una lista de SharePoint con información geográfica (dirección, calle, estado, codigo postal, latitud, longitud) a un mapa de Google Maps de manera que cuando la lista se cargue muestre en el mapa "pins" de su posición.
El listado que me dieron lo tuve que "normalizar" y crear una tabla con una relación de uno a varios, entonces lo que me quedó fué una lista con el encabezado o registro padre y otra lista con los registros relacionados o hijos. Además preferí mucho mas hacerlo así pues me dió la posibilidad de crear un combo box para de ahí seleccionar el conjunto de registros que quería ver, algo como un filtrado (vean la imagen 1)
Funcionalidad deseada:
- "Pins" para cada lugar o locación
- Poder utilizar ya sea la dirección del lugar o su latitud & longitud
- Al dar clic sobre el pin del lugar mostrar una ventana (o globo si asi gustan) de información
- Al dar clic sobre la dirección en la lista de SharePoint mostrar una ventana (o globo si asi gustan) de información
- En la ventana de información, proporcionar un vínculo para poder editar el registro correspondiente al "pin" del mapa.
Imagenes del resultado final:
1. Así se ve la página principal, en el combo box tengo la lista de registros padre, abajo el webpart (Content Editor WebPart) con el mapa de Google y al final la lista de registros que son filtrados dependiendo del valor del combo.
La siguiente imagen muestra cuando un elemento del combo es seleccionado, primero se carga la lista de SharePoint y esta manda llamar funciones del mapa encargadas de poner los "pins" de cada registro, se crean también los vínculos en el campo de dirección que ayudarán al usuario a localizar el pin deseado.
3. Cuando el usuario da clic en alguno de los "pin" se muestra una ventana de información y en esta hay un vínculo para poder editar el registro de la lista de SharePoint que corresponde al "pin". Los rectangulos rojos muestran donde estan los vínculos: uno en la ventana de info y el otro en el campo de direccíón de la lista
Pasos para la creación de todos los elementos
1. Crear una lista personalizada en SharePoint para los registros padre y cargarla con los datos
1.1 Columnas para lista de registros padre:
- Titulo/Nombre: single line of text
2. Crear una lista personalizada en SharePoint para los registros hijo y cargarla con los datos
2.1 Columna para los registos, (aqui si es importante tomar en cuenta el tipo de campo pues te va a ahorrar mucho tiempo a la hora de meter el JavaScript y el XSLT)
- (Padre) Nombre: Lookup (relacionado a la lista padre)
- Dirección - Multiple lines of text
- Ciudad - Single line of text
- Estado - Single line of text
- Latitud - Single line of text
- Longitud - Single line of text
MUCHO OJO!, en el campo de Dirección que es único Multiple lines of text, si no quieres problemas en el codigo JavaScript de estar quitando simbolos basura asegurate de que el tipo de texto permitdo sea "Plain Text" ... Ahhh!!! no puedo creer el tiempo que perdí buscando la forma de limpiar el valor de este campo hasta que me puse a ver investigar y encontré que cuando el texto es enriquecido y tiene formato, los valores traen codigo que el explorador convierte en negritas, tipos de letra y demás.
3. Abre la pagina principal con SharePoint Designer (SPD), quita todo web part que no te sirva para este proyecto y agrega un control DropDown List de ASP.NET. Yo lo puse en una celda entre la zona de web parts header y la zona left, preferí hacerlo asi en caso de que necesitara poner algun banner de instrucciones en la zona header.
4. Configura el orgien de datos del control para que este contectado a la lista con los registros padre, ordenalos por el nombre o título del registro y activa la casilla de "Enable AutoPostBack" del control
5. Agrega en la zona left un web part de tipo Web Content Editor este será el que muestre el mapa, mas adelante describiré como se configura.
6. Inserta debajo del web part del punto anterior un Data View, este contendrá los registros hijo relacionados y que serán filtrados cuando el usuario seleccione algun elemento del DropDown List. Configura el Data View para que muestre los datos que necesites, yo puse los siguientes:
- Nombre del registro padre
- Dirección
- Ciudad
- Region
- Estado
- Codigo Postal
También configuré para tener funcionalidad de filtrado y agrupación, hay muchos usuarios que les gusta poder hacer esto cuando hay muchos registros en la vista de datos.
Si no sabes como configurar una vista de datos, por favor ve estos vínculos de mi blog:
Sigue la parte mas dificil y te recomiendo que la hagas unicamente hasta que termines de configrar el Data View. Tenemos que agregar codigo XSL que se encargará de mandar llamar la función que pondrá el pin en el mapa.
Da clic en el Data View y cambia a la vista de codigo en SPD, localiza la línea de código:
Debajo de esta agrega (y de ser necesrio modifica) este código:
Lo que esta plantilla o "Template" hace es que para cada registro de la vista de datos, revisa sí el registro contiene información de latitud y longitud y dependiendo del resultado manda llamar a la función showLatLonLocation o la funcion showAddress. Los valores para los parametros que mando a las fucniones se obtienen utiliznado XSL.
En la función showAddress el primer parametro es el que uso para poner el título al pin, el título aparece desplegado como un "Tool Tip Text" cuando el usuario pone el puntero del ratón sobre el pin y lo necesito tambien para la función que localiza el pin cuando el usuario da clic sobre la dirección. El titulo del pin esta compuesto de-- Dirección + Ciudad + Estado Cada valor separado por una coma.
Otro "Mucho Ojo" aqui, debido a que el campo de dirección es de múltiples lineas de texto necesitamos normalizarlo para remover los espacios no deseados, no hacer esto genera codigo que no es comprensible. Para lograrlo se utiliza la función normalize-space()
7. Modifica el campo de dirección para que trabaje como vínculo a la función de localización de "pin" que mas adelante describo. En el cuadro de selección formato del campo cambia el valor de "Format as:" a "Hyperlink", te aparecerá un mensaje de aviso de cambio de formato solo da clic en Aceptar y luego selecciona "Hyperlink options...", en el cuadro de dialogo verás que se puede configurar el texto que va a mostrarse en la vista de datos y el texto del hipervínculo el cual hay que cambiar para que mande llamar a la fucnión:
javascript:markerClicked('{@Address},{@City},{@State}','{@Facility}','{@Address}','{@IPRanges}','{@ID}')
Con este codigo se manda llamar a la función markerClicked y se le envian los parametros para la búsqueda del "pin" que corresponde a la dirección seleccionada asi como los textos que aparecerán en la ventana de información del "pin".
Ahora hay que conectarlo con el DropDown List para que los registros del Data View sean filtrados. Selecciona el Data View y crea un nuevo parametro que reciba el valor del control DropDown, tienes que fijaste en el nombre del control, en mi caso el control se llama DropDownList1.
El nombre del parametro lo necesitarás para la creación del filtro. Una vez que hayas creado el parametro, vuelve a seleccionar el Data View y ahora configura el filtro agregando uno nuevo y seleccionando el campo del nombre del padre, el que creaste como tipo Lookup.
Con el parametro y el filtro cada vez que el usuario cambie de selección del DropDown el Data View será actualizado y el mapa también.
8. A continuación crea una biblioteca de documentos si tu sitio aun no tiene una. En esta se almacena el documento de texto que contiene las funciones para que trabaje el mapa de Google, esta es la parte divertida pues ahi podrás modificar e incluir la funcionalidad que desees, yo me demore algun tiempo en entender las funciones porque estuve analizando los codigos de las paginas de ejemplo de los mapas que pone Google, hay cosas muy interesantes, de ahi se me ocurrió la idea de poder seleccionar el "pin" dependiendo de la dirección y enriquecer la experiencia del usuario.
A continuación pega todo el codigo que sigue, guardalo en un archivo .txt y subelo a tu biblioteca de documentos. Luego que lo tengas ahí abre tu explorador y edita la pagina, localiza el Web Content Editor y modificalo. Tienes que poner en el campo "Content Link" la dirección de tu archivo de texto ya en la biblioteca.
El código de el archivo de texto es el que pongo a continuación:
Finalizo este articulo agradeciendote por haber leído hasta aquí, regalame un comentario. Dejo las direcciones web de los blogs que me sirvieron para armar mi proyecto:
No hay comentarios:
Publicar un comentario