API Google Maps

Versin. 3.2.0.
1 -04/12/2008
DOCUMENTACION EN ESPAOL
Indice
Iniciacin Cmo 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 Cdigo .................................................................................................................... 16 Controles y overlays Controles Prefabricados. ......................................................................................................... 17 Controles Extra........................................................................................................................ 19 GOverViewMap....................................................................................................................... 21 Lneas...................................................................................................................................... 23 Polgonos ................................................................................................................................ 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 Pestaas ....................................................................................................... 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 Genrico ........................................................................................................................ 110 Movimiento y Animacin ...................................................................................................... 112 GLatLngBounds ..................................................................................................................... 114 DataSource ........................................................................................................................... 116 Soporte PostBack .................................................................................................................. 118 GAdsManager ....................................................................................................................... 119 Nota y Agradecimiento Nota y Agradecimiento.......................................................................................................... 120
Cmo empezar a utilizar GoogleMaps.Subgurim.NET

Previa Tras descargar el control y seguir las instrucciones de instalacin, no tenis ms que arrastrar vuestro control desde vuestra ToolBox. Vuestra pgina quedar encabezada por algo similar a: <%@ register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %> Y en vuestro .aspx tendris: <cc1:GMap ID="GMap1" runat="server" /> Y para usar la librera en cdigo, no olvidis importarla mediante: C#: using Subgurim.Controles; VB.NET: Imports Subgurim.Controles
Instrucciones 1.- Lo primero que debis hacer es conseguir una Key, pues lo exige Google para poder utilizar su API. La podis conseguir desde aqu. Fijaos que esa clave depende del dominio donde vayis a utilizarla, por lo que por cada Web donde utilicis el GoogleMaps.Subgurim.NET debis crear la Key apropiada. El modo ms sencillo donde ubicar la clave es en vuestro web.config: <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> ... <appSettings> <add key="googlemaps.subgurim.net" value="tuClave_yourKey" /> </appSettings> ... </configuration> 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 pgina cumplan los estndares XML. Para ello, no tenis ms que aadir un atributo (a continuacin se muestra en negrita) a vuestro tag head, de modo que se asemeje a: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> y este campo al style de vuestra pgina: <style type="text/css"> v\:* { behavior:url(#default#VML); } </style> 3.- Ahora ya slo queda comenzar a utilizar el control! Para ello se recomienda seguir los ejemplos y ante cualquier duda, idea o sugerencia, no dudis en preguntar en el foro. GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
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 Cmo empezar? el modo ms sencillo de asignar la clave al control es poniendo lo siguiente en el web.config: web.config <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> ... <appSettings> <add key="googlemaps.subgurim.net" value="ClaveDeGoogle" /> </appSettings> ... </configuration>
De este modo, el control ya se encargara de todo. Sin embargo, sigue valiendo asignar la clave desde la propiedad "Key" tanto en el mismo control como en cdigo. .aspx.cs GMap1.Key = "ClaveDeGoogle"; o .aspx <cc1:GMap ID="GMap1" runat="server" Key="ClaveDeGoogle" />
Alternativamente, tambin 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 <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> ... <appSettings> <add key="myOwnKey" value="ClaveDeGoogle" /> </appSettings> ... </configuration>
GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
Comercial Key
GoogleMaps.Subgurim.NET dispone de licencias comerciales para la utilizacin 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:
Eliminacin 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). Eliminacin de los comentarios en cdigo, en que se hace referencia al inicio y al final del cdigo propio del control.
Con esto se consigue que, de cara tanto al visitante como (si es el caso) al cliente al que le estis vendiendo la aplicacin, el control parezca totalmente vuestro. Ms informacin 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 ms sencillo de asignar la CommercialKey al control es poniendo lo siguiente en el web.config: web.config <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> ... <appSettings> <add key="googlemaps.subgurim.net_Commercial" value="CommercialKey" /> </appSettings> ... </configuration>
De este modo, el control ya se encargara de todo. Del mismo modo tambin vale asignar la clave desde la propiedad "CommercialKey" tanto en el mismo control como en cdigo. .aspx.cs GMap1.CommercialKey = "CommercialKey"; o .aspx <cc1:GMap ID="GMap1" runat="server" CommercialKey="CommercialKey" />
Alternativamente, tambin se le puede asignar a la propiedad "CommercialKey" del control la GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
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"; web.config <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> ... <appSettings> <add key="myOwnCommercialKey" value="CommercialKey" /> </appSettings> ... </configuration>
Bsico
En nuestro primer ejemplo, vemos que es increiblemente sencillo tener el mapa de google en nuestra pgina. Podemos elegir la versin de la API de Google Maps que queremos que utilice el control. Si no hacemos nada la versin es la que el equipo de Google Maps define por defecto; pero si queremos activar otra versin previa (por ejemplo por compatibilizar el cdigo), basta con definirlo con la propiedad Version. En el ejemplo vemos lo fcil que es elegir la versin "2.43". Tambin podemos decidir si el usuario puede mover el mapa con el ratn (Dragging). Por defecto s es as. En nuestro ejemplo no vamos a permitirlo. Otra de las caractersticas bsica 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 (slo funciona si se dispone de licencia)
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs // GMaps1.Version = "2.43"; GMap1.enableDragging = false; GMap1.enableGoogleBar = true; GMap1.Language = "es"; GMap1.BackColor = Color.White; GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
Bsico 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.
Code.aspx <cc1:GMap ID="GMap1" runat="server" Width="90%" Height="250px" /> <cc1:GMap ID="GMap2" runat="server" /> GoogleMaps.Subgurim.NET Versin: 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);
Bsico 3
GoogleMaps no se lleva bien con los elementos que lo ocultan con un Hidden, pues acaba descuadrndose o, directamente, no mostrndose. Tenemos este problema, por ejemplo con los TabPanels del TabContainer del Ajax Control Toolkit o con un div con style="hidden".
La solucin es utilizar el mtodo 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 <cc1:GMap ID="GMap1" runat="server" /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="1"> <ContentTemplate> <cc1:GMap ID="GMap1" runat="server" /> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="2"> <ContentTemplate> Empty Tab GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="3"> <ContentTemplate> <cc1:GMap ID="GMap2" runat="server" /> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel4" runat="server" HeaderText="4"> <ContentTemplate> Empty Tab </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> 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();
Zoom
Para asignar el zoom del mapa, manejaremos la propiedad GZoom. El 1 se corresponde con el zoom ms alejado, y conforme aumentemos nos acercaremos ms. Tened en cuenta que en algunas zonas no hay mapas disponibles para zooms elevados.
10
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.GZoom = 3;
Zoom 2
Haciendo doble clic sobre el Mapa podemos hacer un Zoom IN (botn de la izquierda) y un Zoom Out (botn de la derecha). Pero adems, ese zoom ocurrir de forma gradiente y continua. Las propiedades encargadas de tal menester son enableDoubleClickZoom y enableContinuousZoom. Adems, tambin contamos con enableHookMouseWheelToZoom, con el que, si lo activamos, permitiremos que el usuario haga zoom con la rueda del ratn.
11
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs // Ambas propiedades estn activadas por defecto, para desactivarlas: // GMap1.enableContinuousZoom = false; // GMap1.enableDoubleClickZoom = false; GMap1.enableHookMouseWheelToZoom = true;
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) Satlite: GMapType.GTypes.Satellite Hbrido: GMapType.GTypes.Hybrid Fsico: GMapType.GTypes.Physical
Con el el control para ASP.NET, elegir entre un tipo de mapa u otro no consiste ms que en utilizar el IntelliSense.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.mapType = GMapType.GTypes.Physical; GMap1.addMapType(GMapType.GTypes.Physical); GMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));
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 <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.enableGKeyboardHandler = true;
Asignar Centro
Para asignar el centro utilizaremos el mtodo setCenter() ste tiene tres sobrecargas:

setCenter(GLatLng): slo 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.
14
Nota: las variables del tipo GLatLng pueden sumarse y restarse con los operadores '+' y '-'.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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));
Custom Mouse Cursors

Podemos asignar tipos de cursores segn la accin que se est realizando sobre el mapa. Para ello tenemos que crear un objeto del tipo GCustomCursor y aadirlo 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.
15
Ambas porpiedades son del tipo enumerado cursor, del que podemos elegir 9 opciones, que coinciden con la definicin de tipo de cursor que se da en CSS: auto, crosshair, Default, pointer, hand, wait, text, help, move.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GCustomCursor customCursor = new GCustomCursor(cursor.crosshair, cursor.text); GMap1.addCustomCursor(customCursor);
Minimizar Cdigo
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 cdigo al mximo.
16
Si nuestro nico objetivo es mostrar mapas con GPolygons o GMarkers y no queremos que el usuario tenga la opcin de interactuar con el mapa, deberamos 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 opcin de moverse en el mapa), de modo que aqu van algunas opciones que se pueden aplicar en el mapa para dejar el cdigo a mnimos:

enablePostBackPersistence: Si la pgina que contiene el mapa no va a realizar ningn PostBack, es recomendable desactivar esta opcin (est activada por defecto). enableGetGMapElementById: Si no vamos a usar nunca la opcin de getGMapElementById, es recomendable desactivar esta opcin (est activada por defecto). enableStore: si no vamos a usar la propiedad Store no debemos activar esta opcin (desactivada por defecto). enableServerEvents: slo debemos activar esta opcin si vamos a usar server events (desactivado por defecto).
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.enablePostBackPersistence = false; GMap1.enableGetGMapElementById = false;
Controles Prefabricados
Los controles prefabricados son aquellos que Google provee por defecto, y con ASP.NET es muy sencillo aadirlos 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 cdigo ejemplo se puede ver cmo). 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 jerrquico. Tiene opciones avanzadas. GControl.preBuilt.SmallMapControl: aade cuatro flechas para navegar por el mapa, as como dos botones para aumentar y reducir el zoom. GControl.preBuilt.LargeMapControl:aade 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: aade un pequeo mapa (que se puede minimizar) que permite navegar a grandes rasgos por los alrededores de nuestro mapa actual.
17
Adems 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 ms 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.
18
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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)));
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 ms 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 cdigo ejemplo se puede ver cmo). Hasta la versin actual nos encontramos con estos tipos de control extraBuilt:

19
TextualZoomControl: Aade dos cuadros de texto desde los que se puede alejar y acercar el zoom. NumericalZoomControl: Aade dos cuadros de texto desde los que se puede alejar y acercar el zoom con el nmero del zoom como texto. TextualCoordinatesControl: Aade 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: Aade 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: Aade una '+' marcando el centro exacto del mapa.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GControl control = new GControl(GControl.extraBuilt.NumericalZoomControl); GMap1.addControl(control);
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
GOverViewMap
El modo ms sencillo de aadir un OverViewMap viene explicado en la seccin de controles prefabricados, donde vemos que no hay ms 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 caractersticas del OverViewMap que antes no podamos, y que en esencia son bastante similares a las que se ofrecen para un mapa normal. Vamos a poder trabajar con:

