• Author / Uploaded
• Karla Stephanie

Citation preview

Versión. 3.2.0.1 -04/12/2008

DOCUMENTACION EN ESPAÑOL

Indice Iniciación Cómo empezas a utilizar GoogleMaps.Subgurim.NET ................................................................1 Clave de Google o Key ...............................................................................................................2 Comercial Key ...........................................................................................................................3 Basico .......................................................................................................................................5 Basico 2.....................................................................................................................................6 Basico 3.....................................................................................................................................8 Zoom ...................................................................................................................................... 10 Zoom 2.................................................................................................................................... 11 Tipo de Mapa .......................................................................................................................... 12 GKeyboardHandler .................................................................................................................. 13 Asignar Centro ........................................................................................................................ 14 Custom Mouse Cursors ........................................................................................................... 15 Minimizar Código .................................................................................................................... 16 Controles y overlays Controles Prefabricados. ......................................................................................................... 17 Controles Extra........................................................................................................................ 19 GOverViewMap....................................................................................................................... 21 Líneas...................................................................................................................................... 23 Polígonos ................................................................................................................................ 25 TileLayers ................................................................................................................................ 27 GGroundOverlay ..................................................................................................................... 29 GScreenOverlay ...................................................................................................................... 30 Custom Overlays ..................................................................................................................... 31 GStreetViewOverlay ................................................................................................................ 32 Hierarchical Map Type Control ................................................................................................ 33 GLayer .................................................................................................................................... 35 InfoWindows InfoWindow ............................................................................................................................ 36 InfoWindow con Icon .............................................................................................................. 37 InfoWindow con Pestañas ....................................................................................................... 38 ShowMapBlowUp.................................................................................................................... 40 GInfoWindowOptions.............................................................................................................. 41 Iconos Iconos ..................................................................................................................................... 45 Iconos Avanzados .................................................................................................................... 47 Marker Manager ..................................................................................................................... 49 Otros Mapas Static Map ............................................................................................................................... 51 GoogleEarth Map .................................................................................................................... 53 Mars Map ............................................................................................................................... 54

Moon Map .............................................................................................................................. 55 Sky Map .................................................................................................................................. 56 Custom Maps .......................................................................................................................... 57 GStreetViewPanorama ............................................................................................................ 59 Eventos Y JavaScript Eventos ................................................................................................................................... 61 Eventos de Servidor ................................................................................................................ 63 Eventos de Servidor2............................................................................................................... 67 ASP.NET Postback ................................................................................................................... 70 Custom Javascript ................................................................................................................... 72 Custom Inside Javascript ......................................................................................................... 74 ToString .................................................................................................................................. 76 GMap.ToString ........................................................................................................................ 77 getGMapElementById ............................................................................................................. 79 Store ....................................................................................................................................... 81 Geo GeoCoding .............................................................................................................................. 84 GeoCoding 2 ........................................................................................................................... 86 GeoCoding Avanzado .............................................................................................................. 88 Geocoding Inverso .................................................................................................................. 93 GGeoXml................................................................................................................................. 96 GTrafficOverlay ....................................................................................................................... 97 GDirections Basic .................................................................................................................... 98 GDirections Avanzado ............................................................................................................. 99 GeoIP .................................................................................................................................... 101 Gmaps Utility Library DragZoomControl.................................................................................................................. 103 LabeledMarker ...................................................................................................................... 105 ExtMapTypeControl .............................................................................................................. 106 MapIconMaker...................................................................................................................... 107 MarkerTracker ...................................................................................................................... 109 Otros Add Genérico ........................................................................................................................ 110 Movimiento y Animación ...................................................................................................... 112 GLatLngBounds ..................................................................................................................... 114 DataSource ........................................................................................................................... 116 Soporte PostBack .................................................................................................................. 118 GAdsManager ....................................................................................................................... 119 Nota y Agradecimiento Nota y Agradecimiento.......................................................................................................... 120

Cómo empezar a utilizar GoogleMaps.Subgurim.NET Previa Tras descargar el control y seguir las instrucciones de instalación, no tenéis más que arrastrar vuestro control desde vuestra ToolBox. Vuestra página quedará encabezada por algo similar a:

Y en vuestro .aspx tendréis:

Y para usar la librería en código, no olvidéis importarla mediante: C#: using Subgurim.Controles; VB.NET: Imports Subgurim.Controles

Instrucciones 1.- Lo primero que debéis hacer es conseguir una Key, pues lo exige Google para poder utilizar su API. La podéis conseguir desde aquí. Fijaos que esa clave depende del dominio donde vayáis a utilizarla, por lo que por cada Web donde utilicéis el GoogleMaps.Subgurim.NET debéis crear la Key apropiada. El modo más sencillo donde ubicar la clave es en vuestro web.config:

...

...

De este modo, el control ya se encargará de hacer el resto. 2.- Para un correcto funcionamiento en todos los navegadores, Google aconseja que las página cumplan los estándares XML. Para ello, no tenéis más que añadir un atributo (a continuación se muestra en negrita) a vuestro tag head, de modo que se asemeje a:

y este campo al style de vuestra página:

3.- Ahora ya sólo queda comenzar a utilizar el control! Para ello se recomienda seguir los ejemplos y ante cualquier duda, idea o sugerencia, no dudéis en preguntar en el foro. GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

1

Clave de Google o Key Imprescindible tener la clave de la API de google: http://www.google.com/apis/maps/signup.html. Tal y como se comenta en ¿Cómo empezar? el modo más sencillo de asignar la clave al control es poniendo lo siguiente en el web.config:

2

web.config

...

...

De este modo, el control ya se encargaría de todo. Sin embargo, sigue valiendo asignar la clave desde la propiedad "Key" tanto en el mismo control como en código. .aspx.cs GMap1.Key = "ClaveDeGoogle"; o .aspx

Alternativamente, también se le puede asignar a la propiedad "Key" del control la key del elemento appSettings que contiene la clave, en caso de que no se quiera utilizar la configurada por defecto "googlemaps.subgurim.net": .aspx.cs GMap1.Key = "myOwnKey"; web.config

...

...

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Comercial Key GoogleMaps.Subgurim.NET dispone de licencias comerciales para la utilización del control en aplicaciones profesionales. Con la compra de una licencia se proveerá de la "CommercialKey" que, tras aplicarla al control, producirá el siguiente efecto: •

•

Eliminación del mensaje "Powered By Subgurim.NET. Google Maps ASP.NET" ubicado detras del mapa y que el visitante puede ver instantes antes de que se cargue el mapa. (Ocurre sobretodo con el navegador FireFox). Eliminación de los comentarios en código, en que se hace referencia al inicio y al final del código propio del control.

Con esto se consigue que, de cara tanto al visitante como (si es el caso) al cliente al que le estáis vendiendo la aplicación, el control parezca totalmente vuestro. Más información sobre licencias Asignar una CommercialKey a un mapa se hace de forma muy similar a hacerlo con la clave de Google o Key. El modo más sencillo de asignar la CommercialKey al control es poniendo lo siguiente en el web.config: web.config

...

...

De este modo, el control ya se encargaría de todo. Del mismo modo también vale asignar la clave desde la propiedad "CommercialKey" tanto en el mismo control como en código. .aspx.cs GMap1.CommercialKey = "CommercialKey"; o .aspx

