¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

Introducción al uso de GoogleMaps en Sharepoint y su posible utilización

Publicado el 02 febrero 2011 por Albertllueca

Pre-Analisis de propuesta para montar un sistema de localización de incidencias en un Sharepoint, basandose en Google Maps, para poder montar un plataforma de Participación Ciudadana donde los habitantes de una población pueden introducir sus quejas – sugerencias, más allá del propio buzón de sugerencias típico de los Ayuntamientos. Partimos de la premisa de que ya existen este tipo de herramientas en otros lenguajes PHP y Joomla! más concretamente.

El sistema implantado libremente en Joomla! nos permite ver un Mapa de Google con los marcadores que le hemos ido colocando tanto por el backend como administradores, así como por el frontend como usuarios registrados en nuestra plataforma. Podéis ver una demo en este enlace http://mapdemo.110mb.com/content/view/2/17/.

El codigo para poder mostrar un mapa de GoogleMaps en nuestra web es el siguiente, el cual coge la información de un fichero KML (construido por una consulta a base de datos o consulta CAML -por ejemplo):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
    <title>Example of KML overlay on a Google Map</title>
 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcktFen-Z7CQCe0dxIKmxeRReUzuwBhfUVuhk2aRjVRv1avb-hhQdlkzQnQ1P5PComj1CZx2jeOOyIw" type="text/javascript"></script>
    <script type="text/javascript">
 
    //<![CDATA[
 
    function load()
    {
      if (GBrowserIsCompatible())
      {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(38.256270, -85.701762), 11);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.addOverlay(new GGeoXml("archivo.kml"));
      }
    }
 
    //]]>
    </script>
 
  </head>
 
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="margin-right: 10px; float: left; width: 500px; height: 400px;"></div>
  </body>
</html>

La construcción del fichero KML es parecido al de un XML, donde se colocan nodos a partir de un nodo principal, cabe destacar que en la descripción, contenido del bocadillo blanco que aparece en el GoogleMaps podemos colocar todo lo que nos ocurra, ya que es un visor de HTML, en el ejemplo veremos como se puede colocar un video de YOUTUBE,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
 <Placemark>
  <name>Declan Butler's Avian Flu Outbreaks in Google Earth</name>
  <description><![CDATA[
<object width="240" height="200">
<param name="movie" value="http://www.youtube.com/v/_N805-TyUiY"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/_N805-TyUiY"
type="application/x-shockwave-flash" wmode="transparent" width="240"
height="200"></embed></object>]]>
</description>
  <LookAt>
   <longitude>101.5513816532019</longitude>
   <latitude>13.65113039555518</latitude>
   <altitude>0</altitude>
   <range>3571781.303404128</range>
   <tilt>0</tilt>
   <heading>10.18456659033348</heading>
   <altitudeMode>relativeToGround</altitudeMode>
  </LookAt>
    <Point>
   <coordinates>100.3689268271656,15.74695793086107,0</coordinates>
  </Point>
  </Placemark>
</kml>

Para crear este sistema en Sharepoint deberiamos de tener claro que debemos de crear una lista personalizada, para poder almacenar los marcadores. Los campos, a priori, podría ser los siguientes -hay que recordar que queremos que sea con usuarios anónimos-:

Nombre de Usuario
NIF de Usuario
Email de usuario
Dirección de la queja/sugerencia
Ciudad de la queja/sugerencia
Codigo Postal de la queja/sugerencia
Latitud  de la queja/sugerencia
Longitud  de la queja/sugerencia
Tipo  de la queja/sugerencia
Descripción  de la queja/sugerencia
Aprobada/Rechazada

Después deberiamos de Generar un Script que nos recorriera esta lista y nos genera el archivo KML, así la modificación del archivo /NewForm.aspx de la Lista para poder añadir de forma anónima el contenido en la misma.

Posible problema
El único inconveniente en esta forma de trabajar es la manera de obtener las coordenadas exactas del punto del mapa donde queremos introducir nuestra queja o sugerencia. Para ello podemos ir a las siguientes direcciones donde nos ofrecen el codigo para realizar operaciones simples con GoogleMaps:

Obtener coordenadas a partir de Dirección (JavaScript)
http://code.google.com/intl/es/apis/maps/documentation/javascript/v2/examples/geocoding-extraction.html

Ejemplo de codigo para sacar cosas de GoogleMaps
http://www.a2sistemas.com/blog/2009/03/20/obtener-la-latitud-y-longitud-de-una-direccion-con-google-maps-y-c/

Ejemplo de c# javascript
http://www.mikeborozdin.com/post/Working-with-Google-Maps-API-in-ASPNET.aspx