21
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: anlogamente instanciaremos el control de escala mediante addControl_Scale(). Listeners: usaremos casi cualquier tipo de Listeners mediante addListener(GListener). Lneas: aadiremos polilineas mediante addPolyline(GPolyline).
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng latlng = new GLatLng(40, 1); GOverViewMap gOVM = new GOverViewMap(); gOVM.gSize = new GSize(250, 150); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
gOVM.mapType = GMapType.GTypes.Satellite; gOVM.addControl_MapType(); gOVM.addControl_Scale(); gOVM.addListener(new GListener(gOVM.ID, GListener.Event.click, "function() {alert('Clicked!!');}")); List<GLatLng> puntos = new List<GLatLng/>(); 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));
22
Lneas
Para aadir lneas a nuestro mapa, utilizaremos el GPolyline. Est compuesta por 4 elementos, del que slo el primero es obligatorio:

points: listado genrico de puntos (del tipo GLatLng). Es la parte ms importante pues definir el trazado de la lnea. weight: anchura de la lnea en pixels opacity: double entre 0 y 1. Define la opacidad de la lnea. 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 lnea es o no clicable. geodesic: dibuja la lnea como si fuera geodsica, no plana.
23
NOTA: para un correcto funcionamiento en el Internet Explorer, debis aadir el siguiente atributo a vuestro tag HTML: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng latlng = new GLatLng(46, 21); GMap1.setCenter(latlng, 4); List<GLatLng> puntos = new List<GLatLng>(); 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 Versin: 3.2.0.1 04/12/2008
puntos.Add(latlng + new GLatLng(4.79, +2.6)); GPolyline linea = new GPolyline(puntos, "FF0000", 2); GMap1.addPolyline(linea); List<GLatLng> puntos2 = new List<GLatLng>(); 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<GLatLng> puntos3 = new List<GLatLng>(); 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);
24
Polgonos
Crear polgonos 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 slo la primera es obligatoria:

points: listado genrico de puntos (del tipo GLatLng). Es la parte ms importante pues definir el trazado del polgono. strokeWeight: anchura de la lnea en pixels. strokeOpacity: double entre 0 y 1. Define la opacidad de la lnea. 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 polgono. Debemos dar el valor como un string con el color en hexadecimal. fillOpacity: double entre 0 y 1. Define la opacidad del relleno del polgono. clickable: indica si el polgono es o no clicable.
25
Adems, hemos aadido dos interesantes mtodos por considerar que su uso es muy tpico:

close(): independientemente de cmo estn configurados los puntos del polgono, este mtodo se encarga de cerrarlo, de modo que el primer punto coincida con el ltimo. createPolygon(GLatLng center, int sides, double radius): Llamar a este mtodo NO implica borrar los puntos insertados previa o posteriormente. Esto se deja a gusto del programador. Lo que hace esta funcin es crear un polgono en base a sus parmetros de entrada: o center: centro del polgono. o sides: lados del polgono. A partir de 20 se asemeja a una circunferencia. o radius: grados geogrficos de radio. o inclination: inclinacin del primer punto. Es un double expresado en radianes. Su valor por defecto es PI/4. Cabe destacar que se trata de polgonos basados en puntos geogrficos. Por ejemplo, si creamos un polgono de 4 grados NO se mostrar por pantalla un cuadrado perfecto, sino un polgono de 4 lados cuya distancia kilomtrica entre el centro y ellos sea la misma. As pues, cuanto ms a los polos, ms "deformado" estar el cuadrado, y cuanto ms al ecuador, ms "perfecto" ser el cuadro.
NOTA: para un correcto funcionamiento en el Internet Explorer, debis aadir el siguiente atributo a vuestro tag HTML: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
26
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng latlng = new GLatLng(46, 21); GMap1.setCenter(latlng, 4); List<GLatLng> puntos = new List<GLatLng>(); 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<GLatLng> puntos2 = new List<GLatLng>(); 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<GLatLng>(), "00ff00", 3, 0, "ff0044", 0); poligono3.createPolygon(latlng + new GLatLng(-6, -7.5), 7, 4, Math.PI /3); GMap1.addPolygon(poligono3);
TileLayers
Con las TileLayers podremos definir nuestras propias capas sobre el mapa, de modo que podremos superponer nuestras imgenes 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 ms importante es la correcta definicin 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 debis 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 sera: http://host/tile?x=3&y=27&z=5.png
27
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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 Versin: 3.2.0.1 04/12/2008
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
GGroundOverlay
Con el GGroundOverlay se pueden insertar imgenes a los mapas de forma muy sencilla. Basta con definir la imageUrl y el GLatLngBounds y... ya est!
29
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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);
GScreenOverlay
Es muy similar al GGroundOverlay, con la diferencia que usando el GScreenOverlay la imagen que se muestra es esttica (no cambia de posicin absoluta cuando se mueve el mapa.
30
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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);
Custom Overlays
Del mismo modo que hay controles extra, tenemos los GCustomOverlays de modo que podremos aadir capas al mapa de google en una sola lnea. Se va a trabajar mucho en este campo para las futuras versiones. Disponemos hasta el momento de:
Rectangle: define un rectngulo en la parte central del mapa.
31
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.Add(new GCustomOverlay(GCustomOverlay.Overlay.Rectangle));
GStreetViewOverlay
Aadiendo el GStreetViewOverlay podremos ver las zonas en las que est activo el Street View. Sabiendo en qu zonas geogrficas est activo el Street View podremos usar el GStreetViewPanorama.
32
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs
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 informacin de forma jerrquica en el modo en que nosotros lo configuremos, aunque tiene una interesante configuracin por defecto. Al GHierarchicalMapTypeControl le iremos aadiendo GHierarchicalMapTypeControlRelation. El GHierarchicalMapTypeControlRelation se compone de las siguientes propiedades:

33
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 <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.addMapType(GMapType.GTypes.Physical); GHierarchicalMapTypeControl hierarchicalMapTypeControl = new GHierarchicalMapTypeContr ol(); hierarchicalMapTypeControl.clearPreviousRelationShips = true; hierarchicalMapTypeControl.hierarchicalMapTypeControlRelations.Add( GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
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
GLayer
Con el nuevo objeto GLayer podemos aadir a nuestros mapas fotos de Panoramio o artculos geolocalizados de la Wikipedia de forma muy sencilla. La clase GLayerID contiene todos los tipos de Layers que podemos aadirle al mapa.
35
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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);
InfoWindow
Aadir un InfoWindow es tremendamente fcil. No hay ms que instanciar a GInfoWindow y darle los valores:

point: del tipo GLatLon, indica dnde se ubicar el InfoWindow html: texto (con html includo) que ir dentro del InfoWindow.
36
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng latlon = new GLatLng(10.2, 22); GMap1.setCenter(latlon, 4); GInfoWindow window = new GInfoWindow(latlon, "Ejemplo de <b>infoWindow</b>"); GMap1.addInfoWindow(window);
InfoWindow con Icono

Aadir un InfoWindow sobre un icono es igualmente sencillo. No hay ms que instanciar a GInfoWindow y darle los valores:

gMarker: se estudia en el ejemplo Iconos. html: texto (con html includo) 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 ratn sobre el icono, cuando lo retiremos, etc.
37
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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 <b>infoWindow</b>", false, GListener.Event.mouseover); GMap1.addInfoWindow(window);
InfoWindow con Pestaas

El funcionamiento del InfoWindow con pestaas (GInfoWindowTabs) es muy similar al de sin pestaas, siendo que todo lo visto en los dos ejemplos anteriores es vlido. La diferencia estriba en que en este caso hemos de aadir un listado (System.Collections.Generic.List) de pestaas (GInfoWindowTab), del modo en que se indica en el ejemplo. En cuanto a la pestaa (GInfoWindowTab), manejaremos dos propiedades:
38
label: etiqueta de la pestaa. html: texto (con html includo) que ir dentro de la pestaa.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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<GInfoWindowTab> tabs = new System.Collections.Generic.List<GInfoWindowTab>(); for (int i=0; i<3; i++) { tabs.Add(new GInfoWindowTab("Tab " + i.ToString(), i.ToString())); } GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
iwTabs.tabs = tabs; GMap1.addInfoWindowTabs(iwTabs); /****** INFOWINDOWTAB 2 ******/ GInfoWindowTabs iwTabs2 = new GInfoWindowTabs(); GMarker icono = new GMarker(new GLatLng(5, 19)); iwTabs2.gMarker = icono; iwTabs2.tabs = tabs; GMap1.addInfoWindowTabs(iwTabs2);
39
ShowMapBlowUp
El ShowMapBlowUp es un elemento que muestra en un pequeo mapa flotante una parcela del mapa en el que estamos trabajando... aunque para explicarlo, un ejemplo va mejor que mil palabras ;P Su funcionamiento bsico es el mismo que el InfoWindow, la nica diferencia es que aqu, para una eficaz utilizacin, hay que hacer uso de GInfoWindowOptions, que se explica en un ejemplo posterior. Las dos propiedades del GInfoWindowOptions que se aplican en exclusiva al ShowMapBlowUp son:

40
mapType: del enumerador GMapType.GTypes, indica el tipo de mapa que se va a utilizar. zoomLevel: nivel de zoom del mapa flotante.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng latlon = new GLatLng(41.65, 0.91); GMap1.setCenter(latlon, 4); GInfoWindowOptions options = new GInfoWindowOptions(); options.zoomLevel = 14; options.mapType = GMapType.GTypes.Hybrid; GShowMapBlowUp mBlowUp = new GShowMapBlowUp(new GMarker(latlon), options); GMap1.addShowMapBlowUp(mBlowUp);
GInfoWindowOptions
GInfoWindowOptions sirve para aadir ciertas opciones a InfoWindow, InfoWindow con pestaas y a ShowMapBlowUp. Est compuesta de 6 propiedades, algunas de ellas slo aplicables a alguno de los elementos correspondientes:

maxWidth: aplicable a todos los elementos. Marca mxima la anchura en pixeles que tendr la ventana. onOpenFn: aplicable a todos los elementos. Ejecuta un funcin javascript cuando se abre la ventana. La funcin javascript puede enlazarse de dos modos: - Poniendo el nombre de la funcin javascript que ya tengas hecho en tu aspx. - Creando y aadiendo tu propio javascript desde aqu, con una funcin annima. Por ejemplo function() {alert('Estoy abriendo la ventana');} Para mayor claridad, mirad los ejemplos. onCloseFn: aplicable a todos los elementos. Ejecuta un funcin javascript cuando se cierra la ventana. Funcionamiento anlogo a onOpenFn selectedTab: aplicable slo al InfoWindow con pestaas. Marca qu pestaa ser la activa, donde la primera pestaa tiene ndice 0. Por defecto, el ndice 0 ser el activo. zoomLevel: aplicable slo al ShowMapBlowUp. Marca el nivel del zoom del mapa flotante. mapType: aplicable slo al ShowMapBlowUp. Marca el tipo de mapa (definido en el enumerador GMapType.GTypes) del mapa flotante. MaxTitle: el ttulo del infowindow cuando lo maximicemos. MaxContent: el contenido del infowindow cuando lo maximicemos. Podemos ponerle el HTML que queramos. Si no se definen ni MaxTitle, ni MaxContent, el infowindow no tendr la opcin de maximizarse.
41
42
43
Code.aspx <script type="text/javascript"> function abiertoSMBU() { alert('Has abierto el ShowMapBlowUp'); } </script> <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng latlng = new GLatLng(44, 9); GLatLng relativo = new GLatLng(2, -6); GMarker marker1 = new GMarker(latlng + relativo); GMarker marker2 = new GMarker(latlng - relativo); GMap1.setCenter(latlng, 4, GMapType.GTypes.Hybrid); GInfoWindow window = new GInfoWindow(latlng, "InfoWindow. Close me please."); GInfoWindowOptions options1 = new GInfoWindowOptions(); options1.onCloseFn = "function(){alert('Thanks! You have closed me ;D')}"; window.options = options1; GMap1.addInfoWindow(window); List<GInfoWindowTab> tabs = new List<GInfoWindowTab>(); tabs.Add(new GInfoWindowTab("Tab 1", "I'm tab 1")); tabs.Add(new GInfoWindowTab("Tab 2", "I'm tab 2")); tabs.Add(new GInfoWindowTab("Tab 3", "I'm <b>3</b> and I'm active by default!!")); GInfoWindowTabs wTabs = new GInfoWindowTabs(marker1, tabs); GInfoWindowOptions options2 = new GInfoWindowOptions(2); wTabs.options = options2; GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
GMap1.addInfoWindowTabs(wTabs); GInfoWindowOptions options3 = new GInfoWindowOptions(12, GMapType.GTypes.Normal); options3.onOpenFn = "abiertoSMBU()"; GShowMapBlowUp mbUp = new GShowMapBlowUp(marker2, false, options3); GMap1.addShowMapBlowUp(mbUp); GInfoWindowOptions options = new GInfoWindowOptions("Max Title", "Max Content"); GInfoWindow window2 = new GInfoWindow(marker3, "infoWindow example", options); GMap1.addInfoWindow(window2);
44
Iconos
Ya hemos utilizado los iconos en varias ocasiones, sobretodo asocindolos con InfoWindow y similares. Son los GMarker. Obviamente, podemos utilizarlos sin asociarlos a nada. Tenemos dos propiedades que definen al GMarker:

point: la coordenada (del tipo GLatLng) en que se ubicar el icono. options: del tipo GMarkerOptions.
Las GMarkerOptions definen estas propiedades:

45
icon: que explicamos detenidamente en el ejemplo siguiente clickable: indica si un icono es o no clickable (lo es por defecto). title: el html tooltip del icono. draggable: define si el icono puede ser arrastrado en el mapa. Por defecto NO lo es. dragCrossMove: Es una propiedad poco importante. Cuando arrastramos un icono aparece un cruz bajo ste que indica donde queremos que se ubique. Dando un valor de true la cruz se desplaza un poco hacia abajo en el momento cogemos el icono, en caso contrario (por defecto) es el icono el que se desplaza mnimamente hacia arriba. bouncy: indica si queremos que el icono pegue unos botes cuando lo soltamos. bounceGravity: marca la "altura" que darn los botes. Por defecto vale 1. maxHeight: especifca la distancia en pixels en la que un marker se elever cuando es arrastrado.. imageMap: Array de entenros representando las coordenadas x/y que indicaran la zona en que es clicable un icono para navegadores diferentes a Internet Explorer.
Code.aspx <cc1:GMap ID="GMap1" runat="server" />
Code.aspx.cs GLatLng latlng = new GLatLng(42.12, -1.145); GMap1.setCenter(latlng, 5, GMapType.GTypes.Hybrid); GMarker marker = new GMarker(latlng); GInfoWindowOptions IWoptions = new GInfoWindowOptions(12, GMapType.GTypes.Normal); GShowMapBlowUp mbUp = new GShowMapBlowUp(marker, false, IWoptions); GMap1.addShowMapBlowUp(mbUp); GMap1.addGMarker(new GMarker(latlng + new GLatLng(2, 1)));
46
GMarkerOptions markerOptions = new GMarkerOptions(); markerOptions.clickable = false; GMarker marker2 = new GMarker(latlng + new GLatLng(-1, 2.5), markerOptions); GMap1.addGMarker(marker2); GMarker markerDraggable = new GMarker(latlng + new GLatLng(-2, -1)); GMarkerOptions mOpts = new GMarkerOptions(); mOpts.draggable = true; markerDraggable.options = mOpts; string jsStart = "function() {" + GMap1.GMap_Id + ".closeInfoWindow();}"; string jsEnd = "function() {" + markerDraggable.ID + ".openInfoWindowHtml('<a href=\"http://www.playsudoku.biz\" target=\"_blank\">Play Sudoku</a>');}"; GMap1.Add(new GListener(markerDraggable.ID, GListener.Event.dragstart, jsStart)); GMap1.Add(new GListener(markerDraggable.ID, GListener.Event.dragend, jsEnd)); GMap1.addGMarker(markerDraggable);
Iconos Avanzados
Podemos crear un tipo de icono nuevo que sustituya al existente por defecto. Para ello usaremos GIcon, que como comentbamos en el ejemplo anterior, asignaremos al GMarker desde su propiedad options (del tipo GMarkerOptions). GIcon tiene 11 propiedades, y es obligatorio asignar, al menos, los dos primeros:

image: la imagen del icono (obligatorio). shadow: la sombra del icono. iconSize: el tamao (del tipo GSize) de la imagen del icono (obligatorio). shadowSize: el tamao (del tipo GSize) de la sombra del icono. iconAnchor: la coordenada relativa en pixeles (Gpixel) de la esquina superior izquierda desde la cual el icono es clickable (obligatorio). infoWindowAnchor: la coordenada relativa en pixeles (Gpixel) de la esquina superior izquierda desde la cual el InfoWindow (o similar) asociado al icono es clickable. printImage: la imagen para mapas impresos. Debe tener el mismo tamao que image. mozPrintImage: anlogo a printImage, pero para Mozilla/Firefox. printShadow: la sombra para mapas impresos. Debe tener el mismo tamao que shadow. transparent: la imagen de un virtual versin trasparente de la imagen, usada para capturar eventos clic en Internet Explorer. La imagen debe ser el PNG de 24-bits de la image, con un 1% de opacidad. Debe tener el mismo tamao que image. baseIcon: un icono base del que se copiarn todas las propiedades a este icono.
47
Recomendado: en la galera de iconos podris encontrar cientos de iconos para vuestros mapas.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
Code.aspx.cs GLatLng latlng = new GLatLng(41, -3.2); GMap1.setCenter(latlng, 5); GIcon icon = new GIcon(); icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); GMarkerOptions mOpts = new GMarkerOptions(); mOpts.clickable = false; mOpts.icon = icon; GMarker marker = new GMarker(latlng, mOpts); GMap1.addGMarker(marker);
48
Marker Manager
Para poder manejar cientos de iconos a la vez y adems poder asignarles un rango de zoom, no tenemos ms que usar el MarkerManager. Por ejemplo, podramos aadir un icono que slo fuera visible a partir de un nivel de zoom = 2, y luego aadir diez marcadores que slo fueran visibles entre el nivel de zoom 6 y el 8. Adems el MarkerManager slo tiene una funcin muy sencilla de usar:
49
Add(param1, param2, [param3]): el primer parmetro puede ser tanto un simple GMarker, un GInfoWindow o un GInfoWindowTabs como un listado genrico de ellos. El segundo parmetro indica el nivel mnimo de zoom y el tercero (opcional) indica el mximo. Recordemos que los niveles de zoom van del 0 al 17.
A cada GMarker se le puede aadir un evento con GListener. En nuestro ejemplo, a cada uno de los diez marcadores creados aleatoriamente, se le ha asignado un evento "onclick" que alerta del orden en que ha sido creado.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.setCenter(new GLatLng(41, 3), 3); GMap1.Add(new GControl(GControl.preBuilt.LargeMapControl)); GMarker m1 = new GMarker(new GLatLng(41, 3)); MarkerManager mManager = new MarkerManager(); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
mManager.Add(m1, 2); List<GMarker> mks = new List<GMarker>(); List<GInfoWindow> iws = new List<GInfoWindow>(); Random r = new Random(); double ir1, ir2; GMarker mkr; for (int i = 0; i < 10; i++) { ir1 = (double)r.Next(40) / 10.0 - 2.0; ir2 = (double)r.Next(40) / 10.0 - 2.0; mkr = new GMarker(m1.point + new GLatLng(ir1, ir2)); mks.Add(mkr); GMap1.Add(new GListener(mkr.ID, GListener.Event.click, "function(){alert('" + i + "');}")); } for (int i = 0; i < 5; i++) { double ir1 = (double)r.Next(40) / 20.0 - 1; double ir2 = (double)r.Next(40) / 20.0 - 1; mkr = new GMarker(m1.point + new GLatLng(ir1, ir2)); GInfoWindow window = new GInfoWindow(mkr, i.ToString()); iws.Add(window); } mManager.Add(mks, 6, 8); mManager.Add(iws, 7, 8); GMap1.markerManager = mManager;
50
Static Map
En caso de querer un mapa muy sencillo con iconos estticos y poco ms, puede que nos interese usar el Static Map. El resultado ser una imagen con el formato que decidamos (gif, jpg o png) y sobre la que no podr realizarse ningn tipo de interaccin. El modo de trabajar con el Static Map es muy parecido al que tenemos con el GMap normal. De hecho gran parte de propiedades con la GoogleKey, la CommercialKey, Height, Width, etc. son exactamente iguales a las del GMap. Sus propiedades diferentes ms importantes son:

51
mapType: enum del tipo MapType enum que nos permetir elegir el tipo de mapa entre "roadmap", "mobile", "satellite", "hybrid" y "terrain". format: enum del tipo FormatEnum que nos permitir decidir el formato de la imagen (gif, jpg o png) span: permite definir la anchura que abarca el mapa en grados (GLatLng). Usado junto con Width y Height evita usar el zoom. Alt: define el Alt normal del element "img" de HTML.
Al Static Map le podemos aadir un un StaticMarker (el equivalente al GMarker) y un StaticPath equivalente al GPolyline usando los mtodos "addStaticGMarker" y "addStaticPath".
Code.aspx <cc1:StaticGMap ID="StaticGMap1" runat="server" Width="500" Height="500" Language="en" format="png32" /> GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
Code.aspx.cs GLatLng latLng = new GLatLng(41, -7); int colorEnumLength = 11; int sizeEnumLength = 3; double latStep = -1; double lngStep = 0.4; string msg = "Subgurim Google Maps";
52
int iLat = 0; int iLng = 0; Random r = new Random(); foreach (char c in msg) { if (c == ' ') { iLat++; continue; } GLatLng latlngAux = latLng + new GLatLng(latStep * iLat + r.NextDouble() * 0.4, lngStep * iLn g); int randomColor = r.Next(colorEnumLength); StaticGMarker.ColorEnum color = (StaticGMarker.ColorEnum)randomColor; int randomSize = r.Next(2, sizeEnumLength); StaticGMarker.SizeEnum size = (StaticGMarker.SizeEnum)randomSize; StaticGMarker staticGMarker = new StaticGMarker(latlngAux, size, color, c); StaticGMap1.addStaticGMarker(staticGMarker); iLng++; } //StaticGMap1.GZoom = 5; StaticPath path = new StaticPath(); path.colorNet = Color.FromArgb(255, 0, 80); path.weight = 5; path.alpha = 150; path.points.Add(new GLatLng(41, -5)); path.points.Add(new GLatLng(41, -4)); path.points.Add(new GLatLng(40, -4)); path.points.Add(new GLatLng(39, -2)); StaticGMap1.addStaticPath(path); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
GoogleEarth Map
Se define como el "Google Earth" para la Web. Comparte muchas de las caractersticas del Google Maps normal, pero las muestra al "modo Google Earth". Para su visualizacin requiere un plugin fcilmente instalable.
53
Code.aspx <cc1:GEarthMap ID="GEarthMap1" runat="server" Height="400" />
Mars Map
Muestra el planeta Marte y se usa exactamente igual que el GMap, exceptuando el mapType que es del tipo GMarsMapType.
54
Code.aspx <cc1:GMarsMap ID="GMarsMap1" runat="server" /> Code.aspx.cs GMarsMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));
Moon Map
Muestra la Luna y se usa exactamente igual que el GMap, exceptuando el mapType que es del tipo GMoonMapType.
55
Code.aspx <cc1:GMoonMap ID="GMoonMap1" runat="server" /> Code.aspx.cs GMoonMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));
Sky Map
Muestra el cielo y se usa exactamente igual que el GMap, exceptuando el mapType que es del tipo GSkyMapType.
56
Code.aspx <cc1:GSkyMap ID="GSkyMap1" runat="server" />
Custom Maps
Con los CustomMaps podremos definir las imgenes que mostrar el control de Google en base a la latitud, longitud y zoom en la que estemos. Utilizaremos las clases GCopyright, GCopyrightCollection, GTileLayerOptions, GTileLayer y GCustomMapType. Su uso es muy sencillo y vale seguir el ejemplo para entenderlo. El elemento ms importante es la correcta definicin 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 debis 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 sera: http://host/tile?x=3&y=27&z=5.png
57
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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 Versin: 3.2.0.1 04/12/2008
tileLayerOptions.tileUrlTemplate = "http://code.google.com/apis/maps/documentation/exam ples/include/tile_crosshairs.png"; GTileLayer tilelayer = new GTileLayer(myCopyright, 10, 10, tileLayerOptions);
GCustomMapType customMapType = new GCustomMapType(tilelayer, new GMercatorProject ion(13), "Subgurim"); GMap1.Add(customMapType);
58
GStreetViewPanorama
El GStreetViewPanorama es un control diferente al GMaps y por tanto con muchas caractersticas distintas. Sin embargo su uso sigue la misma filosofa del GMaps. Con el GStreetViewPanorama conseguimos el modo StreetView. Algunos elementos como la GoogleKey, la CommercialKey, el Width, el Height, etc. se comparten con el GMaps, pero muchos otros son totalmente diferentes. Lo elementos principales del GStreetViewPanorama son:
59
GStreetviewPanoramaOptions: con el que podremos definir las coordenadas en que se abrir la Street View, as como las caractersticas de la cmara,elemento GPov, que define el zoom, el yaw (ngulo respecto al norte) y el pitch (ngulo respecto a la horizontal). GStreetviewListener: con el que manejaremos los diferentes eventos, como cambio de zoom, yaw o pitch.
Code.aspx <cc1:GStreetviewPanorama ID="GStreetviewPanorama1" runat="server" /> Code.aspx.cs GStreetviewPanorama1.StreetviewPanoramaOptions = new GStreetviewPanoramaOptions(ne w GPov(-180, -15, 1)); GStreetviewListener zoomlistener = new GStreetviewListener( GStreetviewPanorama1.GMap_Id, GStreetviewListener.Event.zoomchanged, "function(zoom) { alert('Zoom changed to ' + zoom); }");
GStreetviewListener yawlistener = new GStreetviewListener( GStreetviewPanorama1.GMap_Id, GStreetviewListener.Event.yawchanged, "function(yaw) { alert('Yaw changed to ' + yaw); }"); GStreetviewListener pitchlistener = new GStreetviewListener( GStreetviewPanorama1.GMap_Id, GStreetviewListener.Event.pitchchanged, "function(pitch) { alert('Pitch changed to ' + pitch); }");
60
GStreetviewPanorama1.Add(yawlistener); GStreetviewPanorama1.Add(pitchlistener); GStreetviewPanorama1.Add(zoomlistener);
Eventos
Hasta el momento hemos ido utilizando eventos en varios ejemplos de forma totalmente automtica. Por ejemplo, cuando hacemos clic sobre un marker y se muestra una ventana, entra por medio el evento "click". Del mismo modo, cuando utilizamos el TextualCoordinatesControl, cuando se arrastra el mapa salta el evento "moveend" que captura las coordenadas del centro de la pantalla y las muestra en el cuadro de texto. Con GoogleMaps.Subgurim.NET, la versatilidad es absoluta pues mediante los Listeners podemos configurar eventos de cualquier tipo para que hagan saltar nuestras propias funciones javascript. Para asignar eventos se trabaja con la clase GListener. sta dispone de tres propiedades:

61
source: el elemento que va a producir el evento. Puede ser el propio mapa, un icono, un polyline o un polygon. my_sEvent: evento que vamos a capturar. Por ejemplo "click", "moveend", "drag", etc. Para no tener que saberse todos los eventos posibles de memoria, podemos usar el enumerado Event handler: podemos crear una funcin al vuelo o usar una funcin javascript que hayamos hecho previamente (ver el ejemplo, pues se usan las dos opciones).
Code.aspx <script type="text/javascript">> function alertame() { alert('Quedas alertado'); } </script> GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
<cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng latlng = new GLatLng(41, -3.2); GMap1.setCenter(latlng, 5, GMapType.GTypes.Satellite); GMarkerOptions mOpts = new GMarkerOptions(); mOpts.draggable = true; GMarker marker = new GMarker(latlng, mOpts); GMap1.addGMarker(marker); GListener listener = new GListener(marker.ID, GListener.Event.dragend, "alertame"); GMap1.addListener(listener); GMarker mkr = new GMarker(); mkr.options = mOpts; mkr.javascript_GLatLng = "point"; listener = new GListener(mkr.ID, GListener.Event.dragend, "alertame"); System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append("function(overlay, point) {"); sb.Append("if (overlay){"); sb.Append("alert(overlay.id);"); sb.Append("}"); sb.Append("else{"); sb.Append(mkr.ToString(GMap1.GMap_Id)); sb.Append(listener.ToString()); sb.Append("}"); sb.Append("}"); GListener listener2 = new GListener(GMap1.GMap_Id, GListener.Event.click, sb.ToString()); GMap1.addListener(listener2); GMap1.addListener(new GListener(GMap1.GMap_Id, GListener.Event.moveend, "function() {alert('I Love Elvis :9P');}")); GPolygon polygon = new GPolygon(); polygon.Add(latlng + new GLatLng(1, 1)); polygon.Add(latlng + new GLatLng(2, 3)); polygon.Add(latlng + new GLatLng(4, 4)); polygon.close(); GMap1.Add(polygon); GListener listener3 = new GListener(polygon.PolygonID, GListener.Event.click, "function(point) {alert(point);}"); GMap1.addListener(listener3);
62
Eventos de Servidor
Con los eventos de servidor, podrs viajar desde el mapa al servidor mediante AJAX. La utilizacin de los eventos de servidor es la misma que la de cualquier control Web ASP.NET. Por defecto estn desactivados. Hay que activarlos explcitamente haciendo enableServerEvents = true Como se puede comprobar en el ejemplo, las funciones que responden al evento devuelven cdigo en javascript. Vemos tambin que hay dos parmetros en la funcin:

63
s: es la fuente (source) que ha producido el evento. Habitualmente es el identificador del mapa, de modo que podemos usarlo para ejecutar javascript. e: son los argumentos de los que disponemos. El comn denominador de todos los argumentos es: o who: coincide con la fuente anteriormente descrita. Nos indica quin ha lanzado el eventos. o point: segn el evento lanzado, nos dar el centro del mapa o el punto en que hayamos lanzado el evento (por ejemplo un click) o center: nos dar SIEMPRE el centro del mapa en el momento se ha lanzado el evento. o map: nos da SIEMPRE el identificador javascript del mapa. Ser el que usemos si queremos aplicar algn cambio al mapa (aadir un icono, aadir un infoWindows, etc). o bounds: devuelve el GLatLngBounds (coordenadas noreste y sudoeste) del mapa en el momento se ha producido el evento. o zoom. o mapType: devuelve el tipo de mapa en que se encuentra. Algunos eventos disponen de unos argumentos especiales, que a continuacin indicaremos.
A continuacin se listan los eventos de servidor con los que podrs trabajar:

Click: es el evento por defecto, y se lanzar cuando hagamos click sobre el mapa. DragEnd: se lanza cuando acabamos de arrastrar el mapa con el ratn. DragStart: se lanza cuando estamos empezando a arrastrar el mapa con el ratn. MapTypeChanged: se lanza cuando se cambia la vista del mapa. Su argumento incluye el nuevo tipo de mapa. MarkerClick: se lanza cuando hacemos click sobre un marker/icono. MoveEnd: se lanza cuando se termine un movimiento del mapa. Recordamos que un movimiento puede producirlo el ratn al coger y arrastrar, el teclado, o el control "preBuilt" de movimiento. MoveStart: se lanza cuando se comienza un movimiento del mapa. ServerEvent: hemos de configurarlo manualmente y es capaz de recoger cualquier tipo de evento que le pidamos. Le dedicamos un apartado especial.
ZoomEnd: se lanza cuando acabamos de hacer un zoom. Su argumento incluye el viejo zoom del que venimos y el nuevo zoom al que hemos ido.
Haciendo uso de la propiedad "ajaxUpdateProgressMessage" puede definirse el mensaje que queremos que aparezca mientras si realiza el viaje cliente-servidor-cliente.
64
Code.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnMarkerClick="GMap1_MarkerClick" OnZoomEnd="GMap1_ZoomEnd" OnMapTypeChanged="GMap1_MapTypeChanged" OnClick="GMap1_Click" OnDragEnd="GMap1_DragEnd" OnDragStart="GMap1_DragStart" OnMoveEnd="GMap1_MoveEnd" OnMoveStart="GMap1_MoveStart" /> <div id="messages1"></div> <div id="messages2"></div> Code.aspx.cs protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl)); GMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl)); } } protected string GMap1_Click(object s, GAjaxServerEventArgs e) { GMarker marker = new GMarker(e.point);
GInfoWindow window = new GInfoWindow(marker, string.Format(@" <b>GLatLngBounds</b><br /> SW = {0}<br/> NE = {1} ", e.bounds.getSouthWest().ToString(), e.bounds.getNorthEast().ToString()) , true); return window.ToString(e.map); } protected string GMap1_MarkerClick(object s, GAjaxServerEventArgs e) { return string.Format("alert('MarkerClick: {0} - {1}')", e.point.ToString(), DateTime.Now); } protected string GMap1_MoveStart(object s, GAjaxServerEventArgs e) { return "document.getElementById('messages1').innerHTML= 'MoveStart at " + e.point.ToString() + " - " + DateTime.Now.ToString() + "';"; } protected string GMap1_MoveEnd(object s, GAjaxServerEventArgs e) { return "document.getElementById('messages2').innerHTML= 'MoveEnd at " + e.point.ToString() + " - " + DateTime.Now.ToString() + "';"; } protected string GMap1_DragStart(object s, GAjaxServerEventArgs e) { GMarker marker = new GMarker(e.point); GInfoWindow window = new GInfoWindow(marker, "DragStart - " + DateTime.Now.ToString(), false); return window.ToString(e.map); } protected string GMap1_DragEnd(object s, GAjaxServerEventArgs e) { GMarker marker = new GMarker(e.point); GInfoWindow window = new GInfoWindow(marker, "DragEnd - " + DateTime.Now.ToString(), false); return window.ToString(e.map); } protected string GMap1_ZoomEnd(object s, GAjaxServerEventZoomArgs e) { return string.Format("alert('oldLevel/newLevel: {0}/{1} - {2}')", e.oldLevel, e.newLevel, DateTime.Now); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
65
} protected string GMap1_MapTypeChanged(object s, GAjaxServerEventMapArgs e) { return string.Format("alert('{0}')", e.mapType.ToString()); }
66
Eventos de Servidor 2
Si bien es cierto que los eventos de servidor predefinidos son los ms comunes, puede darse el caso que queramos hacer algo diferente. Por ejemplo manejar un evento no-predefinido, o redefinir un evento predefinido del que queremos unos datos diferentes. Para este caso tenemos el evento ServerEvent. Para hacerlo funcionar, deberemos seguir los siguientes pasos: 1.- Javascript Debemos aadir un javascript y usar la clase javascript 'serverEvent' para mandar la informacin a servidor. Como vemos en el ejemplo, un modo sencillo de crear el javascript es usando addListener. En los ejemplos vemos que usar la clase 'serverEvent' es muy sencillo, pues no hay ms que inicializarla con el nombre que queramos darle al evento (eventName) y el identificador del mapa (GMap_Id) en el caso de que haya ms de un mapa en una misma pgina e ir aadindole tantos argumentos como queramos. Finalmente hay que llamar a la funcin 'send()' y la informacin se enva a servidor. 2.- Servidor En el servidor, debemos manejar el evento ServerEvent, tal y como se hace con el resto de eventos. Ah dispondremos de GAjaxServerEventOtherArgs en la que podemos encontrar 2 propiedades (adems de las comunes "who" y "point"):
67
eventName: string que contiene el nombre del evento que nosotros mismo hemos definido. Es muy til para, como en el ejemplo, distinguir entre varios eventos diferentes eventArgs: es un array de string que contiene todos los argumentos que hemos aadido en javascript.
En el ejemplo vemos como definimos dos eventos: "Click" y "InfoWindowClose". El primero maneja el evento click del mapa; ya hemos visto que este evento era uno de los predefinidos, pero aqu hemos aadido un argumento que no tenamos antes: el tamao del mapa. En cuanto a "InfoWindowClose", maneja un evento de los no-predefinidos. Vemos pues que podemos manejar cualquier evento que produzca el mapa, los markers, o lo que sea.
68
Code.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnServerEvent="GMap1_ServerEvent" /> Code.aspx.cs protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { GMap1.addListener(new GListener(GMap1.GMap_Id, GListener.Event.click, string.Format(@" function(overlay, point) {{ if (!point) return; var ev = new serverEvent('Click', {0}); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
ev.addArg({0}.getSize().width); ev.addArg({0}.getSize().height); ev.addArg(point.lat()); ev.addArg(point.lng()); ev.send(); }} ", GMap1.GMap_Id))); GMap1.addListener(new GListener(GMap1.GMap_Id, GListener.Event.infowindowclose, string.Format(@" function() {{ var ev = new serverEvent('InfoWindowClose', {0}); ev.addArg('My Argument'); ev.send(); }} ", GMap1.GMap_Id))); } } protected string GMap1_ServerEvent(object s, GAjaxServerEventOtherArgs e) { string js = string.Empty; switch (e.eventName) { case "Click": GLatLng latlng = new GLatLng( Convert.ToDouble(e.eventArgs[2], new System.Globalization.CultureInfo("en-US", false)), Convert.ToDouble(e.eventArgs[3], new System.Globalization.CultureInfo("en-US", false))); GInfoWindow window = new GInfoWindow(latlng, string.Format("Window Size (px): ({0},{1}). Close Me.", e.eventArgs[0], e.eventArgs[1])); js = window.ToString(e.who); break; case "InfoWindowClose": js = string.Format ("alert('{0}: {1} - {2} - {3}')", e.eventName, e.point, e.eventArgs[0], DateTime.Now); break; } return js; }
69
ASP.NET Postback
Alternativamente a los serverEvents nativos del control GMaps, podemos forzar a que estos ejecuten un PostBack ASP.NET tradicional. Para ello no hay ms que indicarlo con serverEventsType="AspNetPostBack" (Como siempre, enableServerEvents debe estar activado). Una de las diferencias ms importantes es que con los serverEvent nativos slo puede interactuar con el mapa devolviendo un string con Javascript. Usando el PostBack podemos devolver ese Javascript, pero adems podemos interactuar directamente con el mapa (ver ejemplo). Tambin podemos acceder a variables de sesin, Viewstate, etc. Adems, funciona muy bien usndolo dentro de un UpdatePanel. Sin embargo, los serverEvent nativos son muchsimo ms rpidos y eficientes, con lo que se recomienda el uso de estos siempre que sea posible.
70
Code.aspx <cc1:GMap ID="GMap1" runat="server" serverEventsType="AspNetPostBack" enableServerEvents="true" OnClick="GMap1_Click" OnMarkerClick="GMap2_MarkerClick" /> Code.aspx.cs protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { this.setupMap(); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
} if (GMap2.IsAjaxPostBack) { // GMaps Ajax PostBack } } private void setupMap() { GLatLng latLng = new GLatLng(40,10); GMap2.GCenter = latLng; GMarker marker = new GMarker(latLng); GMap2.Add(marker); } protected string GMap2_Click(object s, GAjaxServerEventArgs e) { GMap2.GZoom = 1; GInfoWindow window = new GInfoWindow(e.point, "Clicked"); GMap2.Add(window); return string.Empty; } protected string GMap2_MarkerClick(object s, GAjaxServerEventArgs e) { GLatLng latLng = new GLatLng(40, 10); GMap2.GCenter = latLng; GMap2.resetInfoWindows(); GMap2.GZoom = 6; return string.Empty; }
71
Custom Javascript
Utilizaremos el "CustomJavascript" para aadir nuestro propio javascript. El CustomJavascript sirve para manejar eventos y modificar el mapa tras los eventos. Es decir, con el CustomJavascript aadiremos el javascript que se ejecutar como respuesta (por ejemplo) al click de un botn. Esto es, el javascript aadido nunca se ejecutar al cargarse el mapa: para eso tenemos el CustomInsideJavascript
72
Para ello deberemos conocer el javascript que propone la API de Google o utilizar el mtodo "ToString()" de elementos de nuestro control, como por ejemplo el del GMarker. Lo veremos mejor en el ejemplo. En ste podemos aadir iconos al centro del mapa, borrar el ltimo icono aadido o borrar todos los iconos que haya.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> <input type="button" id="Button1" value="Aadir icono" onclick="subgurim_Add()" /> <input type="button" id="Button2" value="Borrar ltimo icono" onclick="subgurim_Delete()" /> <input type="button" id="Button3" value="Borrar todos los iconos" onclick="subgurim_Remove()" /> Code.aspx.cs System.Text.StringBuilder sb = new System.Text.StringBuilder(); GLatLng center = new GLatLng(44, 5); GMap1.setCenter(center); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
sb.Append("var active;"); sb.Append("function subgurim_Add()"); sb.Append("{"); GMarker marker = new GMarker(GMap1.GMap_Id + ".getCenter()"); sb.Append(marker.ToString(GMap1.GMap_Id)); sb.AppendFormat("active = {0};", marker.ID); sb.Append("}"); sb.Append("function subgurim_Delete()"); sb.Append("{"); sb.AppendFormat("{0}.removeOverlay(active);", GMap1.GMap_Id); sb.Append("active = false;"); sb.Append("}"); sb.Append("function subgurim_Remove()"); sb.Append("{"); sb.AppendFormat("{0}.clearOverlays();", GMap1.GMap_Id); sb.Append("active = false;"); sb.Append("}"); GMap1.Add(sb.ToString());
73
Custom Inside Javascript

Utilizaremos el "CustomInsideJavascript" para aadir nuestro propio javascript. El CustomInsideJavascript sirve para aadir javascript que se ejecutar en la carga del mapa. Es decir, el CustomInsideJavascript aadido no podr ser accedido por eventos como, por ejemplo, el click de un botn. Para eso tenemos el CustomJavascript
74
Para ello deberemos conocer el javascript que propone la API de Google o utilizar el mtodo "ToString()" de elementos de nuestro control, como por ejemplo el del GMarker. Nuestro ejemplo es muy sencillo, y nos permitimos combinar el CustomInsideJavascript con el CustomJavascript. Mediante el CustomJavascript creamos una funcin que aadir iconos en ubicaciones aleatorios, pero como ste no puede iniciar el evento, utilizamos el CustomInsideJavascript para llamar por primera (y nica) vez al cdigo. Como os podis imaginar, la metodologa seguida en el ejemplo supone el uso tpico del CustomInsideJavascript: llamar a una funcin CustomJavascript en el momento se carga el mapa.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> <input type="button" id="Button1" value="Aadir icono" onclick="subgurim_Add()" /> <input type="button" id="Button2" value="Borrar ltimo icono" onclick="subgurim_Delete()" /> <input type="button" id="Button3" value="Borrar todos los iconos" onclick="subgurim_Remove()" />
Code.aspx.cs System.Text.StringBuilder sb = new System.Text.StringBuilder(); GLatLng center = new GLatLng(44, 5); GMap1.setCenter(center, 8); //GMap1.Add("addRandom();", true); GMap1.addCustomInsideJavascript("addRandom();"); sb.Append("var max = 10;"); sb.Append("function addRandom()"); sb.Append("{"); GMarker marker = new GMarker( string.Format("new GLatLng({0}.getCenter().lat() + Math.random() - 0.5, {0}.getCenter().lng() + Math.random() - 0.5)", GMap1.GMap_Id)); sb.Append(marker.ToString(GMap1.GMap_Id)); sb.Append("if (max-- > 0)"); sb.Append("setTimeout('addRandom()', 1000)"); sb.Append("}"); GMap1.Add(sb.ToString());
75
ToString
Como habis visto en varios ejemplos, en ocasiones se usa el mtodo ToString de varios componentes del GoogleMaps.Subgurim.NET (GMarker, GInfoWindow, GLatLng, etc.). De hecho, en el propio cdigo fuente del control, se usa continuamente. En lneas generales, lo que conseguimos con el mtodo ToString de cada elemento es escribir el equivalente javascript marcado por la API oficial de Google.
76
Como a la hora de utilizar funcionalidades del GoogleMaps.Subgurim.NET como los "eventos de cliente", "eventos de servidor" o "custom javascript" suele ser necesario el uso del javascript correcto, el mtodo ToString de cada elemento evitar tener que aprender el javascript de la API de Google, minimizando a su vez la necesidad de javascript. Adems, y esto es muy importante, evita tener que averigurar el identificador javascript de cada elemento. Por ejemplo, si quisiramos recrear el infoWindow con icono del ejemplo "InfoWindow con icono", tenemos dos opciones: Usando javascript var marker_subgurim_Id = new GMarker(new GLatLng(10.2,22)); my_GMap1subgurim_Id.addOverlay(marker_subgurim_Id); GEvent.addListener(marker_subgurim_Id, "mouseover", function() {marker_subgurim_Id.openInfoWindowHtml('Ejemplo de <b>infoWindow</b>');}); my_GMap1subgurim_Id.openInfoWindowHtml('Ejemplo de <b>infoWindow</b>'); Usando el mtodo ToString GInfoWindow window = new GInfoWindow( new GMarker(new GLatLng(10.2, 22)), "Ejemplo de <b>infoWindow</b>", true, GListener.Event.mouseover); string resultado = window.ToString(GMap1.GMap_Id); Como vemos, nos ahorramos aprender el javascript correspondiente, hacemos uso de IntelliSense (por lo que escribir cdigo es muy rpido) y evitamos tener que ir averiguando los identificadores javascript de los objetos... Absolutamente todos los elementos que se puedan encontrar en el GoogleMaps.Subgurim.NET disponen del mtodo ToString, y su funcionalidad es siempre la misma: traducir a javascript lo que significan. Por ltimo, es extremadamente importante resear que a los mtodos ToString hay que pasarles como parmetro el identificador de la fuente a la que se asignan. Como habitualmente se trata del propio mapa de Google, suele ser GMap1.GMap_Id.
GMap.ToString
Con el mtodo ToString de la clase GMap se puede recoger el javascript que va a producir nuestro mapa. Gracias a esto, facilitamos cosas como el javascript que vamos a devolver en un server event. Basta con inicializar la clase GMap con el GMap_Id, y luego podemos aadirle todo lo que queramos: controles, markers, infowindows, etc. El ejemplo es totalmente clarificador (clickar sobre el mapa):
77
Code.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="True" OnClick="GMap1_Click" /> Code.aspx.cs protected string GMap1_Click(object s, Subgurim.Controles.GAjaxServerEventArgs e) { GMap gmap = new GMap(e.map); // GMarker and GInfoWindow GMarker marker = new GMarker(e.point); GInfoWindow window = new GInfoWindow(marker, "Cool!!", true); gmap.Add(window); // Movement //gmap.addMovement(1000, e.point + new GLatLng(25, 38)); //gmap.addMovement(1000, e.point); // Polylines if (e.point != e.center) { GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
List points = new List(); points.Add(e.center); points.Add(e.point); gmap.addPolyline(new GPolyline(points, Color.Yellow)); } // Controls gmap.addControl(new GControl(GControl.extraBuilt.MarkCenter)); gmap.addControl(new GControl(GControl.preBuilt.LargeMapControl)); gmap.addControl(new GControl(GControl.preBuilt.MapTypeControl)); // Maybe... anything? ;) gmap.enableScrollWheelZoom = false; gmap.mapType = GMapType.GTypes.Satellite; return gmap.ToString(); }
78
getGMapElementById
getGMapElementById... mmm, suena bien, no? Adems, funciona tal y como suena: recoge el identificador javascript de las elementos que se han aadido al mapa (normalmente markers), de modo que el lmite de su uso lo pone vuestra imaginacin ;) Puede accederse tanto mediante un mtodo esttico de la clase GMap, como mediante un mtodo de vuestra instancia del control. Como siempre, este sencillo ejemplo es esclarecedor (clickar sobre el mapa y sobre el icono):
79
Code.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="True" OnClick="GMap1_Click" OnMarkerClick="GMap1_MarkerClick" /> Code.aspx.cs protected string GMap1_Click(object s, GAjaxServerEventArgs e) { return new GMarker(e.point).ToString(e.map); } protected string GMap1_MarkerClick(object s, GAjaxServerEventArgs e) { string markerID = GMap1.getGMapElementById(e.who); string js = string.Format(@" if ({0}.isHidden()) {0}.show() else GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
{0}.hide(); ", markerID); js += string.Format("alert('point: ' + {0}.getPoint() + ' - icon: ' + {0}.getIcon().image);", markerID); return js; }
80
Store
Para trabajar con la clase Store es imprescindible activar la propiedad "enableStore". Store es una funcionalidad muy potente que nos permitir compartir informacin entre cliente, servidor y los serverEvents. Funciona como un Dictionary<string, string>, con una "key" y un "value". En el ejemplo vemos cmo se utiliza el store en javascript (un evento de cliente), en un serverEvent y en ASP.NET:
81
Javascript: Creamos el objeto Store de un modo similar a ste: var store = new Store('{0}_Store'); A la varible store le podemos hacer un "Set(key, value)" y un "Get(Key)". Suele usarse en los eventos de cliente. serverEvents: cuando estamos en un serverEvent, podemos utilizar el GAjaxServerEventArgs llamando a e.store. e.store es un Dictionary<string, string> normal de ASP.NET . ASP.NET: cada instancia de GMaps tiene una propiedad Store, que podemos utilizar siempre que queramos en lado de servidor (aunque en el serverEvent sea aconsejable usar e.store).
82
Code.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" enableStore="true" OnClick="GMap1_Click" serverEventsType="AspNetPostBack" /> <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" enableStore="true" OnClick="GMap1_Click" /> Code.aspx.cs private static int _i = 0; public static int i { get { return _i++; } } protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { GMap2.addListener(new GListener(GMap2.GMap_Id, GListener.Event.zoomend, string.Format(@" function(oldZoom, newZoom) {{ var store = new Store('{0}_Store'); store.Set(Math.random(), oldZoom + '-' + newZoom); }} ", GMap2.GMap_Id))); GMap2.addControl(new GControl(GControl.preBuilt.SmallZoomControl)); } GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
GMap1.Store.Add(i.ToString(), DateTime.Now.ToString()); } protected string GMap1_Click(object s, GAjaxServerEventArgs e) { e.store[i.ToString()] = DateTime.Now.ToString(); Store c = GMap1.Store; return string.Format("alert('{0} Store items: {1}')", e.map, e.store.Count); }
83
GeoCoding
Qu es el GeoCoding? Con el GeoCoding buscaremos un sitio (por ejemplo "Las Ventas, Madrid", "Gibraltar" o "Universidad Politcnica de Valencia") y GoogleMaps.Subgurim.NET nos devolver el evento que hayamos seleccionado en la ubicacin que nos d como resultado... como siempre, un ejemplo vale ms que mil palabras! Para hacer uso del GeoCoding, usaremos la clase con ese mismo nombre: GeoCoding. La clase GeoCoding tiene 5 propiedades con los que podemos personalizar el resultado:
84
Show: un enumerador con el que elegir el evento que se producir cuando se encuentre la ubicacin que buscamos. Se compone de tres elementos: o infowindow: muestra un infoWindow con la direccin completa como texto. Es la elegida por defecto. o icon: simplemente muestra un icono en la ubicacin buscada. o mapBlowUp: muestra un mapBlowUp, que como sabis es una ventana emergente mostrando el lugar buscado con zoom. openedOnLoad: es aplicable si elegimos mostrar un infoWindow o un mapBlowUp. Indica si cuando se muestra el sitio, estarn abiertos por defecto o deberemos presionar un icono para el caso. Por defecto es true. errorText: es el mensaje que aparecer en una ventana de alerta si no se encuentra lo que se busca.. Por defecto vale ":(". infoText: el texto previo al cuadro de texto. Se puede incluir HTML. Por defecto es "GeoCode". buttonText: el texto del botn. Por defecto "OK". viewport: usando GLatLngBounds marca la zona de referencia sobre la que se quiere obtener el resultado. baseCountryCode: indicando el cdigo del pas obtendremos el resultado en base a su cercana con ste. showErrorCode: en caso de ocurrir un error, muestra su cdigo. Encontraremos el significado de los cdigos de error en http://code.google.com/apis/maps/documentation/reference.html#GGeoStatusCode
85
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs /* Con esto bastara para que funcionara!!! GMap1.addGeoCode(new GeoCoding()); */ GMap1.GZoom = 9; GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl)); GeoCoding geoCoding = new GeoCoding(); geoCoding.show = GeoCoding.ShowEnum.infowindow; geoCoding.openedOnLoad = true; geoCoding.errorText = "No t"; geoCoding.buttonText = "Buscar"; geoCoding.infoText = "Buscar GeoCode"; GMap1.addGeoCode(geoCoding);
GeoCoding 2
Un modo extremadamente sencillo de ofrecer geocoding es simplemente usando la "GoogleBar" que GoogleMaps ofrece. Una vez activado, no hay ms que hacer clic sobre la lupa situada al lado del icono de Google que aparece en el mapa. Tan solo hay que aadir la GGoogleBarOptions al mapa y usar las propiedades que se requieran:
86
showOnLoad: Indica si se despliega el cuadro de text de bsqueda. Por defecto est desactivado. linkTarget: Indica el "Target" de los enlaces mostrados al hacer la bsqueda. Por defecto el target es "_Blank". resultList: Indica cmo se muestran los resultados de la bsqueda. G_GOOGLE_BAR_RESULT_LIST_INLINE (por defecto) las muestra en una tabla y G_GOOGLE_BAR_RESULT_LIST_SUPPRESS muestra slo una con los botones de "anterior - siguiente". suppressInitialResultSelection: Si est activado (y lo est por defecto) no muestra el primer resultado en el mapa. suppressZoomToBounds: desactiva el comportamiento por defecto de acercarse a los resultados. onIdleCallback: Define una funcin que se ejecutar cuando la bsqueda no devuelve resultados. onSearchCompleteCallback: Define una funcin que se ejecutar cuando la bsqueda devuelve resultados. Se ejecuta antes de mostrar los resultados en pantalla. onGenerateMarkerHtmlCallback: Funcin que se ejecuta cuando se va a abrir el infowindow con los resultados. Los atributos que debe tener la funcin (por orden) son: un GMarker, el string HTML generado, y un GlocalSearchResult, y debe devolver un string HTML que se mostrar en el info window. onMarkersSetCallback: funcin que ser llamada cuando se termine la creacin de los markers en el mapa. La funcin tendrs los atributos de la siguiente forma: {result: GlocalSearch, marker: GMarker}.
87
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GGoogleBarOptions googleBarOptions = new GGoogleBarOptions(); googleBarOptions.showOnLoad = true; googleBarOptions.resultList = GGoogleBarResultListEnum.supress; googleBarOptions.linkTarget = GGoogleBarLinkTargetEnum._blank; googleBarOptions.onSearchCompleteCallback = "alert('onSearchCompleteCallback');"; googleBarOptions.onMarkersSetCallback = "alert('onMarkersSetCallback');"; GMap1.Add(googleBarOptions);
GeoCoding Avanzado
Para recoger informacin detallada del sitio que estamos buscando, necesitaremos el Geocoding avanzado. Usarlo es muy sencillo. Bsicamente consiste en pasarle un lugar como parmetro y recoger toda la informacin que la API de Google nos provee. Hay dos modos de ejecutar esta accin:
88
Si tenemos un GMap instanciado en nuestra pgina, no hay ms que llamar a GMap1.getGeoCodeRequest(...) [geoCodeRequestes obsoleto desde la versin 3]. Pero tambin podemos acceder a un mtodo esttico, que no requiere que el GMap est en la pgina. Lo nico que hay que tener en cuenta es que deberemos pasarle como parmetro nuestro Key de la API de Google. La llamaramos as: GMap.geoCodeRequest(...).
El mtodo esttico devuelve dos tipos de datos. Por una parte est el Geocode (clase estructurada de manera idntica al XML que Google nos provee) y por otra un string del que podemos elegir su modo (xml, kml, json y csv). Estos son los parmetros que podemos pasarle a las funciones:

Query: lo que estamos buscando. GoogleKey: slo necesario en caso de usar los mtodos estticos. GeoCode.outputEnum output: donde indicaremos el tipo de datos que queremos que nos devuelva (xml, kml, json y csv). Si no lo definimos nos devolver el tipo Geocode. baseCountryCode: indicando el cdigo del pas obtendremos el resultado en base a su cercana con ste. viewport: usando GLatLngBounds marca la zona de referencia sobre la que se quiere obtener el resultado.
Accediendo al campo status.code accederemos al mensaje de estado de la bsqueda, por ejemplo para saber qu error ha ocurrido. La definicin de los mensajes de estado las encontramos aqu: http://code.google.com/apis/maps/documentation/reference.html#GGeoStatusCode La clase Geocode la hemos estructurado de manera idntica al XML que nos provee Google. Veamos un ejemplo de un XML de Google si buscramos "1600 amphitheatre mtn view ca". Podemos compararla con el ejemplo de cdigo que proveemos y veremos que las clases y sus propiedades son anlogas al XML: <kml> <Response> <name>1600 amphitheatre mtn view ca</name> <Status> <code>200</code> <request>geocode</request> </Status> GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
<Placemark> <address> 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA </address> <AddressDetails Accuracy="8"> <Country> <CountryNameCode>US</CountryNameCode> <AdministrativeArea> <AdministrativeAreaName>CA</AdministrativeAreaName> <SubAdministrativeArea> <SubAdministrativeAreaName>Santa Clara</SubAdministrativeAreaName> <Locality> <LocalityName>Mountain View</LocalityName> <Thoroughfare> <ThoroughfareName>1600 Amphitheatre Pkwy</ThoroughfareName> </Thoroughfare> <PostalCode> <PostalCodeNumber>94043</PostalCodeNumber> </PostalCode> </Locality> </SubAdministrativeArea> </AdministrativeArea> </Country> </AddressDetails> <Point> <coordinates>-122.083739,37.423021,0</coordinates> </Point> </Placemark> </Response> </kml>
89
geocode.name: San Pedro del Pinatar geocode.Status.code: 200 geocode.Status.request: geocode geocode.Placemark.address: San Pedro del Pinatar, Spain geocode.Placemark.AddressDetails.accuracy: 4 geocode.Placemark.AddressDetails.Country.CountryNameCode: ES geocode.Placemark.AddressDetails.Country.AdministrativeArea.AdministrativeAreaNa me: Murcia geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea .SubAdministrativeAreaName: Murcia geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea .Locality.LocalityName: San Pedro del Pinatar geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea .Locality.PostalCode.PostalCodeNumber:
geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea .Locality.Thoroughfare.ThoroughfareName: geocode.Placemark.coordinates: 37.8350404,-0.7915859
Code.aspx <asp:Literal ID="Literal1" runat="server">Buscar una direccin</asp:Literal> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Buscar" OnClick="bt_Buscar_Click" />
90
<div> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> </div> Code.aspx.cs protected void bt_Buscar_Click(object sender, EventArgs e) { if (!string.IsNullOrEmpty(tb_Buscar.Text)) { string Key = System.Configuration.ConfigurationManager.AppSettings.Get("googlemaps.subgurim.net"); GeoCode geocode = GMap.geoCodeRequest(tb_Buscar.Text, Key); System.Text.StringBuilder sb = new System.Text.StringBuilder(); if ((null != geocode) && geocode.valid) { sb.Append("<ul>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.name"); sb.Append("</i>: "); sb.Append(geocode.name); sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Status.code"); sb.Append("</i>: "); sb.Append(geocode.Status.code); sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Status.request"); sb.Append("</i>: "); sb.Append(geocode.Status.request); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.address"); sb.Append("</i>: "); sb.Append(geocode.Placemark.address); sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.AddressDetails.accuracy"); sb.Append("</i>: "); sb.Append(geocode.Placemark.AddressDetails.accuracy); sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.AddressDetails.Country.CountryNameCode"); sb.Append("</i>: "); sb.Append(geocode.Placemark.AddressDetails.Country.CountryNameCode); sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.AddressDetails.Country.AdministrativeArea.AdministrativeAre aName"); sb.Append("</i>: "); sb.Append(geocode.Placemark.AddressDetails.Country.AdministrativeArea.AdministrativeArea Name); sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrative Area.SubAdministrativeAreaName"); sb.Append("</i>: "); sb.Append(geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrative Area.SubAdministrativeAreaName); sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrative Area.Locality.LocalityName"); sb.Append("</i>: "); sb.Append(geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrative Area.Locality.LocalityName); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
91
sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrative Area.Locality.PostalCode.PostalCodeNumber"); sb.Append("</i>: "); sb.Append(geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrative Area.Locality.PostalCode.PostalCodeNumber); sb.Append("</li>");
92
sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrative Area.Locality.Thoroughfare.ThoroughfareName"); sb.Append("</i>: "); sb.Append(geocode.Placemark.AddressDetails.Country.AdministrativeArea.SubAdministrative Area.Locality.Thoroughfare.ThoroughfareName); sb.Append("</li>"); sb.Append("<li>"); sb.Append("<i>"); sb.Append("geocode.Placemark.coordinates"); sb.Append("</i>: "); sb.Append(geocode.Placemark.coordinates.ToString()); sb.Append("</li>"); sb.Append("</ul>"); } else sb.Append("Ubicacin no encontrada"); lb_Buscar.Text = sb.ToString(); } }
Geocoding Inverso
NOTA: En el geocoding inverso se utilizan las servicios Web de geonames.org, bajo licencia Creative Commons. Recomendamos altamente esta pgina, pues dispone de varios servicios Web relacionados con la geolocalizacin. Hasta ahora hemos visto cmo obtener informacin de un lugar a partir su nombre... pero, y si queremos obtener informacin de un lugar slo a partir de sus coordenadas geogrficas? Para ello tenemos el GeoCoding inverso, y usarlo es muy sencillo. No hay ms que instanciar la clase inverseGeocodingManager, que consta de 4 parmetros:

93
point: el punto sobre el que queremos informacin. radius: radio en kilmetros sobre el que buscar lugares cercanos. N: cantidad mximo de lugares cercanos que queremos como respuesta. language: idioma en que queremos la respuesta.
Y tras hacerlo llamaremos a inverseGeoCodeRequest, que nos devolver un listado genrico de instancias de la clase inverseGeocoding, ordenadas de ms a menos cercano al punto que hemos sealado. La clase inverseGeocoding consta de las siguientes propiedades de inters:

name: nombre del lugar ms cercano al punto indicado. countryCode: cdigo ISO del pas del punto indicado. countryName: nombre del pas del punto indicado. initialPoint: el punto que hemos indicado. nearestPlacePoint: coordenadas del lugar habitado ms cercano al punto que hemos indicado. initialPointElevation: altura sobre el nivel del mar (en metros) del punto indicado. nearestPlaceElevation: altura sobre el nivel del mar (en metros) del lugar habitado ms cercano al punto que hemos indicado. distance: distancia en Kilmetros entre el punto indicado y el lugar habitado ms cercano.
El ejemplo mostrado a continuacin es un ejemplo tpico del uso del geoCoding inverso. Al hacer click sobre un punto del mapa, se ejecuta un evento de servidor. Manejando ste, recogemos la informacin que nos da el geoCoding inverso y la mostramos en un infoWindow. Adicionalmente, habilitamos la funcin "goTo" aadiendo un CustomJavascript que nos har viajar al lugar ms cercano, y adems hacemos el "truco" de lanzar una infowindow mientras se viaja y se vuelve del servidor, haciendo parecer que estamos esperando la respuesta.
94
Code.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnClick="GMap1_Click" /> Code.aspx.cs protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { this.arreglarMapa(); } } private void arreglarMapa() { GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl)); GMap1.enableHookMouseWheelToZoom = true; StringBuilder sb = new StringBuilder(); sb.Append("function(marker, point) {"); GLatLng latlng = new GLatLng("point"); GInfoWindow window = new GInfoWindow(latlng, "<div style=\"height:140px;\"><blink>Loading...</blink></div>"); sb.Append(window.ToString(GMap1.GMap_Id)); sb.Append("}"); GMap1.addListener(new GListener(GMap1.GMap_Id, GListener.Event.click, sb.ToString())); StringBuilder sb2 = new StringBuilder(); sb2.Append("function goTo(point){"); GLatLng point = new GLatLng("point"); sb2.AppendFormat("{0}.setZoom(11);", GMap1.GMap_Id); GMove move = new GMove(1, point); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
sb2.Append(move.ToString(GMap1.GMap_Id)); GMarker marker = new GMarker(point); sb2.Append(marker.ToString(GMap1.GMap_Id)); sb2.Append("}"); GMap1.addCustomJavascript(sb2.ToString()); } protected string GMap1_Click(object s, GAjaxServerEventArgs e) { inverseGeocodingManager igeoManager = new inverseGeocodingManager(e.point, "es"); inverseGeocoding iGeos = igeoManager.inverseGeoCodeRequest(); geoName geo; if (iGeos.geonames.Count > 0) { geo = iGeos.geonames[0]; StringBuilder sb = new StringBuilder(); sb.Append("<div align=\"left\">"); sb.Append(""<b>Nearest Place "</b>"); sb.Append("<br />"); sb.AppendFormat("Place name: "<i>{0}"</i> ", geo.name); sb.Append("<br />"); sb.AppendFormat("Point: "<i>{0}"</i>", geo.nearestPlacePoint.ToString()); sb.Append("<br />"); sb.AppendFormat("Elevation: "<i>{0}"</i>", geo.nearestPlaceElevation > -9000 ? geo.nearestPlaceElevation.ToString() : "No info"); sb.Append("<br />"); sb.AppendFormat("Country Name (Code): "<i>{0} ({1})"</i>", geo.countryName, geo.countryCode); sb.Append("<br />"); sb.AppendFormat("Click point - Nearest Place distance (Km): "<i>{0}"</i>", Math.Round(geo.distance, 3)); sb.Append("</div>"); sb.Append("<br />"); sb.Append("<div align=\"left\">"); sb.Append(""<b>Click point"</b>"); sb.Append("<br />"); sb.AppendFormat("Point: "<i>{0}"</i>", geo.initialPoint.ToString()); sb.Append("<br />"); sb.AppendFormat("Elevation: "<i>{0}"</i>", geo.initialPointElevation > -9000 ? geo.initialPointElevation.ToString() : "No info"); sb.Append("<br />"); sb.Append("</div>"); GInfoWindow window = new GInfoWindow(e.point, sb.ToString(), true); return window.ToString(e.map); } else return string.Empty; } GoogleMaps.Subgurim.NET Versin: 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 ms que usar la clase GGeoXml que contiene una nica propiedad (url) y aadir una instancia de sta al GMap. Esa propiedad "url" ser la direccin en que se encuentra el fichero KLM o GeoRSS.
96
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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"));
GTrafficOverlay
De momento slo sirve en Estados Unidos, pero slo con activar enableGTrafficOverlay se puede acceder a la informacin de trfico.
97
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.setCenter(new GLatLng(42,-95), 3); GMap1.enableGTrafficOverlay = true;
GDirections Basic
Observa lo sencillo que es aadir soporte de GDirection en el mapa: slo se necesita una simple lnea de cdigo! Pero obviamente se puede mejorar haciendo uso de otras propiedades del GDirection. En este ejemplo estudiaremos las propiedades ms sencillas y en el siguiente las ms avanzadas:
98
autoGenerate: aade automticamente la funcionalidad de GDirections, insertando textos, cuadros de texto y el botn. 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 botn 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 <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GDirection gdirection = new GDirection(true); gdirection.errorMessage = "Ups"; GMap1.addGDirection(gdirection);
GDirections Avanzado
Si no queremos autogenerar el soporte para GDirection, de modo que queramos disear una interfaz ms personal, no tenemos ms que poner a false la propiedad "autoGenerate". Pero GMaps sigue haciendo casi todo nuestro trabajo. No tenemos ms que aadir al mapa los cuadros de texto de salida y de llegada, el botn y un "div" donde ir la descripcin de nuestro viaje. Adems, 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:

99
buttonElementId: el ID del botn. Debe ser un "<input type=button />" NO un "<asp:Button />". 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 descripcin del viaje. locale: string que define la cultura. Por ejemplo "es-ES", "en-GB", "fr-CA", etc. travelMode: el modo de viaje, como conduccin (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 direccin el mapa se centra en el resultado. Si activamos esta opcin, el mapa no se mueve de donde estemos (a no ser que nunca hayamos definido una localizacin inicial).
100
Code.aspx Start Location: <asp:TextBox ID="tb_fromPoint" runat="server"></asp:TextBox> End Location: <asp:TextBox ID="tb_endPoint" runat="server"></asp:TextBox> <input type="button" id="bt_Go" value="Come on!" /> <cc1:GMap ID="GMap1" runat="server" /> <div id="div1"></div> 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); } }
GeoIP
Gracias a MaxMind disponemos de la Geolocalizacin por IP: a partir de una IP conseguiremos datos sobre su localizacin, entre otros la latitud y la longitud. Para ello slo hay que usar el cdigo del ejemplo y descargarse la base de datos de MaxMind (descargar directa).
101
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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(@" <div style=""text-align:left""> <b>GEOIP PROPERTIES</b> <br /> <b>Area Code</b>: {0} <br /> <b>City</b>: {1} <br /> GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008
102
<b>Country Code</b>: {2} <br /> <b>Country Name</b>: {3} <br /> <b>DMA Code</b>: {4} <br /> <b>Postal Code</b>: {5} <br /> <b>Region</b>: {6} </div> ", location.area_code, location.city, location.countryCode, location.countryName, location.dma_code, location.postalCode, location.region); GMap1.Add(new GInfoWindow(new GMarker(latlng), infoWindowHTML)); }
DragZoomControl
El DragZoomControl forma parte del GMaps Utility Library. Usando el DragZoomControl podremos recuadrar una zona especfica del mapa sobre la que se har un zoom.
103
104
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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);
LabeledMarker
El LabeledMarker forma parte del GMaps Utility Library. El LabeledMarker nos permite aadir letras a los iconos de Google Maps.
105
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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 Versin: 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 <cc1:GMap ID="GMap1" runat="server" /> 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));
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 <cc1:GMap ID="GMap1" runat="server" /> 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 Versin: 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); 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);
108
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 ubicacin. Su uso es muy sencillo, pues no hay ms que llamar al mtodo "AddMarkerTracker(...)" del marker en cuestin.
109
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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);
Add Genrico
Para aadir cualquier elemento al GMap, hasta el momento tenamos una funcin especfica que se encargaba de ello. Por ejemplo, para aadir un control llambamos a addControl(...), para aadir llambamos a addMovement(...), y as con prcticamente la totalidad de elementos posibles. An manteniendo la compatibilidad con versiones previas a la v1.4, ahora tenemos otro modo de aadir cualquier tipo de elemento, sin ms que llamar a Add(...), siendo el parmetro que le demos a la funcin lo nico importante. Simplemente veamos el ejemplo.
110
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> 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 Versin: 3.2.0.1 04/12/2008
GMap1.Add(new GMove(2000, ll1)); GMap1.Add(new GeoCoding());
111
Movimiento y Animacin
Para trabajar con movimiento y animaciones, utilizaremos la clase GMove. De GMove se definen 4 propiedades:

112
deltaMiliseconds: cantidad de milisegundos que se dejarn entre la anterior animacin (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 ignorarn los valores dados a deltaX y deltaY. Una vez definido el movimiento, se aadir al mapa mediante el mtodo addMovement, tal y como se muestra en el ejemplo. Un mapa puede tener tantos movimientos como queramos y se llevarn a cabo segn el orden en el que los hayamos aadido al mapa. NOTA: Cuando el inicio y el final de un movimiento estn lo suficientemente cercanos, en lugar de dar el salto de golpe, el mapa se deslizar.
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMove move = new GMove(500, 1, -1); GMap1.addMovement(move); GoogleMaps.Subgurim.NET Versin: 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));
113
GLatLngBounds
El GLatLngBounds representa un rectngulo dentro del mapa, marcado por los extremos suroeste (sw) y noreste (ne). GLatLngBounds dispone de varios mtodos que pueden llegar a ser extremadamente tiles para realizar algunas operaciones con nuestros mapas:
114
equals(GLatLngBounds): nos dice si el GLatLngBounds pasado como parmetro es igual al del rectngulo. contains(GLatLng): nos dice si el GLatLng pasado como parmetro est dentro del actual rectngulo. intersects(GLatLngBounds): nos dice si el rectngulo pasado como parmetro intersecta al rectngulo. containsBounds(GLatLngBounds): nos dice si el rectngulo pasado como parmetro contiene al rectngulo. extend(GLatLng): amplia el rectngulo 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 rectngulo. isFullLat: nos dice si el rectngulo se extiende desde el polo sur hasta el polo norte. isFullLng: nos dice si el rectngulo se extiende a lo largo de toda la longutid terrestre. isEmpty: nos dice si el rectngulo est vaco. getCenter: devuelve la coordenada central del rectngulo.
Adems con el mtodo esttico GMap1.getBoundsZoomLevel(latlngbounds) se obtiene el mayor zoom para el cual se visualiza toda el rea definida por el latlngbounds.
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 Versin: 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 genrico 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 ningn 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 ningn 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 vaco, no se abrir ningn 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 mostrarn 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 Versin: 3.2.0.1 04/12/2008
Como siempre, el ejemplo nos aclarar ms ideas que la explicacin.
117
Code.aspx <cc1:GMap ID="GMap1" runat="server" DataSourceID="SqlDataSource1" DataSourceType="PolylinesAndMarkers" DataLatField="Lat" DataLngField="Lng" DataGInfoWindowTextField="InfoWindowText" DataGIconImageField="IconImage" DataGIconShadowField="IconShadow" DataGIconAnchorField="IconAnchor" DataGIconSizeField="IconSize" DataGIconShadowSizeField="IconShadowSize" DataGInfoWindowAnchorField="InfoWindowAnchor" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MapTest %>" SelectCommand="SELECT Lat, Lng, InfoWindowText, IconImage, IconShadow, IconAnchor, IconSize, IconShadowSize, InfoWindowAnchor FROM [MapTestTable]"></asp:SqlDataSource>
Soporte PostBack
El googlemaps.subgurim.net soporta el PostBack a tres niveles:

Centro del mapa: el centro del mapa se mantiene segn su ltima posicin 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 <cc1:GMap ID="GMap1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Click Me" /> 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)));
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 parmetros como "minZoomLevel" (nivel mnimo a partir del cual saldrn anuncios), "maxAdsOnMap" (nmero mximo de anuncios en el mapa) y el "channel" (cdigo de seguimiento Adsense)
119
Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GAdsManagerOptions options = new GAdsManagerOptions(1, 30); GMap1.addAdsManager(new GAdsManager("YourPublisherID", GAdsManager.HelpSubgurimEnum.FullHelp, options));
Nota y Agradecimiento
Este documento ha sido extrado de la web oficial de Googlemaps.subgurim.net, por Sely. Para agradecer a Subgurim & cia. todo el trabajo realizado para facilitarnos al resto la programacin.
120
Saludos. Sely. sely12@gmail.com

API Google Maps

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

API Google Maps

Transféré par

Droits d'auteur :

Formats disponibles

Versin. 3.2.0.

Cmo empezar a utilizar GoogleMaps.Subgurim.NET

Clave de Google o Key

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.GZoom = 3;

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.enableGKeyboardHandler = true;

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Custom Mouse Cursors

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GTileLayerOptions tileLayerOptions = new GTileLayerOptions(); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Rectangle: define un rectngulo en la parte central del mapa.

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GMap1.Add(new GCustomOverlay(GCustomOverlay.Overlay.Rectangle));

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Hierarchical Map Type Control

Como siempre, lo mejor es un ejemplo:

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

InfoWindow con Icono

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

InfoWindow con Pestaas

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Las GMarkerOptions definen estas propiedades:

Code.aspx <cc1:GMap ID="GMap1" runat="server" />

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Code.aspx <cc1:GEarthMap ID="GEarthMap1" runat="server" Height="400" />

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Code.aspx <cc1:GMarsMap ID="GMarsMap1" runat="server" /> Code.aspx.cs GMarsMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Code.aspx <cc1:GMoonMap ID="GMoonMap1" runat="server" /> Code.aspx.cs GMoonMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

Code.aspx <cc1:GSkyMap ID="GSkyMap1" runat="server" />

GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GTileLayerOptions tileLayerOptions = new GTileLayerOptions(); GoogleMaps.Subgurim.NET Versin: 3.2.0.1 04/12/2008

GCustomMapType customMapType = new GCustomMapType(tilelayer, new GMercatorProject ion(13), "Subgurim"); GMap1.Add(customMapType);