Alternativamente, también se le puede asignar a la propiedad "CommercialKey" del control la GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

3

key del elemento appSettings que contiene la CommercialKey, en caso de que no se quiera utilizar la configurada por defecto "googlemaps.subgurim.net_Commercial": .aspx.cs GMap1.CommercialKey = "myOwnCommercialKey";

4

web.config

...

...

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Básico En nuestro primer ejemplo, vemos que es increiblemente sencillo tener el mapa de google en nuestra página. Podemos elegir la versión de la API de Google Maps que queremos que utilice el control. Si no hacemos nada la versión es la que el equipo de Google Maps define por defecto; pero si queremos activar otra versión previa (por ejemplo por compatibilizar el código), basta con definirlo con la propiedad Version. En el ejemplo vemos lo fácil que es elegir la versión "2.43". También podemos decidir si el usuario puede mover el mapa con el ratón (Dragging). Por defecto sí es así. En nuestro ejemplo no vamos a permitirlo. Otra de las características básica es el idioma del mapa. Usando la propiedad "Language" podremos definirlo. Con la propiedad BackColor podremos definir el color de fondo del mapa mientras esperamos a que éste se cargue (sólo funciona si se dispone de licencia)

Code.aspx

Code.aspx.cs // GMaps1.Version = "2.43"; GMap1.enableDragging = false; GMap1.enableGoogleBar = true; GMap1.Language = "es"; GMap1.BackColor = Color.White; GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

5

Básico 2 GMap_Height y GMap_Width han desaparecido definitivamente. Ahora hay que usar Width y Height del mismo modo que se usa en cualquier otro control.

6

Code.aspx

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Code.aspx.cs GMap1.setCenter(new GLatLng(41, 2), 6); GMap2.Height = 456; GMap2.Width = 300; GMap2.setCenter(new GLatLng(20, 15), 2);

7

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Básico 3 GoogleMaps no se lleva bien con los elementos que lo ocultan con un Hidden, pues acaba descuadrándose o, directamente, no mostrándose. Tenemos este problema, por ejemplo con los TabPanels del TabContainer del Ajax Control Toolkit o con un div con style="hidden".

8

La solución es utilizar el método getChangeHiddenStateFunction() de cada mapa, el cual devuelve un javascript que debemos ejecutar en el momento en que se vaya a mostrar el mapa. En el ejemplo del TabContainer, vemos que se ejecuta ese javascript en el preciso momento en que se hace clic sobre su TabPanel correspondiente.

Code.aspx







Empty Tab GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008







Empty Tab

Code.aspx.cs GMap1.setCenter(new GLatLng(40, 1)); GMap2.setCenter(new GLatLng(39, 2)); GMap1.addControl(new GControl(GControl.extraBuilt.TextualCoordinatesControl)); GMap1.addControl(new GControl(GControl.extraBuilt.MarkCenter)); GMap2.addControl(new GControl(GControl.extraBuilt.TextualCoordinatesControl)); GMap2.addControl(new GControl(GControl.extraBuilt.MarkCenter)); TabPanel1.OnClientClick = GMap1.getChangeHiddenStateFunction(); TabPanel3.OnClientClick = GMap2.getChangeHiddenStateFunction();

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

9

Zoom Para asignar el zoom del mapa, manejaremos la propiedad GZoom. El 1 se corresponde con el zoom más alejado, y conforme aumentemos nos acercaremos más. Tened en cuenta que en algunas zonas no hay mapas disponibles para zooms elevados.

10

Code.aspx

Code.aspx.cs GMap1.GZoom = 3;

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Zoom 2 Haciendo doble clic sobre el Mapa podemos hacer un Zoom IN (botón de la izquierda) y un Zoom Out (botón de la derecha). Pero además, ese zoom ocurrirá de forma gradiente y continua. Las propiedades encargadas de tal menester son enableDoubleClickZoom y enableContinuousZoom. Además, también contamos con enableHookMouseWheelToZoom, con el que, si lo activamos, permitiremos que el usuario haga zoom con la rueda del ratón.

Code.aspx

Code.aspx.cs // Ambas propiedades están activadas por defecto, para desactivarlas: // GMap1.enableContinuousZoom = false; // GMap1.enableDoubleClickZoom = false; GMap1.enableHookMouseWheelToZoom = true;

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

11

Tipo de mapa El tipo de mapa lo podemos elegir usando la propiedad mapType. Existen cuatro tipos de mapas:

12

• • • •

Normal: GMapType.GTypes.Normal (por defecto) Satélite: GMapType.GTypes.Satellite Híbrido: GMapType.GTypes.Hybrid Físico: GMapType.GTypes.Physical

Con el el control para ASP.NET, elegir entre un tipo de mapa u otro no consiste más que en utilizar el IntelliSense.

Code.aspx

Code.aspx.cs GMap1.mapType = GMapType.GTypes.Physical; GMap1.addMapType(GMapType.GTypes.Physical); GMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GKeyboardHandler Activando el GKeyboardHandler (está desactivado por defecto), permitiremos que el usuario pueda navegar por el mapa con las flechas del teclado, pudiendo incluso utilizar dos flechas al mismo tiempo.

13

Code.aspx

Code.aspx.cs GMap1.enableGKeyboardHandler = true;

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Asignar Centro Para asignar el centro utilizaremos el método setCenter() Éste tiene tres sobrecargas: • • •

14

setCenter(GLatLng): sólo marcamos el centro setCenter(GLatLng, int): marcamos el centro y el zoom setCenter(GLatLng, int GMapType.GTypes): el centro, el zoom y el tipo de mapa.

Nota: las variables del tipo GLatLng pueden sumarse y restarse con los operadores '+' y '-'.

Code.aspx

Code.aspx.cs GLatLng latlong = new GLatLng(15.2, 10.9); GMapType.GTypes maptype = GMapType.GTypes.Hybrid; //GMap1.setCenter(latlong); //GMap1.setCenter(latlong, 4); GMap1.setCenter(latlong, 4, maptype); GMap1.addControl(new GControl(GControl.extraBuilt.MarkCenter)); GMap1.addControl(new GControl(GControl.extraBuilt.TextualCoordinatesControl));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Custom Mouse Cursors Podemos asignar tipos de cursores según la acción que se esté realizando sobre el mapa. Para ello tenemos que crear un objeto del tipo GCustomCursor y añadirlo al mapa mediante GMap1.addCustomCursor(instancia_GCustomCursor). GCustomCursor tiene dos propiedades: • •

draggableCursor: el tipo de cursor cuando podamos mover el mapa. draggingCursor: el tipo de cursor cuando estemos moviendo el mapa.

Ambas porpiedades son del tipo enumerado cursor, del que podemos elegir 9 opciones, que coinciden con la definición de tipo de cursor que se da en CSS: auto, crosshair, Default, pointer, hand, wait, text, help, move.

Code.aspx

Code.aspx.cs GCustomCursor customCursor = new GCustomCursor(cursor.crosshair, cursor.text); GMap1.addCustomCursor(customCursor);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

15

Minimizar Código El control de Google Maps para ASP.NET es muy potente, pues no solo es un parseador de ASP.NET a javascript, sino que aporta funcionalidades que la API de Google Maps no posee. Sin embargo, en ocasiones no nos es necesario utilizar toda la potencia, de modo que podemos aplicar algunas opciones para minimizar el código al máximo.

16

Si nuestro único objetivo es mostrar mapas con GPolygons o GMarkers y no queremos que el usuario tenga la opción de interactuar con el mapa, deberíamos estudiar la posibilidad de utilizar Static Maps, que devuelve una simple imagen. Pero el Static Map suele quedarse corto en muchas ocasiones (el usuario no tiene opción de moverse en el mapa), de modo que aquí van algunas opciones que se pueden aplicar en el mapa para dejar el código a mínimos: • •

• •

enablePostBackPersistence: Si la página que contiene el mapa no va a realizar ningún PostBack, es recomendable desactivar esta opción (está activada por defecto). enableGetGMapElementById: Si no vamos a usar nunca la opción de getGMapElementById, es recomendable desactivar esta opción (está activada por defecto). enableStore: si no vamos a usar la propiedad Store no debemos activar esta opción (desactivada por defecto). enableServerEvents: sólo debemos activar esta opción si vamos a usar server events (desactivado por defecto).

Code.aspx

Code.aspx.cs GMap1.enablePostBackPersistence = false; GMap1.enableGetGMapElementById = false;

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Controles Prefabricados Los controles prefabricados son aquellos que Google provee por defecto, y con ASP.NET es muy sencillo añadirlos a nuestro mapa. Para ello se utiliza GControl. En el caso de los controles prefabricados, lo que haremos será inicializar el GControl con un elemento del enumerador GControl.preBuilt (en el código ejemplo se puede ver cómo). Hay 6 tipos de GControl.preBuilt: • • • • •

• • •

GControl.preBuilt.MapTypeControl: permite elegir entre un tipo de mapa y otro. GControl.preBuilt.MenuMapTypeControl: permite elegir entre un tipo de mapa y otro en forma de menú desplegable. GControl.preBuilt.HierarchicalMapTypeControl: permite elegir entre un tipo de mapa y otro en forma de menú jerárquico. Tiene opciones avanzadas. GControl.preBuilt.SmallMapControl: añade cuatro flechas para navegar por el mapa, así como dos botones para aumentar y reducir el zoom. GControl.preBuilt.LargeMapControl:añade cuatro flechas para navegar por el mapa, dos botones para aumentar y reducir el zoom, y una barra en la que poder elegir cualquier cualquier nivel de zoom. GControl.preBuilt.SmallZoomControl: botones para aumentar y reducir el zoom. GControl.preBuilt.ScaleControl: marca la escala del mapa. GControl.preBuilt.GOverviewMapControl: añade un pequeño mapa (que se puede minimizar) que permite navegar a grandes rasgos por los alrededores de nuestro mapa actual.

Además del GControl.preBuilt, el GControl nos permite decidir las cuatro posiciones posibles en la que se colocará el mapa utilizando la propiedad position del tipo GControlPosition. En los ejemplos se ven los casos más explicativos. Las cuatro posiciones posibles se pueden acceder desde el enumerador GControlPosition.position, y son: • • • •

Top_Right: arriba a la derecha. Top_Left: arriba a la izquierda. Bottom_Right: abajo a la derecha. Bottom_Left: abajo a la izquierda.

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

17

18

Code.aspx

Code.aspx.cs GControl control = new GControl(GControl.preBuilt.GOverviewMapControl); GControl control2 = new GControl(GControl.preBuilt.MenuMapTypeControl, new GControlPosition(GControlPosition.position.Top_Left)); GMap1.addControl(control); GMap1.addControl(control2); GMap1.addControl(new GControl(GControl.preBuilt.SmallMapControl, new GControlPosition(GControlPosition.position.Top_Right)));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Controles Extra Los controles extra son aquellos fabricados para este control, que no vienen por defecto en la API de GoogleMaps. En algunos casos se trata de controles que Google provee como ejemplo. Éste será uno de los campos donde más se va a desarrollar para las futuras versiones de googlemaps.subgurim.net Para los controles extra, lo que haremos será inicializar el GControl con un elemento del enumerador GControl.extraBuilt (en el código ejemplo se puede ver cómo). Hasta la versión actual nos encontramos con estos tipos de control extraBuilt: • • •

•

•

TextualZoomControl: Añade dos cuadros de texto desde los que se puede alejar y acercar el zoom. NumericalZoomControl: Añade dos cuadros de texto desde los que se puede alejar y acercar el zoom con el número del zoom como texto. TextualCoordinatesControl: Añade un cuadro de texto con las coordenadas del punto central del mapa. Se actualiza a medida que se arrastra el mapa. Clickando sobre éste salta una ventana desde la que recoger las coordenadas exactas en que nos encontramos. TextualOnClickCoordinatesControl: Añade un cuadro de texto con las coordenadas del punto en que se ha hecho click por última vez. Clickando sobre el cuadro, no salta una ventana desde la que recoger las coordenadas exactas en que nos encontramos. MarkCenter: Añade una '+' marcando el centro exacto del mapa.

Code.aspx

Code.aspx.cs GControl control = new GControl(GControl.extraBuilt.NumericalZoomControl); GMap1.addControl(control);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

19

GMap1.addControl(new GControl(GControl.extraBuilt.TextualCoordinatesControl, new GControlPosition(GControlPosition.position.Top_Right))); GMap1.addControl(new GControl(GControl.extraBuilt.TextualOnClickCoordinatesControl, new GControlPosition(GControlPosition.position.Bottom_Right))); GMap1.addControl(new GControl(GControl.extraBuilt.MarkCenter));

20

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GOverViewMap El modo más sencillo de añadir un OverViewMap viene explicado en la sección de controles prefabricados, donde vemos que no hay más que hacer GMap1.Add(new GControl(GControl.preBuilt.GOverviewMapControl));. Sin embargo, en ocasiones vamos a querer un mayor control sobre este OverViewMap. Mediante GOverViewMap, podremos elegir ciertas características del OverViewMap que antes no podíamos, y que en esencia son bastante similares a las que se ofrecen para un mapa normal. Vamos a poder trabajar con: • • • • • •

Dimensiones: mediante la propiedad gSize podemos elegir las dimensiones. Tipo de mapa: elegiremos el tipo de mapa con la propiedad mapType. Cambiar tipo de mapa: haremos uso del control para cambiar el tipo de mapa simplemente llamando a addControl_MapType(). Control de escala: análogamente instanciaremos el control de escala mediante addControl_Scale(). Listeners: usaremos casi cualquier tipo de Listeners mediante addListener(GListener). Líneas: añadiremos polilineas mediante addPolyline(GPolyline).

Code.aspx

Code.aspx.cs GLatLng latlng = new GLatLng(40, 1); GOverViewMap gOVM = new GOverViewMap(); gOVM.gSize = new GSize(250, 150); GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

21

gOVM.mapType = GMapType.GTypes.Satellite; gOVM.addControl_MapType(); gOVM.addControl_Scale(); gOVM.addListener(new GListener(gOVM.ID, GListener.Event.click, "function() {alert('Clicked!!');}"));

22

List puntos = new List(); puntos.Add(latlng + new GLatLng(0, 8)); puntos.Add(latlng + new GLatLng(-0.5, 4.2)); puntos.Add(latlng); puntos.Add(latlng + new GLatLng(3.5, -4)); puntos.Add(latlng + new GLatLng(4.79, +2.6)); GPolyline linea = new GPolyline(puntos, "FFF000", 2); gOVM.addPolyline(linea); GMap1.gOverViewMap = gOVM; GMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Líneas Para añadir líneas a nuestro mapa, utilizaremos el GPolyline. Está compuesta por 4 elementos, del que sólo el primero es obligatorio: • • • • • •

points: listado genérico de puntos (del tipo GLatLng). Es la parte más importante pues definirá el trazado de la línea. weight: anchura de la línea en pixels opacity: double entre 0 y 1. Define la opacidad de la línea. color: por defecto es el azul, y debemos dar el valor como un string con el color en hexadecimal o como un color .NET. clickable: indica si la línea es o no clicable. geodesic: dibuja la línea como si fuera geodésica, no plana.

NOTA: para un correcto funcionamiento en el Internet Explorer, debéis añadir el siguiente atributo a vuestro tag HTML:

Code.aspx

Code.aspx.cs GLatLng latlng = new GLatLng(46, 21); GMap1.setCenter(latlng, 4); List puntos = new List(); puntos.Add(latlng + new GLatLng(0, 8)); puntos.Add(latlng + new GLatLng(-0.5, 4.2)); puntos.Add(latlng); puntos.Add(latlng + new GLatLng(3.5, -4)); GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

23

puntos.Add(latlng + new GLatLng(4.79, +2.6)); GPolyline linea = new GPolyline(puntos, "FF0000", 2); GMap1.addPolyline(linea);

24

List puntos2 = new List(); puntos2.Add(latlng + new GLatLng(5, -8)); puntos2.Add(latlng + new GLatLng(5, -6)); puntos2.Add(latlng + new GLatLng(5, -4)); puntos2.Add(latlng); puntos2.Add(latlng + new GLatLng(-5, 0)); GPolyline linea2 = new GPolyline(puntos2); linea2.weight = 4; GMap1.addPolyline(linea2); List puntos3 = new List(); puntos3.Add(latlng + new GLatLng(5, -20)); puntos3.Add(latlng + new GLatLng(5, 20)); GPolyline linea3 = new GPolyline(puntos3, Color.DarkViolet, 4); linea3.geodesic = true; GMap1.addPolyline(linea3);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Polígonos Crear polígonos en nuestro mapa es muy sencillo con la clase "GPolygon". El efecto es muy similar a la de la clase "GPolyline", con la diferencia de que el GPolygon rellena el interior con el color que marquemos. Ésta tiene 6 propiedades, de la que sólo la primera es obligatoria: • • • • • • •

points: listado genérico de puntos (del tipo GLatLng). Es la parte más importante pues definirá el trazado del polígono. strokeWeight: anchura de la línea en pixels. strokeOpacity: double entre 0 y 1. Define la opacidad de la línea. strokeColor: por defecto es el azul, y debemos dar el valor como un string con el color en hexadecimal. fillColor: color del relleno interior del polígono. Debemos dar el valor como un string con el color en hexadecimal. fillOpacity: double entre 0 y 1. Define la opacidad del relleno del polígono. clickable: indica si el polígono es o no clicable.

Además, hemos añadido dos interesantes métodos por considerar que su uso es muy típico: • •

close(): independientemente de cómo estén configurados los puntos del polígono, este método se encarga de cerrarlo, de modo que el primer punto coincida con el último. createPolygon(GLatLng center, int sides, double radius): Llamar a este método NO implica borrar los puntos insertados previa o posteriormente. Esto se deja a gusto del programador. Lo que hace esta función es crear un polígono en base a sus parámetros de entrada: o center: centro del polígono. o sides: lados del polígono. A partir de 20 se asemeja a una circunferencia. o radius: grados geográficos de radio. o inclination: inclinación del primer punto. Es un double expresado en radianes. Su valor por defecto es PI/4. Cabe destacar que se trata de polígonos basados en puntos geográficos. Por ejemplo, si creamos un polígono de 4 grados NO se mostrará por pantalla un cuadrado perfecto, sino un polígono de 4 lados cuya distancia kilométrica entre el centro y ellos sea la misma. Así pues, cuanto más a los polos, más "deformado" estará el cuadrado, y cuanto más al ecuador, más "perfecto" será el cuadro.

NOTA: para un correcto funcionamiento en el Internet Explorer, debéis añadir el siguiente atributo a vuestro tag HTML:

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

25

26

Code.aspx

Code.aspx.cs GLatLng latlng = new GLatLng(46, 21); GMap1.setCenter(latlng, 4); List puntos = new List(); puntos.Add(latlng + new GLatLng(0, 8)); puntos.Add(latlng + new GLatLng(-0.5, 4.2)); puntos.Add(latlng); puntos.Add(latlng + new GLatLng(3.5, -4)); puntos.Add(latlng + new GLatLng(4.79, +2.6)); GPolygon poligono = new GPolygon(puntos, "557799", 3, 0.5, "237464", 0.5); poligono.close(); GMap1.Add(poligono); List puntos2 = new List(); puntos2.Add(latlng + new GLatLng(5, -8)); puntos2.Add(latlng + new GLatLng(5, -6)); puntos2.Add(latlng + new GLatLng(5, -4)); puntos2.Add(latlng); puntos2.Add(latlng + new GLatLng(-5, 0)); GPolygon poligono2 = new GPolygon(puntos2, "000000", 3, 1, "654321", 1); GMap1.addPolygon(poligono2); GPolygon poligono3 = new GPolygon(new List(), "00ff00", 3, 0, "ff0044", 0); poligono3.createPolygon(latlng + new GLatLng(-6, -7.5), 7, 4, Math.PI /3); GMap1.addPolygon(poligono3);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

TileLayers Con las TileLayers podremos definir nuestras propias capas sobre el mapa, de modo que podremos superponer nuestras imágenes a las que nos devuelve el GoogleMaps. Para definir estas capas utilizaremos las clases GCopyright, GCopyrightCollection, GTileLayerOptions, GTileLayer y GTileLayerOverlay. Su uso es muy sencillo y vale seguir el ejemplo para entenderlo. El elemento más importante es la correcta definición de la propiedad tileUrlTemplate del GTileLayerOptions. Se trata de un template que define la URL de la imagen a la que GoogleMaps va a llamar y será la que debéis gestionar. Tiene la siguiente estructura: http://host/tile?x={X}&y={Y}&z={Z}.png Donde X es la latitud, Y es la longitud y Z es el zoom. Un ejemplo sería: http://host/tile?x=3&y=27&z=5.png

Code.aspx

Code.aspx.cs GMap1.setCenter(new GLatLng(37.4419, -122.1419), 13); GCopyrightCollection myCopyright = new GCopyrightCollection("© "); myCopyright.Add(new GCopyright("Demo", new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)), 0, "©2008 Subgurim"));

GTileLayerOptions tileLayerOptions = new GTileLayerOptions(); GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

27

tileLayerOptions.tileUrlTemplate = "http://code.google.com/apis/maps/documentation/exam ples/include/tile_crosshairs.png"; GTileLayer tilelayer = new GTileLayer(myCopyright, 10, 10, tileLayerOptions); GTileLayerOverlay myTileLayer = new GTileLayerOverlay(tilelayer); GMap1.Add(myTileLayer);

28

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GGroundOverlay Con el GGroundOverlay se pueden insertar imágenes a los mapas de forma muy sencilla. Basta con definir la imageUrl y el GLatLngBounds y... ¡ya está!

29

Code.aspx

Code.aspx.cs GLatLng sw = new GLatLng(64,20); GLatLng ne = new GLatLng(65,29); GMap1.setCenter((sw / 2) + (ne / 2)); GGroundOverlay groundOverlay = new GGroundOverlay("http://googlemaps.subgurim.net/images/logo.jpg", new GLatLngBounds(sw, ne)); GMap1.addGroundOverlay(groundOverlay);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GScreenOverlay Es muy similar al GGroundOverlay, con la diferencia que usando el GScreenOverlay la imagen que se muestra es estática (no cambia de posición absoluta cuando se mueve el mapa.

30

Code.aspx

Code.aspx.cs GLatLng sw = new GLatLng(64, 20); GLatLng ne = new GLatLng(65, 29); GMap1.setCenter((sw / 2) + (ne / 2)); GScreenOverlay screenOverlay = new GScreenOverlay("http://googlemaps.subgurim.net/imag es/logo.jpg", new GScreenPoint(0, 21, unitEnum.pixels, unitEnum.pixels), new GScreenPoint(0, 0), new GScreenSize(0, 0)); GMap1.Add(screenOverlay);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Custom Overlays Del mismo modo que hay controles extra, tenemos los GCustomOverlays de modo que podremos añadir capas al mapa de google en una sola línea. Se va a trabajar mucho en este campo para las futuras versiones. Disponemos hasta el momento de: •

Rectangle: define un rectángulo en la parte central del mapa.

Code.aspx

Code.aspx.cs GMap1.Add(new GCustomOverlay(GCustomOverlay.Overlay.Rectangle));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

31

GStreetViewOverlay Añadiendo el GStreetViewOverlay podremos ver las zonas en las que está activo el Street View. Sabiendo en qué zonas geográficas está activo el Street View podremos usar el GStreetViewPanorama.

32

Code.aspx

Code.aspx.cs

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Hierarchical Map Type Control El GHierarchicalMapTypeControl es un nuevo control para mostrar los tipos de mapa de los que dispone el usuario. Su objetivo es mostrar la información de forma jerárquica en el modo en que nosotros lo configuremos, aunque tiene una interesante configuración por defecto. Al GHierarchicalMapTypeControl le iremos añadiendo GHierarchicalMapTypeControlRelation. El GHierarchicalMapTypeControlRelation se compone de las siguientes propiedades: • • • •

parentType: el tipo de mapa "padre". childType: el tipo de mapa "hijo". childText: el texto que saldrá en el menú al referirse al tipo de mapa hijo. isDefault: indica si está activado por defecto.

Como siempre, lo mejor es un ejemplo:

Code.aspx

Code.aspx.cs GMap1.addMapType(GMapType.GTypes.Physical); GHierarchicalMapTypeControl hierarchicalMapTypeControl = new GHierarchicalMapTypeContr ol(); hierarchicalMapTypeControl.clearPreviousRelationShips = true; hierarchicalMapTypeControl.hierarchicalMapTypeControlRelations.Add( GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

33

new GHierarchicalMapTypeControlRelation(GMapType.GTypes.Normal, GMapType.GTypes. Physical, "Subgurim Physical", false)); hierarchicalMapTypeControl.hierarchicalMapTypeControlRelations.Add( new GHierarchicalMapTypeControlRelation(GMapType.GTypes.Satellite, GMapType.GTypes. Hybrid, "Subgurim Hybrid", false)); GMap1.gHierarchicalMapTypeControl = hierarchicalMapTypeControl;

34

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GLayer Con el nuevo objeto GLayer podemos añadir a nuestros mapas fotos de Panoramio o artículos geolocalizados de la Wikipedia de forma muy sencilla. La clase GLayerID contiene todos los tipos de Layers que podemos añadirle al mapa.

35

Code.aspx

Code.aspx.cs GLayer layerPanoramio = new GLayer(GLayerID.All_photos_from_panoramio_com); GMap1.addGLayer(layerPanoramio); GLayer layerWikipedia = new GLayer(GLayerID.Geotagged_Wikipedia_articles_Spanish); GMap1.Add(layerWikipedia);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

InfoWindow Añadir un InfoWindow es tremendamente fácil. No hay más que instanciar a GInfoWindow y darle los valores: • •

point: del tipo GLatLon, indica dónde se ubicará el InfoWindow html: texto (con html incluído) que irá dentro del InfoWindow.

36

Code.aspx

Code.aspx.cs GLatLng latlon = new GLatLng(10.2, 22); GMap1.setCenter(latlon, 4); GInfoWindow window = new GInfoWindow(latlon, "Ejemplo de infoWindow"); GMap1.addInfoWindow(window);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

InfoWindow con Icono Añadir un InfoWindow sobre un icono es igualmente sencillo. No hay más que instanciar a GInfoWindow y darle los valores: • • • •

gMarker: se estudia en el ejemplo Iconos. html: texto (con html incluído) que irá dentro del InfoWindow. openedOnLoad: indica si el InfoWindow estará abierto al cargar el mapa. Si no lo está, lo abriremos ejecutando el evento elegido sobre el icono. Por defecto está abierto. sourceEvent: asigna qué evento debe ocurrir para que el InfoWindow se abra. Por defecto se abrirá al hacer click, pero, por ejemplo, podemos pedir que se abra cuando pongamos el ratón sobre el icono, cuando lo retiremos, etc.

Code.aspx

Code.aspx.cs GLatLng latlon = new GLatLng(10.2, 22); GMap1.setCenter(latlon, 4); GMarker icono = new GMarker(latlon); GInfoWindow window = new GInfoWindow(icono, "Ejemplo de infoWindow", false, GListener.Event.mouseover); GMap1.addInfoWindow(window);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

37

InfoWindow con Pestañas El funcionamiento del InfoWindow con pestañas (GInfoWindowTabs) es muy similar al de sin pestañas, siendo que todo lo visto en los dos ejemplos anteriores es válido. La diferencia estriba en que en este caso hemos de añadir un listado (System.Collections.Generic.List) de pestañas (GInfoWindowTab), del modo en que se indica en el ejemplo. En cuanto a la pestaña (GInfoWindowTab), manejaremos dos propiedades:

38

• •

label: etiqueta de la pestaña. html: texto (con html incluído) que irá dentro de la pestaña.

Code.aspx

Code.aspx.cs GLatLng latlon = new GLatLng(10.2, 22); GMap1.setCenter(latlon, 4); /****** INFOWINDOWTAB 1 ******/ GInfoWindowTabs iwTabs = new GInfoWindowTabs(); iwTabs.point = latlon; System.Collections.Generic.List tabs = new System.Collections.Generic.List(); for (int i=0; i 0) { geo = iGeos.geonames[0]; StringBuilder sb = new StringBuilder(); sb.Append(""); sb.Append(""Nearest Place ""); sb.Append("
"); sb.AppendFormat("Place name: "{0}" ", geo.name); sb.Append("
"); sb.AppendFormat("Point: "{0}"", geo.nearestPlacePoint.ToString()); sb.Append("
"); sb.AppendFormat("Elevation: "{0}"", geo.nearestPlaceElevation > -9000 ? geo.nearestPlaceElevation.ToString() : "No info"); sb.Append("
"); sb.AppendFormat("Country Name (Code): "{0} ({1})"", geo.countryName, geo.countryCode); sb.Append("
"); sb.AppendFormat("Click point - Nearest Place distance (Km): "{0}"", Math.Round(geo.distance, 3)); sb.Append(""); sb.Append("
"); sb.Append(""); sb.Append(""Click point""); sb.Append("
"); sb.AppendFormat("Point: "{0}"", geo.initialPoint.ToString()); sb.Append("
"); sb.AppendFormat("Elevation: "{0}"", geo.initialPointElevation > -9000 ? geo.initialPointElevation.ToString() : "No info"); sb.Append("
"); sb.Append(""); GInfoWindow window = new GInfoWindow(e.point, sb.ToString(), true); return window.ToString(e.map); } else return string.Empty; } GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

95

GGeoXml Leer archivos KLM o GeoRSS es ahora muy sencillo con el GoogleMaps.Subgurim.NET. No hay más que usar la clase GGeoXml que contiene una única propiedad (url) y añadir una instancia de ésta al GMap. Esa propiedad "url" será la dirección en que se encuentra el fichero KLM o GeoRSS.

96

Code.aspx

Code.aspx.cs GMap1.setCenter(new GLatLng(49.496675, -102.65625), 3); GMap1.addGGeoXML(new GGeoXml("http://nigel.tao.googlepages.com/blackbirds.kml")); GMap1.addGGeoXML(new GGeoXml("http://api.flickr.com/services/feeds/groups_pool.gne?id=322338@N20&format=rss _200&georss=1"));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GTrafficOverlay De momento sólo sirve en Estados Unidos, pero sólo con activar enableGTrafficOverlay se puede acceder a la información de tráfico.

97

Code.aspx

Code.aspx.cs GMap1.setCenter(new GLatLng(42,-95), 3); GMap1.enableGTrafficOverlay = true;

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GDirections Basic Observa lo sencillo que es añadir soporte de GDirection en el mapa: ¡sólo se necesita una simple línea de código! Pero obviamente se puede mejorar haciendo uso de otras propiedades del GDirection. En este ejemplo estudiaremos las propiedades más sencillas y en el siguiente las más avanzadas:

98

• • • • • •

autoGenerate: añade automáticamente la funcionalidad de GDirections, insertando textos, cuadros de texto y el botón. Por defecto es "true". fromText: texto que describe el punto de inicio. Por defecto vale "From: ". toText: texto que describe el punto de llegada. Por defecto vale "To: ". buttonText: texto que describe botón para ejecutar el evento. Por defecto vale "Go". clearMap: Booleano que indica si se borra el mapa entre una llamada y otra. errorMessage: Mensaje mostrado cuando ocurre un error.

Code.aspx

Code.aspx.cs GDirection gdirection = new GDirection(true); gdirection.errorMessage = "Ups"; GMap1.addGDirection(gdirection);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GDirections Avanzado Si no queremos autogenerar el soporte para GDirection, de modo que queramos diseñar una interfaz más personal, no tenemos más que poner a false la propiedad "autoGenerate". Pero GMaps sigue haciendo casi todo nuestro trabajo. No tenemos más que añadir al mapa los cuadros de texto de salida y de llegada, el botón y un "div" donde irá la descripción de nuestro viaje. Además, se puede definir la propiedad "locale" para indicar la Lengua-Cultura en que estamos trabajando. Con todo y con esto, basta con definir las siguientes propiedades para el correcto funcionamiento: • • • • • • • •

buttonElementId: el ID del botón. Debe ser un "" NO un "". fromElementId: el ID del cuadro de texto que corresponde al punto de salida. toElementId: el ID del cuadro de texto que corresponde al punto de salida. divElementId: el ID del div donde irá la descripción del viaje. locale: string que define la cultura. Por ejemplo "es-ES", "en-GB", "fr-CA", etc. travelMode: el modo de viaje, como conducción (por defecto) o a pie. avoidHighways: si le damos true, tratará de evitar las autopistas siempre que sea posible. preserveViewport: Por defecto, cuando al buscar una dirección el mapa se centra en el resultado. Si activamos esta opción, el mapa no se mueve de donde estemos (a no ser que nunca hayamos definido una localización inicial).

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

99

100

Code.aspx Start Location: End Location:

Code.aspx.cs protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { GDirection direction = new GDirection(); direction.autoGenerate = false; direction.buttonElementId = "bt_Go"; direction.fromElementId = tb_fromPoint.ClientID; direction.toElementId = tb_endPoint.ClientID; direction.divElementId = "div_directions"; direction.clearMap = true;

// Optional // direction.locale = "es-ES"; GMap1.Add(direction); } }

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GeoIP Gracias a MaxMind disponemos de la Geolocalización por IP: a partir de una IP conseguiremos datos sobre su localización, entre otros la latitud y la longitud. Para ello sólo hay que usar el código del ejemplo y descargarse la base de datos de MaxMind (descargar directa).

101

Code.aspx

Code.aspx.cs string databaseFile = Server.MapPath("~/App_Data/GeoIP/GeoLiteCity.dat"); LookupService service = new LookupService(databaseFile); Location location = service.getLocation(Request.UserHostAddress); if (location != null) { GLatLng latlng = new GLatLng(location.latitude, location.longitude); GMap1.setCenter(latlng, 10); string infoWindowHTML = string.Format(@"

GEOIP PROPERTIES
Area Code: {0}
City: {1}
GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Country Code: {2}
Country Name: {3}
DMA Code: {4}
Postal Code: {5}
Region: {6}

", location.area_code, location.city, location.countryCode, location.countryName, location.dma_code, location.postalCode, location.region);

102

GMap1.Add(new GInfoWindow(new GMarker(latlng), infoWindowHTML)); }

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

DragZoomControl El DragZoomControl forma parte del GMaps Utility Library. Usando el DragZoomControl podremos recuadrar una zona específica del mapa sobre la que se hará un zoom.

103

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

104

Code.aspx

Code.aspx.cs DragZoomControl dragZoomControl = new DragZoomControl(); DragZoomOtherOptions dragZoomOtherOptions = new DragZoomOtherOptions(); dragZoomOtherOptions.backButtonEnabled = true; dragZoomOtherOptions.backButtonHTML = "Go back"; dragZoomOtherOptions.buttonHTML = "Zoom"; dragZoomControl.dragZoomOtherOptions = dragZoomOtherOptions; DragZoomCallbacks dragZoomCallbacks = new DragZoomCallbacks(); dragZoomCallbacks.buttonclick = "function(){alert('Button Click')}"; dragZoomControl.dragZoomCallbacks = dragZoomCallbacks; DragZoomBoxStyleOptions dragZoomBoxStyleOptions = new DragZoomBoxStyleOptions(); dragZoomBoxStyleOptions.opacity = 0.5; dragZoomBoxStyleOptions.fillColor = Color.Red; dragZoomControl.dragZoomBoxStyleOptions = dragZoomBoxStyleOptions; GControl dragzoom = new GControl(dragZoomControl, new GControlPosition(GControlPosition .position.Top_Left)); GMap1.Add(dragzoom);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

LabeledMarker El LabeledMarker forma parte del GMaps Utility Library. El LabeledMarker nos permite añadir letras a los iconos de Google Maps.

105

Code.aspx

Code.aspx.cs GLatLng latLng = new GLatLng(50, 10); GMap1.setCenter(latLng); GIcon icon = new GIcon(); icon.image = "http://gmapssamples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png"; icon.iconSize = new GSize(32, 32); icon.iconAnchor = new GPoint(16, 16); icon.infoWindowAnchor = new GPoint(25, 7); LabeledMarker labeledMarker = new LabeledMarker(latLng); labeledMarker.options.labelText = "S"; labeledMarker.options.labelOffset = new GSize(-4, -7); labeledMarker.options.icon = icon; GInfoWindow window = new GInfoWindow(labeledMarker, "You can use the Labeled Marker a s any other marker"); GMap1.Add(window); StaticGMap1.span = new GLatLng(7, 5); GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

ExtMapTypeControl El ExtMapTypeControl forma parte del GMaps Utility Library. El ExtMapTypeControl es una alternativa opensource a los controles que nos permiten elegir el tipo de mapa.

106

Code.aspx

Code.aspx.cs GControl extMapType = new GControl(new ExtMapTypeControl(true, true), new GControlPosition(GControlPosition.position.Top_Right)); GMap1.addControl(extMapType); GMap1.setCenter(new GLatLng(47, -122));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

MapIconMaker El MapIconMaker forma parte del GMaps Utility Library. Consiste en crear iconos configurables. Para ello podemos utilizar tres propiedades diferentes: - markerIconOptions - labelMarkerIconOptions - flatIconOptions

107 Una vez establecida cualquiera de estas propiedades, se sobreescribirá cualquier cosa que le hayamos hecho previamente al GIcon.

Code.aspx

Code.aspx.cs GLatLng latLng = new GLatLng(50, 10); GMap1.setCenter(latLng, 4); GIcon icon = new GIcon(); icon.markerIconOptions = new MarkerIconOptions(50, 50, Color.Blue); GMarker marker = new GMarker(latLng, icon); GInfoWindow window = new GInfoWindow(marker, "You can use the Map Icon Maker as any o ther marker"); GMap1.Add(window); GIcon icon2 = new GIcon(); GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

icon2.labeledMarkerIconOptions = new LabeledMarkerIconOptions(Color.Gold, Color.White, " A", Color.Green); GMarker marker2 = new GMarker(latLng + new GLatLng(3, 3), icon2); GInfoWindow window2 = new GInfoWindow(marker2, "You can use the Map Icon Maker as an y other marker"); GMap1.Add(window2);

108

GIcon icon3 = new GIcon(); icon3.flatIconOptions = new FlatIconOptions(25, 25, Color.Red, Color.Black, "B", Color.White, 1 5, FlatIconOptions.flatIconShapeEnum.roundedrect); GMarker marker3 = new GMarker(latLng + new GLatLng(-3, -3), icon3); GInfoWindow window3 = new GInfoWindow(marker3, "You can use the Map Icon Maker as an y other marker"); GMap1.Add(window3);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

MarkerTracker El MarkerTracker forma parte del GMaps Utility Library. Lo aplicamos a un GMarker normal, de modo que cuando este GMarker quede fuera de la vista del mapa una flecha (totalmente configurable con las MarkerTrackerOptions) apuntará a su ubicación. Su uso es muy sencillo, pues no hay más que llamar al método "AddMarkerTracker(...)" del marker en cuestión.

Code.aspx

Code.aspx.cs GLatLng latLng = new GLatLng(40, 0); GMarker marker = new GMarker(latLng); marker.AddMarkerTracker(); GMap1.Add(marker); GMap1.GCenter = latLng + new GLatLng(8, 8);

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

109

Add Genérico Para añadir cualquier elemento al GMap, hasta el momento teníamos una función específica que se encargaba de ello. Por ejemplo, para añadir un control llamábamos a addControl(...), para añadir llamábamos a addMovement(...), y así con prácticamente la totalidad de elementos posibles.

110

Aún manteniendo la compatibilidad con versiones previas a la v1.4, ahora tenemos otro modo de añadir cualquier tipo de elemento, sin más que llamar a Add(...), siendo el parámetro que le demos a la función lo único importante. Simplemente veamos el ejemplo.

Code.aspx

Code.aspx.cs GLatLng ll1 = new GLatLng(41, 1); GLatLng ll2 = new GLatLng(39, 0); GMap1.Add(new GControl(GControl.preBuilt.SmallMapControl)); GMap1.Add(new GCustomCursor(cursor.crosshair, cursor.help)); GMap1.Add(new GControl(GControl.extraBuilt.TextualOnClickCoordinatesControl, new GControlPosition(GControlPosition.position.Top_Right))); GMap1.Add(new GInfoWindow(ll1, "Hello!!")); GMap1.Add(new GMove(1500, ll2)); GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GMap1.Add(new GMove(2000, ll1)); GMap1.Add(new GeoCoding());

111

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Movimiento y Animación Para trabajar con movimiento y animaciones, utilizaremos la clase GMove. De GMove se definen 4 propiedades: • •

112

• •

deltaMiliseconds: cantidad de milisegundos que se dejarán entre la anterior animación (si existiera) y la que estamos definiendo. goTO: propiedad del tipo GLatLon. Define a qué latitud y longitud saltará el mapa. deltaX: Incremento en X que sufrirá el mapa, donde una unidad es media pantalla. deltaY: Incremento en Y que sufrirá el mapa, donde una unidad es media pantalla.

Si se define goTO, se ignorarán los valores dados a deltaX y deltaY. Una vez definido el movimiento, se añadirá al mapa mediante el método addMovement, tal y como se muestra en el ejemplo. Un mapa puede tener tantos movimientos como queramos y se llevarán a cabo según el orden en el que los hayamos añadido al mapa. NOTA: Cuando el inicio y el final de un movimiento están lo suficientemente cercanos, en lugar de dar el salto de golpe, el mapa se deslizará.

Code.aspx

Code.aspx.cs GMove move = new GMove(500, 1, -1); GMap1.addMovement(move); GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GMove move2 = new GMove(); move2.deltaMiliseconds = 2500; move2.goTo = new GLatLng(51, 44); GMap1.addMovement(move2); GMap1.addMovement(new GMove(2500, new GLatLng(51, 20))); GMap1.addMovement(new GMove(1500, 2, 3));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

113

GLatLngBounds El GLatLngBounds representa un rectángulo dentro del mapa, marcado por los extremos suroeste (sw) y noreste (ne). GLatLngBounds dispone de varios métodos que pueden llegar a ser extremadamente útiles para realizar algunas operaciones con nuestros mapas:

114

• • • • • • • • • • • •

equals(GLatLngBounds): nos dice si el GLatLngBounds pasado como parámetro es igual al del rectángulo. contains(GLatLng): nos dice si el GLatLng pasado como parámetro está dentro del actual rectángulo. intersects(GLatLngBounds): nos dice si el rectángulo pasado como parámetro intersecta al rectángulo. containsBounds(GLatLngBounds): nos dice si el rectángulo pasado como parámetro contiene al rectángulo. extend(GLatLng): amplia el rectángulo de modo que el GLatLng quede contenido dentro de él. getSouthWest: devuelve el GLatLng corresponiente a la coordenada suroeste. getNorthEast: devuelve el GLatLng corresponiente a la coordenada noreste. toSpan: devuelve el GLatLng que representa las coordenadas del rectángulo. isFullLat: nos dice si el rectángulo se extiende desde el polo sur hasta el polo norte. isFullLng: nos dice si el rectángulo se extiende a lo largo de toda la longutid terrestre. isEmpty: nos dice si el rectángulo está vacío. getCenter: devuelve la coordenada central del rectángulo.

Además con el método estático GMap1.getBoundsZoomLevel(latlngbounds) se obtiene el mayor zoom para el cual se visualiza toda el área definida por el latlngbounds.

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

115

Code.aspx.cs GLatLng sw = new GLatLng(40, 15); GLatLng ne = sw + new GLatLng(5, -10.2); GLatLngBounds latlngbounds = new GLatLngBounds(sw, ne); GMap1.addGMarker(new GMarker(latlngbounds.getNorthEast())); GMap1.addGMarker(new GMarker(latlngbounds.getSouthWest())); GMap1.GZoom = GMap1.getBoundsZoomLevel(latlngbounds); GMap1.setCenter(latlngbounds.getCenter()); GLatLng sw2 = new GLatLng(42, 7); GLatLng ne2 = sw2 + new GLatLng(5, 5); GLatLngBounds latlngbounds2 = new GLatLngBounds(sw2, ne2); GLatLng swBig = new GLatLng(35, 0); GLatLng neBig = swBig + new GLatLng(15, 15); GLatLngBounds latlngboundsBig = new GLatLngBounds(swBig, neBig); GLatLng inside = latlngbounds.getCenter(); GLatLng outside = neBig + new GLatLng(10, 10); bool isInside = latlngbounds.contains(inside); bool isOutSide = !latlngbounds.contains(outside); bool intersect = latlngbounds.insersects(latlngbounds2); bool contains = latlngboundsBig.containsBounds(latlngbounds); GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

DataSource GoogleMaps.subgurim.NET tiene soporte para DataSource. Éste funciona igual que el de cualquier otro elemento que soporte DataSource como un ListBox, un GridView, un ChekList, etc. De modo que, por ejemplo, podemos asignar un listado genérico o un dataset como "DataSource" o SqlDataSource u ObjectDataSource como "DataSourceID". Le podemos asignar los siguientes campos ("Fields"):

116 • • •

• • • • • •

DataLatField: indica el nombre del campo que contiene el "double" con la latitud del punto. Es un campo obligatorio. Si no se pone ningún nombre, valdrá "lat". DataLngField: indica el nombre del campo que contiene el "double" con la longitud del punto. Es un campo obligatorio. Si no se pone ningún nombre, valdrá "lng". DataGInfoWindowTextField: si deseamos que en del icono definido en los dos campos anteriores salga un GInfoWindow, vale con darle un valor string, que corresponderá con el valor en formato html del GInfoWindow. Por tanto, "DataGInfoWindowTextField" indica el nombre del campo que contiene el string con el html del GInfoWindow. Si dicho campo no existe o está vacío, no se abrirá ningún GInfoWindow. DataGIconImageField: Si queremos un icono debemos indicar el nombre del campo que contiene el path de la imagen. DataGIconShadowField: Si queremos un icono debemos indicar el nombre del campo que contiene el path de la sombra. DataGIconAnchorField: Si queremos un icono debemos indicar el nombre del campo que contiene el anchor de la imagen. Por ejemplo: 6,20 DataGIconSizeField: Si queremos un icono debemos indicar el nombre del campo que contiene el size de la imagen. Por ejemplo 12,20 DataGIconShadowSizeField: Si queremos un icono debemos indicar el nombre del campo que contiene el size de la sombra. Por ejemplo: 22,20 DataGInfoWindowAnchorField: Si queremos un infowindow, debemos indicar el nombre del campo que contiene el anchor de la imagen. Por ejemplo: 5,1

Con la propiedad DataSourceType podemos elegir qué mostrarán los puntos que definamos. Tenemos varias opciones: Markers (por defecto), Polygons, Polylines, PolygonsAndMarkers y PolylinesAndMarkers Como tanto el GPolygon y el GPolyline son muy configurables, tenemos las propiedades DataSourceGPolygonBase y DataSourceGPolylineBase a las que le daremos un GPolygon/GPolyline que actuará como template. Para facilitar la tarea, se ha creado la clase "DataSourceField", en el que las propiedades tienen el mismo nombre que los valores por defecto de los campos o "Fields". GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Como siempre, el ejemplo nos aclarará más ideas que la explicación.

117

Code.aspx



GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

Soporte PostBack El googlemaps.subgurim.net soporta el PostBack a tres niveles: • • •

Centro del mapa: el centro del mapa se mantiene según su última posición antes de hacer el PostBack. Zoom: igualmente se mantiene el nivel de zoom. Tipo de mapa: del mismo modo, se mantiene el tipo de mapa.

118

Code.aspx

Code.aspx.cs GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl)); GMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl)); GLatLng latlng = new GLatLng(42.12, -1.145); GMap1.setCenter(latlng, 5, GMapType.GTypes.Hybrid); GMap1.addGMarker(new GMarker(latlng + new GLatLng(2, 1)));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

GAdsManager La API de GoogleMaps nos ofrece la posibilidad de mostrar publicidad Adsense en nuestros mapas. Para ello usaremos el GAdsManager, que se compone de tres propiedades: • •

•

publisherId: el Identificador de tu cuenta Adsense helpSubgurim: del tipo HelpSubgurimEnum nos permite definir qué porcentaje, desde 0% a 100%, de publicidad impresa en el mapa corresponderá a Subgurim, con el único objetivo de apoyar a este proyecto. Es totalmente opcional. options: del tipo GAdsManagerOptions y sobre el que podemos definir parámetros como "minZoomLevel" (nivel mínimo a partir del cual saldrán anuncios), "maxAdsOnMap" (número máximo de anuncios en el mapa) y el "channel" (código de seguimiento Adsense)

Code.aspx

Code.aspx.cs GAdsManagerOptions options = new GAdsManagerOptions(1, 30); GMap1.addAdsManager(new GAdsManager("YourPublisherID", GAdsManager.HelpSubgurimEnum.FullHelp, options));

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

119

Nota y Agradecimiento Este documento ha sido extraído de la web oficial de Googlemaps.subgurim.net, por Sely. Para agradecer a Subgurim & cia. todo el trabajo realizado para facilitarnos al resto la programación.

120

Saludos. Sely. [email protected]

GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008