Versión. 3.2.0.

1 -04/12/2008

DOCUMENTACION EN ESPAÑOL

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

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

.

.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> y este campo al style de vuestra página: <style type="text/css"> v\:* { behavior:url(#default#VML).Controles.2.subgurim.0.Subgurim.NET debéis crear la Key apropiada.. } </style> 3. </configuration> De este modo.. Fijaos que esa clave depende del dominio donde vayáis a utilizarla. no tenéis más que añadir un atributo (a continuación se muestra en negrita) a vuestro tag head.NET Previa Tras descargar el control y seguir las instrucciones de instalación. El modo más sencillo donde ubicar la clave es en vuestro web.Controles 1 Instrucciones 1.Subgurim. idea o sugerencia.aspx tendréis: <cc1:GMap ID="GMap1" runat="server" /> Y para usar la librería en código. Para ello.w3.Subgurim..Para un correcto funcionamiento en todos los navegadores. Vuestra página quedará encabezada por algo similar a: <%@ register assembly="GMaps" namespace="Subgurim. no tenéis más que arrastrar vuestro control desde vuestra ToolBox. La podéis conseguir desde aquí. Google aconseja que las página cumplan los estándares XML. por lo que por cada Web donde utilicéis el GoogleMaps.Lo primero que debéis hacer es conseguir una Key..microsoft.NET: Imports Subgurim.net" value="tuClave_yourKey" /> </appSettings> .com/.Ahora ya sólo queda comenzar a utilizar el control! Para ello se recomienda seguir los ejemplos y ante cualquier duda. no dudéis en preguntar en el foro.0"> .NetConfiguration/v2. el control ya se encargará de hacer el resto.NET – Versión: 3.1 – 04/12/2008 ...config: <configuration xmlns="http://schemas.Cómo empezar a utilizar GoogleMaps.Controles" tagprefix="cc1" %> Y en vuestro . 2. VB. no olvidéis importarla mediante: C#: using Subgurim. <appSettings> <add key="googlemaps. de modo que se asemeje a: <html xmlns="http://www. GoogleMaps. pues lo exige Google para poder utilizar su API.

aspx. también se le puede asignar a la propiedad "Key" del control la key del elemento appSettings que contiene la clave.microsoft. en caso de que no se quiera utilizar la configurada por defecto "googlemaps.aspx.microsoft.config: web.0"> . Tal y como se comenta en ¿Cómo empezar? el modo más sencillo de asignar la clave al control es poniendo lo siguiente en el web.com/apis/maps/signup.1 – 04/12/2008 . <appSettings> <add key="googlemaps.com/..cs GMap1. el control ya se encargaría de todo.. o . </configuration> 2 De este modo. </configuration> GoogleMaps..google. Sin embargo.config <configuration xmlns="http://schemas.html. web.config <configuration xmlns="http://schemas.NET – Versión: 3.Key = "myOwnKey".0.subgurim.. <appSettings> <add key="myOwnKey" value="ClaveDeGoogle" /> </appSettings> .net": . ..Clave de Google o Key Imprescindible tener la clave de la API de google: http://www.subgurim.com/.cs GMap1.NetConfiguration/v2.Key = "ClaveDeGoogle".net" value="ClaveDeGoogle" /> </appSettings> .aspx <cc1:GMap ID="GMap1" runat="server" Key="ClaveDeGoogle" /> Alternativamente.2.NetConfiguration/v2...0"> . sigue valiendo asignar la clave desde la propiedad "Key" tanto en el mismo control como en código.Subgurim..

o .0. <appSettings> <add key="googlemaps.aspx <cc1:GMap ID="GMap1" runat="server" CommercialKey="CommercialKey" /> Alternativamente.0"> . también se le puede asignar a la propiedad "CommercialKey" del control la GoogleMaps. . el control parezca totalmente vuestro.NET. en que se hace referencia al inicio y al final del código propio del control.config: web.. (Ocurre sobretodo con el navegador FireFox).NetConfiguration/v2.CommercialKey = "CommercialKey". El modo más sencillo de asignar la CommercialKey al control es poniendo lo siguiente en el web.NET – Versión: 3.NET dispone de licencias comerciales para la utilización del control en aplicaciones profesionales. de cara tanto al visitante como (si es el caso) al cliente al que le estáis vendiendo la aplicación.2.config <configuration xmlns="http://schemas. tras aplicarla al control.Subgurim.NET" ubicado detras del mapa y que el visitante puede ver instantes antes de que se cargue el mapa. </configuration> De este modo.microsoft. Más información sobre licencias Asignar una CommercialKey a un mapa se hace de forma muy similar a hacerlo con la clave de Google o Key. Google Maps ASP. Con la compra de una licencia se proveerá de la "CommercialKey" que... producirá el siguiente efecto: • • Eliminación del mensaje "Powered By Subgurim.Subgurim.aspx.net_Commercial" value="CommercialKey" /> </appSettings> . Del mismo modo también vale asignar la clave desde la propiedad "CommercialKey" tanto en el mismo control como en código. el control ya se encargaría de todo.subgurim. 3 Con esto se consigue que.com/. Eliminación de los comentarios en código.cs GMap1.Comercial Key GoogleMaps..1 – 04/12/2008 .

</configuration> 4 GoogleMaps.com/.net_Commercial": .NET – Versión: 3.1 – 04/12/2008 . en caso de que no se quiera utilizar la configurada por defecto "googlemaps.aspx.key del elemento appSettings que contiene la CommercialKey.microsoft. <appSettings> <add key="myOwnCommercialKey" value="CommercialKey" /> </appSettings> . web..0"> .cs GMap1.CommercialKey = "myOwnCommercialKey".2...config <configuration xmlns="http://schemas..0.NetConfiguration/v2.Subgurim.subgurim.

enableGoogleBar = true. Usando la propiedad "Language" podremos definirlo. GMap1. Con la propiedad BackColor podremos definir el color de fondo del mapa mientras esperamos a que éste se cargue (sólo funciona si se dispone de licencia) 5 Code.43".aspx <cc1:GMap ID="GMap1" runat="server" /> Code. GMap1.2.enableDragging = false. basta con definirlo con la propiedad Version. También podemos decidir si el usuario puede mover el mapa con el ratón (Dragging). En nuestro ejemplo no vamos a permitirlo.1 – 04/12/2008 .Version = "2.cs // GMaps1.Language = "es".Subgurim. GMap1.BackColor = Color. Por defecto sí es así. Otra de las características básica es el idioma del mapa. GoogleMaps.0. En el ejemplo vemos lo fácil que es elegir la versión "2. Podemos elegir la versión de la API de Google Maps que queremos que utilice el control. GMap1. pero si queremos activar otra versión previa (por ejemplo por compatibilizar el código).Básico En nuestro primer ejemplo.43".White.aspx.NET – Versión: 3. vemos que es increiblemente sencillo tener el mapa de google en nuestra página. Si no hacemos nada la versión es la que el equipo de Google Maps define por defecto.

Subgurim.Básico 2 GMap_Height y GMap_Width han desaparecido definitivamente. Ahora hay que usar Width y Height del mismo modo que se usa en cualquier otro control. 6 Code.NET – Versión: 3.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" Width="90%" Height="250px" /> <cc1:GMap ID="GMap2" runat="server" /> GoogleMaps.0.2.

GMap2.1 – 04/12/2008 .NET – Versión: 3. 2).0.Width = 300. GMap2.cs GMap1. 7 GoogleMaps.Subgurim. 15). 2).2.Height = 456.setCenter(new GLatLng(41. GMap2.setCenter(new GLatLng(20.aspx. 6).Code.

8 La solución es utilizar el método getChangeHiddenStateFunction() de cada mapa. Code. En el ejemplo del TabContainer. por ejemplo con los TabPanels del TabContainer del Ajax Control Toolkit o con un div con style="hidden".NET – Versión: 3.2.Básico 3 GoogleMaps no se lleva bien con los elementos que lo ocultan con un Hidden. vemos que se ejecuta ese javascript en el preciso momento en que se hace clic sobre su TabPanel correspondiente. no mostrándose.Subgurim. pues acaba descuadrándose o. el cual devuelve un javascript que debemos ejecutar en el momento en que se vaya a mostrar el mapa. directamente. Tenemos este problema.0.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.1 – 04/12/2008 .

getChangeHiddenStateFunction().OnClientClick = GMap2.addControl(new GControl(GControl.extraBuilt.getChangeHiddenStateFunction().TextualCoordinatesControl)).MarkCenter)).2.0.TextualCoordinatesControl)).addControl(new GControl(GControl. GMap2. GMap2. 1)).addControl(new GControl(GControl.</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. 9 GoogleMaps.NET – Versión: 3. 2)).MarkCenter)).OnClientClick = GMap1. TabPanel1.extraBuilt.cs GMap1.setCenter(new GLatLng(39.setCenter(new GLatLng(40.addControl(new GControl(GControl. TabPanel3. GMap2.extraBuilt. GMap1. GMap1.Subgurim.aspx.extraBuilt.1 – 04/12/2008 .

Tened en cuenta que en algunas zonas no hay mapas disponibles para zooms elevados.2.aspx. El 1 se corresponde con el zoom más alejado.Subgurim. GoogleMaps.cs GMap1.0. y conforme aumentemos nos acercaremos más.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.Zoom Para asignar el zoom del mapa. 10 Code.NET – Versión: 3. manejaremos la propiedad GZoom.GZoom = 3.1 – 04/12/2008 .

también contamos con enableHookMouseWheelToZoom.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Las propiedades encargadas de tal menester son enableDoubleClickZoom y enableContinuousZoom. Pero además. permitiremos que el usuario haga zoom con la rueda del ratón.Subgurim.0.enableContinuousZoom = false. Además.enableDoubleClickZoom = false.NET – Versión: 3. si lo activamos.1 – 04/12/2008 .aspx. ese zoom ocurrirá de forma gradiente y continua.enableHookMouseWheelToZoom = true.cs // Ambas propiedades están activadas por defecto.2. para desactivarlas: // GMap1. 11 Code. // GMap1. con el que. GoogleMaps.Zoom 2 Haciendo doble clic sobre el Mapa podemos hacer un Zoom IN (botón de la izquierda) y un Zoom Out (botón de la derecha). GMap1.

GTypes. Code.Satellite Híbrido: GMapType.cs GMap1.addControl(new GControl(GControl. GMap1.addMapType(GMapType.Normal (por defecto) Satélite: GMapType.mapType = GMapType.0. elegir entre un tipo de mapa u otro no consiste más que en utilizar el IntelliSense.GTypes. Existen cuatro tipos de mapas: • • • • 12 Normal: GMapType.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.Tipo de mapa El tipo de mapa lo podemos elegir usando la propiedad mapType.GTypes.NET.Physical. GMap1.Subgurim.preBuilt.2.1 – 04/12/2008 .Physical).GTypes.NET – Versión: 3.Hybrid Físico: GMapType.GTypes.Physical Con el el control para ASP.MapTypeControl)).aspx. GoogleMaps.GTypes.

cs GMap1. 13 Code.aspx. GoogleMaps.GKeyboardHandler Activando el GKeyboardHandler (está desactivado por defecto).0.1 – 04/12/2008 .Subgurim. permitiremos que el usuario pueda navegar por el mapa con las flechas del teclado.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. pudiendo incluso utilizar dos flechas al mismo tiempo.enableGKeyboardHandler = true.2.NET – Versión: 3.

GTypes): el centro. Code.GTypes maptype = GMapType. GMap1. GMap1. 4. GMapType.0.2.NET – Versión: 3.TextualCoordinatesControl)). 14 Nota: las variables del tipo GLatLng pueden sumarse y restarse con los operadores '+' y '-'. int): marcamos el centro y el zoom setCenter(GLatLng. GMap1.9). el zoom y el tipo de mapa.Asignar Centro Para asignar el centro utilizaremos el método setCenter() Éste tiene tres sobrecargas: • • • setCenter(GLatLng): sólo marcamos el centro setCenter(GLatLng.GTypes. //GMap1.setCenter(latlong.2. 4).aspx <cc1:GMap ID="GMap1" runat="server" /> Code.addControl(new GControl(GControl. //GMap1.MarkCenter)). maptype).aspx.addControl(new GControl(GControl.setCenter(latlong). GoogleMaps.Subgurim.extraBuilt.1 – 04/12/2008 .cs GLatLng latlong = new GLatLng(15.extraBuilt. int GMapType.setCenter(latlong.Hybrid. 10.

15 Ambas porpiedades son del tipo enumerado cursor. del que podemos elegir 9 opciones. que coinciden con la definición de tipo de cursor que se da en CSS: auto. text.2.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Para ello tenemos que crear un objeto del tipo GCustomCursor y añadirlo al mapa mediante GMap1. crosshair. wait. draggingCursor: el tipo de cursor cuando estemos moviendo el mapa. help.aspx.addCustomCursor(customCursor). GoogleMaps.0. pointer. Default. hand.1 – 04/12/2008 .Subgurim. Code.text). move.Custom Mouse Cursors Podemos asignar tipos de cursores según la acción que se esté realizando sobre el mapa.crosshair.cs GCustomCursor customCursor = new GCustomCursor(cursor.NET – Versión: 3. GMap1. GCustomCursor tiene dos propiedades: • • draggableCursor: el tipo de cursor cuando podamos mover el mapa.addCustomCursor(instancia_GCustomCursor). cursor.

aspx. sino que aporta funcionalidades que la API de Google Maps no posee.cs GMap1. Pero el Static Map suele quedarse corto en muchas ocasiones (el usuario no tiene opción de moverse en el mapa).NET es muy potente. enableGetGMapElementById: Si no vamos a usar nunca la opción de getGMapElementById. que devuelve una simple imagen. GMap1.Subgurim. pues no solo es un parseador de ASP. 16 Si nuestro único objetivo es mostrar mapas con GPolygons o GMarkers y no queremos que el usuario tenga la opción de interactuar con el mapa. de modo que podemos aplicar algunas opciones para minimizar el código al máximo.2. enableServerEvents: sólo debemos activar esta opción si vamos a usar server events (desactivado por defecto).enableGetGMapElementById = false. GoogleMaps. Code. es recomendable desactivar esta opción (está activada por defecto). Sin embargo.Minimizar Código El control de Google Maps para ASP.NET – Versión: 3. deberíamos estudiar la posibilidad de utilizar Static Maps. es recomendable desactivar esta opción (está activada por defecto).1 – 04/12/2008 .0. de modo que aquí van algunas opciones que se pueden aplicar en el mapa para dejar el código a mínimos: • • • • enablePostBackPersistence: Si la página que contiene el mapa no va a realizar ningún PostBack.enablePostBackPersistence = false. en ocasiones no nos es necesario utilizar toda la potencia.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. enableStore: si no vamos a usar la propiedad Store no debemos activar esta opción (desactivada por defecto).NET a javascript.

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

• • •

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

17

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

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

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

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)));

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

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

19

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

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GControl control = new GControl(GControl.extraBuilt.NumericalZoomControl); GMap1.addControl(control);

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

addControl(new GControl(GControl. new GControlPosition(GControlPosition.extraBuilt.NET – Versión: 3. 20 GoogleMaps.TextualOnClickCoordinatesControl.1 – 04/12/2008 .TextualCoordinatesControl. GMap1.extraBuilt.GMap1.position.Subgurim.extraBuilt. new GControlPosition(GControlPosition.Top_Right))).0.MarkCenter)).position.2. GMap1.addControl(new GControl(GControl.Bottom_Right))).addControl(new GControl(GControl.

Control de escala: análogamente instanciaremos el control de escala mediante addControl_Scale(). Listeners: usaremos casi cualquier tipo de Listeners mediante addListener(GListener). Code. Líneas: añadiremos polilineas mediante addPolyline(GPolyline).2. Tipo de mapa: elegiremos el tipo de mapa con la propiedad mapType.1 – 04/12/2008 . 150). Cambiar tipo de mapa: haremos uso del control para cambiar el tipo de mapa simplemente llamando a addControl_MapType().GOverViewMap El modo más sencillo de añadir un OverViewMap viene explicado en la sección de controles prefabricados.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.Subgurim. Sin embargo. Vamos a poder trabajar con: • • • • • • 21 Dimensiones: mediante la propiedad gSize podemos elegir las dimensiones.aspx. donde vemos que no hay más que hacer GMap1.gSize = new GSize(250.0. 1).preBuilt. Mediante GOverViewMap. podremos elegir ciertas características del OverViewMap que antes no podíamos.NET – Versión: 3. en ocasiones vamos a querer un mayor control sobre este OverViewMap. GoogleMaps. y que en esencia son bastante similares a las que se ofrecen para un mapa normal.cs GLatLng latlng = new GLatLng(40.Add(new GControl(GControl. GOverViewMap gOVM = new GOverViewMap().GOverviewMapControl)).. gOVM.

5. GMap1.2.1 – 04/12/2008 .Add(latlng).Add(latlng + new GLatLng(3. puntos.MapTypeControl)).addPolyline(linea). List<GLatLng> puntos = new List<GLatLng/>().ID. puntos. 22 GoogleMaps.gOVM.addControl_MapType(). "FFF000".Subgurim. GMap1.preBuilt. puntos. GListener. +2. 4.click.Satellite. gOVM.5.Add(latlng + new GLatLng(4. puntos.addControl(new GControl(GControl. 2). gOVM. gOVM.Add(latlng + new GLatLng(0. GPolyline linea = new GPolyline(puntos.0.mapType = GMapType.79. gOVM. 8)).2)).addControl_Scale(). puntos.NET – Versión: 3.Add(latlng + new GLatLng(-0.6)).Event.addListener(new GListener(gOVM. -4)).}")). "function() {alert('Clicked!!').GTypes.gOverViewMap = gOVM.

setCenter(latlng.Líneas Para añadir líneas a nuestro mapa. y debemos dar el valor como un string con el color en hexadecimal o como un color . puntos.aspx. Está compuesta por 4 elementos.cs GLatLng latlng = new GLatLng(46. clickable: indica si la línea es o no clicable. puntos. debéis añadir el siguiente atributo a vuestro tag HTML: <html xmlns="http://www. geodesic: dibuja la línea como si fuera geodésica. 4.Subgurim. List<GLatLng> puntos = new List<GLatLng>().NET – Versión: 3.2)). puntos.5.2. del que sólo el primero es obligatorio: • • • • • • points: listado genérico de puntos (del tipo GLatLng).Add(latlng + new GLatLng(3. no plana. 8)). -4)).5. Define la opacidad de la línea.NET. 4). color: por defecto es el azul.Add(latlng).aspx <cc1:GMap ID="GMap1" runat="server" /> Code. weight: anchura de la línea en pixels opacity: double entre 0 y 1. 23 NOTA: para un correcto funcionamiento en el Internet Explorer. puntos. GoogleMaps. 21).1 – 04/12/2008 .org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> Code.Add(latlng + new GLatLng(-0.w3. utilizaremos el GPolyline. GMap1.0.Add(latlng + new GLatLng(0. Es la parte más importante pues definirá el trazado de la línea.

Add(latlng + new GLatLng(-5. GMap1. GPolyline linea = new GPolyline(puntos.weight = 4. 20)). puntos3.addPolyline(linea3).0. GPolyline linea2 = new GPolyline(puntos2). GPolyline linea3 = new GPolyline(puntos3. -8)). puntos2. 4).Add(latlng + new GLatLng(5. puntos2.1 – 04/12/2008 .Add(latlng + new GLatLng(5.Add(latlng + new GLatLng(5. -20)).addPolyline(linea2). GMap1.6)). List<GLatLng> puntos2 = new List<GLatLng>(). 2).Add(latlng).Add(latlng + new GLatLng(5. GMap1.Add(latlng + new GLatLng(5. puntos2.NET – Versión: 3. -4)). "FF0000". puntos2.addPolyline(linea).2.DarkViolet.geodesic = true. Color. puntos2. linea2.puntos. -6)). 0)).Add(latlng + new GLatLng(4. linea3. List<GLatLng> puntos3 = new List<GLatLng>(). +2. 24 GoogleMaps.Subgurim.79. puntos3.

NET – Versión: 3. Así pues.Subgurim. Por ejemplo. más "perfecto" será el cuadro. Ésta tiene 6 propiedades. hemos añadido dos interesantes métodos por considerar que su uso es muy típico: • • close(): independientemente de cómo estén configurados los puntos del polígono.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> GoogleMaps. o radius: grados geográficos de radio.1 – 04/12/2008 . clickable: indica si el polígono es o no clicable. Su valor por defecto es PI/4.2.0. si creamos un polígono de 4 grados NO se mostrará por pantalla un cuadrado perfecto. fillOpacity: double entre 0 y 1. Lo que hace esta función es crear un polígono en base a sus parámetros de entrada: o center: centro del polígono. cuanto más a los polos. Cabe destacar que se trata de polígonos basados en puntos geográficos. Esto se deja a gusto del programador. El efecto es muy similar a la de la clase "GPolyline". A partir de 20 se asemeja a una circunferencia. Debemos dar el valor como un string con el color en hexadecimal. Define la opacidad de la línea. int sides.w3. Define la opacidad del relleno del polígono. sino un polígono de 4 lados cuya distancia kilométrica entre el centro y ellos sea la misma. y debemos dar el valor como un string con el color en hexadecimal. strokeOpacity: double entre 0 y 1. de modo que el primer punto coincida con el último. debéis añadir el siguiente atributo a vuestro tag HTML: <html xmlns="http://www. double radius): Llamar a este método NO implica borrar los puntos insertados previa o posteriormente. o inclination: inclinación del primer punto. Es un double expresado en radianes. 25 Además. o sides: lados del polígono. Es la parte más importante pues definirá el trazado del polígono. strokeWeight: anchura de la línea en pixels. strokeColor: por defecto es el azul. más "deformado" estará el cuadrado. NOTA: para un correcto funcionamiento en el Internet Explorer.Polígonos Crear polígonos en nuestro mapa es muy sencillo con la clase "GPolygon". con la diferencia de que el GPolygon rellena el interior con el color que marquemos. fillColor: color del relleno interior del polígono. este método se encarga de cerrarlo. y cuanto más al ecuador. de la que sólo la primera es obligatoria: • • • • • • • points: listado genérico de puntos (del tipo GLatLng). createPolygon(GLatLng center.

close().79.6)).26 Code.Add(latlng + new GLatLng(0. 7. List<GLatLng> puntos2 = new List<GLatLng>().NET – Versión: 3. +2.5. puntos2. puntos2. GPolygon poligono3 = new GPolygon(new List<GLatLng>().setCenter(latlng.Add(latlng). -4)). GPolygon poligono2 = new GPolygon(puntos2.5). 21).5.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.Add(latlng + new GLatLng(-0. puntos.Add(latlng). "654321". -4)). puntos. GMap1.aspx. puntos2. "000000". GMap1. 0. 8)). 4.0.createPolygon(latlng + new GLatLng(-6. "00ff00". GoogleMaps. 1.Add(latlng + new GLatLng(4. 0. puntos.5). "ff0044". 3. 0. 4). poligono3. 4. -8)).Add(latlng + new GLatLng(3.Add(latlng + new GLatLng(5. 3. List<GLatLng> puntos = new List<GLatLng>(). 1). GMap1.addPolygon(poligono3).cs GLatLng latlng = new GLatLng(46. "237464". 0)).Add(latlng + new GLatLng(5. puntos. GPolygon poligono = new GPolygon(puntos. Math.2.5.Add(latlng + new GLatLng(-5. -6)). "557799".Add(latlng + new GLatLng(5. GMap1. 3.Subgurim. poligono. -7. 0).2)).PI /3).1 – 04/12/2008 .Add(poligono).addPolygon(poligono2). puntos2. puntos2. puntos.

GCopyrightCollection myCopyright = new GCopyrightCollection("© ").Subgurim.png Donde X es la latitud. GTileLayerOptions. GTileLayerOptions tileLayerOptions = new GTileLayerOptions(). Tiene la siguiente estructura: http://host/tile?x={X}&y={Y}&z={Z}.setCenter(new GLatLng(37.1 – 04/12/2008 . GTileLayer y GTileLayerOverlay. myCopyright. Un ejemplo sería: http://host/tile?x=3&y=27&z=5.4419. Para definir estas capas utilizaremos las clases GCopyright. new GLatLng(90.cs GMap1. 13).aspx <cc1:GMap ID="GMap1" runat="server" /> Code. El elemento más importante es la correcta definición de la propiedad tileUrlTemplate del GTileLayerOptions.0. de modo que podremos superponer nuestras imágenes a las que nos devuelve el GoogleMaps. Su uso es muy sencillo y vale seguir el ejemplo para entenderlo. GoogleMaps. 180)). -180). "©2008 Subgurim")). new GLatLngBounds(new GLatLng(-90.Add(new GCopyright("Demo". -122.aspx.NET – Versión: 3.png 27 Code.2.1419). 0.TileLayers Con las TileLayers podremos definir nuestras propias capas sobre el mapa. Se trata de un template que define la URL de la imagen a la que GoogleMaps va a llamar y será la que debéis gestionar. GCopyrightCollection. Y es la longitud y Z es el zoom.

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

28

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

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

29

Code.aspx <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);

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

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

30

Code.aspx <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);

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

cs GMap1.Custom Overlays Del mismo modo que hay controles extra. GoogleMaps.NET – Versión: 3. Disponemos hasta el momento de: • Rectangle: define un rectángulo en la parte central del mapa.Rectangle)).Subgurim.Add(new GCustomOverlay(GCustomOverlay. 31 Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.2. tenemos los GCustomOverlays de modo que podremos añadir capas al mapa de google en una sola línea.Overlay. Se va a trabajar mucho en este campo para las futuras versiones.0.aspx.1 – 04/12/2008 .

32 Code.NET – Versión: 3. Sabiendo en qué zonas geográficas está activo el Street View podremos usar el GStreetViewPanorama.GStreetViewOverlay Añadiendo el GStreetViewOverlay podremos ver las zonas en las que está activo el Street View.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.0.cs GoogleMaps.2.1 – 04/12/2008 .Subgurim.aspx.

GTypes. childType: el tipo de mapa "hijo".NET – Versión: 3.1 – 04/12/2008 .Hierarchical Map Type Control El GHierarchicalMapTypeControl es un nuevo control para mostrar los tipos de mapa de los que dispone el usuario. isDefault: indica si está activado por defecto. Como siempre.aspx.Add( GoogleMaps.clearPreviousRelationShips = true.0.hierarchicalMapTypeControlRelations.Subgurim.cs GMap1. lo mejor es un ejemplo: Code. hierarchicalMapTypeControl.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Al GHierarchicalMapTypeControl le iremos añadiendo GHierarchicalMapTypeControlRelation. hierarchicalMapTypeControl. GHierarchicalMapTypeControl hierarchicalMapTypeControl = new GHierarchicalMapTypeContr ol().Physical).addMapType(GMapType. El GHierarchicalMapTypeControlRelation se compone de las siguientes propiedades: • • • • 33 parentType: el tipo de mapa "padre". aunque tiene una interesante configuración por defecto. Su objetivo es mostrar la información de forma jerárquica en el modo en que nosotros lo configuremos. childText: el texto que saldrá en el menú al referirse al tipo de mapa hijo.2.

gHierarchicalMapTypeControl = hierarchicalMapTypeControl.1 – 04/12/2008 . "Subgurim Physical".Normal. GMap1. Physical.NET – Versión: 3. 34 GoogleMaps.Subgurim.0.GTypes.GTypes.Add( new GHierarchicalMapTypeControlRelation(GMapType. false)).GTypes. Hybrid.Satellite.GTypes.new GHierarchicalMapTypeControlRelation(GMapType. GMapType. "Subgurim Hybrid". hierarchicalMapTypeControl.2.hierarchicalMapTypeControlRelations. false)). GMapType.

Geotagged_Wikipedia_articles_Spanish).addGLayer(layerPanoramio).aspx. GMap1. GLayer layerWikipedia = new GLayer(GLayerID. 35 Code.Add(layerWikipedia).NET – Versión: 3. La clase GLayerID contiene todos los tipos de Layers que podemos añadirle al mapa.cs GLayer layerPanoramio = new GLayer(GLayerID.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" /> Code.2.GLayer Con el nuevo objeto GLayer podemos añadir a nuestros mapas fotos de Panoramio o artículos geolocalizados de la Wikipedia de forma muy sencilla. GMap1.Subgurim.0.All_photos_from_panoramio_com). GoogleMaps.

36 Code.Subgurim.cs GLatLng latlon = new GLatLng(10.aspx. No hay más que instanciar a GInfoWindow y darle los valores: • • point: del tipo GLatLon.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. GoogleMaps.2. GInfoWindow window = new GInfoWindow(latlon. indica dónde se ubicará el InfoWindow html: texto (con html incluído) que irá dentro del InfoWindow. GMap1.setCenter(latlon. 4). GMap1.1 – 04/12/2008 .NET – Versión: 3. "Ejemplo de <b>infoWindow</b>").addInfoWindow(window). 22).0.InfoWindow Añadir un InfoWindow es tremendamente fácil.2.

2. GoogleMaps. 37 Code.0. pero.Event. sourceEvent: asigna qué evento debe ocurrir para que el InfoWindow se abra.1 – 04/12/2008 . 22). GInfoWindow window = new GInfoWindow(icono. openedOnLoad: indica si el InfoWindow estará abierto al cargar el mapa. 4). podemos pedir que se abra cuando pongamos el ratón sobre el icono.InfoWindow con Icono Añadir un InfoWindow sobre un icono es igualmente sencillo.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. cuando lo retiremos.cs GLatLng latlon = new GLatLng(10. false.NET – Versión: 3.2.aspx.setCenter(latlon. por ejemplo. GListener. "Ejemplo de <b>infoWindow</b>". etc. GMarker icono = new GMarker(latlon).addInfoWindow(window). Por defecto está abierto. html: texto (con html incluído) que irá dentro del InfoWindow. GMap1.Subgurim. Si no lo está. Por defecto se abrirá al hacer click. lo abriremos ejecutando el evento elegido sobre el icono.mouseover). No hay más que instanciar a GInfoWindow y darle los valores: • • • • gMarker: se estudia en el ejemplo Iconos. GMap1.

Subgurim. siendo que todo lo visto en los dos ejemplos anteriores es válido. for (int i=0. System. i<3.ToString())). html: texto (con html incluído) que irá dentro de la pestaña.setCenter(latlon. i++) { tabs. } GoogleMaps. La diferencia estriba en que en este caso hemos de añadir un listado (System.ToString(). iwTabs.Collections.0.Generic. i.List<GInfoWindowTab>().Collections.InfoWindow con Pestañas El funcionamiento del InfoWindow con pestañas (GInfoWindowTabs) es muy similar al de sin pestañas. 22).NET – Versión: 3. GMap1.Add(new GInfoWindowTab("Tab " + i. Code. manejaremos dos propiedades: 38 • • label: etiqueta de la pestaña.List<GInfoWindowTab> tabs = new System.Generic. 4).2.1 – 04/12/2008 . del modo en que se indica en el ejemplo.Generic.2.point = latlon.aspx.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. En cuanto a la pestaña (GInfoWindowTab). /****** INFOWINDOWTAB 1 ******/ GInfoWindowTabs iwTabs = new GInfoWindowTabs().List) de pestañas (GInfoWindowTab).Collections.cs GLatLng latlon = new GLatLng(10.

addInfoWindowTabs(iwTabs2). 19)).gMarker = icono.tabs = tabs.Subgurim. GMap1. 39 GoogleMaps. GMarker icono = new GMarker(new GLatLng(5.iwTabs. GMap1.0.2. iwTabs2.tabs = tabs. /****** INFOWINDOWTAB 2 ******/ GInfoWindowTabs iwTabs2 = new GInfoWindowTabs().1 – 04/12/2008 .NET – Versión: 3. iwTabs2.addInfoWindowTabs(iwTabs).

2. zoomLevel: nivel de zoom del mapa flotante. indica el tipo de mapa que se va a utilizar. options.Hybrid.GTypes. options).ShowMapBlowUp El ShowMapBlowUp es un elemento que muestra en un pequeño mapa flotante una parcela del mapa en el que estamos trabajando. GoogleMaps. la única diferencia es que aquí.NET – Versión: 3.. que se explica en un ejemplo posterior.addShowMapBlowUp(mBlowUp).1 – 04/12/2008 . 0.P Su funcionamiento básico es el mismo que el InfoWindow. GShowMapBlowUp mBlowUp = new GShowMapBlowUp(new GMarker(latlon). un ejemplo va mejor que mil palabras . 4).91). GInfoWindowOptions options = new GInfoWindowOptions(). hay que hacer uso de GInfoWindowOptions.cs GLatLng latlon = new GLatLng(41. Las dos propiedades del GInfoWindowOptions que se aplican en exclusiva al ShowMapBlowUp son: • • 40 mapType: del enumerador GMapType..aspx <cc1:GMap ID="GMap1" runat="server" /> Code. options.65.Subgurim.mapType = GMapType. aunque para explicarlo. Code.aspx.GTypes. para una eficaz utilización.setCenter(latlon.zoomLevel = 14. GMap1.0. GMap1.

mapType: aplicable sólo al ShowMapBlowUp. el infowindow no tendrá la opción de maximizarse. Marca qué pestaña será la activa. Podemos ponerle el HTML que queramos.Creando y añadiendo tu propio javascript desde aquí. Está compuesta de 6 propiedades.Subgurim. Ejecuta un función javascript cuando se cierra la ventana. La función javascript puede enlazarse de dos modos: . InfoWindow con pestañas y a ShowMapBlowUp.} Para mayor claridad. Si no se definen ni MaxTitle. MaxTitle: el título del infowindow cuando lo maximicemos. onCloseFn: aplicable a todos los elementos.2. algunas de ellas sólo aplicables a alguno de los elementos correspondientes: • • • • • • • • maxWidth: aplicable a todos los elementos. Por defecto.1 – 04/12/2008 . Marca el tipo de mapa (definido en el enumerador GMapType. Ejecuta un función javascript cuando se abre la ventana. zoomLevel: aplicable sólo al ShowMapBlowUp.NET – Versión: 3. con una función anónima. ni MaxContent. MaxContent: el contenido del infowindow cuando lo maximicemos. . donde la primera pestaña tiene índice 0. Marca máxima la anchura en pixeles que tendrá la ventana. onOpenFn: aplicable a todos los elementos.GInfoWindowOptions GInfoWindowOptions sirve para añadir ciertas opciones a InfoWindow.0. Marca el nivel del zoom del mapa flotante. Por ejemplo function() {alert('Estoy abriendo la ventana').Poniendo el nombre de la función javascript que ya tengas hecho en tu aspx. el índice 0 será el activo.GTypes) del mapa flotante. mirad los ejemplos. 41 GoogleMaps. Funcionamiento análogo a onOpenFn selectedTab: aplicable sólo al InfoWindow con pestañas.

NET – Versión: 3.0.2.Subgurim.1 – 04/12/2008 .42 GoogleMaps.

"InfoWindow.Add(new GInfoWindowTab("Tab 1". tabs).setCenter(latlng.Subgurim. tabs.D')}". GInfoWindow window = new GInfoWindow(latlng.Hybrid). "I'm <b>3</b> and I'm active by default!!")). GMap1.cs GLatLng latlng = new GLatLng(44.NET – Versión: 3.43 Code. GInfoWindowOptions options1 = new GInfoWindowOptions(). GMarker marker1 = new GMarker(latlng + relativo).aspx. GMap1.Add(new GInfoWindowTab("Tab 2". GoogleMaps. wTabs.relativo). } </script> <cc1:GMap ID="GMap1" runat="server" /> Code.GTypes. Close me please. GLatLng relativo = new GLatLng(2.1 – 04/12/2008 . GMarker marker2 = new GMarker(latlng .options = options2. options1. 4. List<GInfoWindowTab> tabs = new List<GInfoWindowTab>(). GMapType. GInfoWindowOptions options2 = new GInfoWindowOptions(2). window.2.0.options = options1. -6). "I'm tab 2"))."). 9).onCloseFn = "function(){alert('Thanks! You have closed me . tabs.Add(new GInfoWindowTab("Tab 3".addInfoWindow(window). GInfoWindowTabs wTabs = new GInfoWindowTabs(marker1. tabs. "I'm tab 1")).aspx <script type="text/javascript"> function abiertoSMBU() { alert('Has abierto el ShowMapBlowUp').

GInfoWindowOptions options = new GInfoWindowOptions("Max Title". GMapType.1 – 04/12/2008 .2.NET – Versión: 3.Normal).addInfoWindowTabs(wTabs).GMap1. "infoWindow example". false. GInfoWindow window2 = new GInfoWindow(marker3.GTypes. options3).Subgurim. GMap1. GMap1.0.onOpenFn = "abiertoSMBU()". "Max Content").addInfoWindow(window2). 44 GoogleMaps. options). GInfoWindowOptions options3 = new GInfoWindowOptions(12. options3. GShowMapBlowUp mbUp = new GShowMapBlowUp(marker2.addShowMapBlowUp(mbUp).

0. Tenemos dos propiedades que definen al GMarker: • • point: la coordenada (del tipo GLatLng) en que se ubicará el icono. dragCrossMove: Es una propiedad poco importante. sobretodo asociándolos con InfoWindow y similares. Obviamente. podemos utilizarlos sin asociarlos a nada.2. bounceGravity: marca la "altura" que darán los botes. title: el html tooltip del icono. Code. en caso contrario (por defecto) es el icono el que se desplaza mínimamente hacia arriba.Subgurim. Dando un valor de true la cruz se desplaza un poco hacia abajo en el momento cogemos el icono.aspx <cc1:GMap ID="GMap1" runat="server" /> GoogleMaps. Son los GMarker. Por defecto NO lo es. 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). 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. options: del tipo GMarkerOptions.1 – 04/12/2008 . maxHeight: especifíca la distancia en pixels en la que un marker se eleverá cuando es arrastrado. bouncy: indica si queremos que el icono pegue unos botes cuando lo soltamos..Iconos Ya hemos utilizado los iconos en varias ocasiones. Por defecto vale 1. Cuando arrastramos un icono aparece un cruz bajo éste que indica donde queremos que se ubique. draggable: define si el icono puede ser arrastrado en el mapa.NET – Versión: 3.

jsStart)). GMap1. GMapType. IWoptions). GInfoWindowOptions IWoptions = new GInfoWindowOptions(12.playsudoku.ID + ".addGMarker(new GMarker(latlng + new GLatLng(2. string jsStart = "function() {" + GMap1.}".ID. -1)).Event.addGMarker(marker2).145). 5. markerOptions). mOpts.aspx.GTypes. GMap1. GMap1. false.closeInfoWindow().5).Add(new GListener(markerDraggable.Hybrid).GMap_Id + ". GoogleMaps. 46 GMarkerOptions markerOptions = new GMarkerOptions().0. -1. GMarker marker2 = new GMarker(latlng + new GLatLng(-1. GMarkerOptions mOpts = new GMarkerOptions(). jsEnd)). GListener. GMarker markerDraggable = new GMarker(latlng + new GLatLng(-2.addGMarker(markerDraggable).Code. string jsEnd = "function() {" + markerDraggable.cs GLatLng latlng = new GLatLng(42. markerOptions.ID. 1))). GMapType.dragstart.addShowMapBlowUp(mbUp). GListener.Normal).clickable = false.options = mOpts.Event.biz\" target=\"_blank\">Play Sudoku</a>').2.}".draggable = true.openInfoWindowHtml('<a href=\"http://www.Subgurim.setCenter(latlng.1 – 04/12/2008 . GMap1. GMap1.12. GMarker marker = new GMarker(latlng). GMap1.dragend.Add(new GListener(markerDraggable. markerDraggable.GTypes.NET – Versión: 3. 2. GShowMapBlowUp mbUp = new GShowMapBlowUp(marker. GMap1.

Code. La imagen debe ser el PNG de 24-bits de la image. printShadow: la sombra para mapas impresos. Para ello usaremos GIcon. iconAnchor: la coordenada relativa en pixeles (Gpixel) de la esquina superior izquierda desde la cual el icono es clickable (obligatorio).NET – Versión: 3. Debe tener el mismo tamaño que shadow. transparent: la imagen de un virtual versión trasparente de la imagen. con un 1% de opacidad. shadow: la sombra del icono. usada para capturar eventos clic en Internet Explorer.1 – 04/12/2008 . asignaremos al GMarker desde su propiedad options (del tipo GMarkerOptions). que como comentábamos en el ejemplo anterior. shadowSize: el tamaño (del tipo GSize) de la sombra del icono. 47 Recomendado: en la galería de iconos podréis encontrar cientos de iconos para vuestros mapas. los dos primeros: • • • • • • • • • • • image: la imagen del icono (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.0. y es obligatorio asignar.2.Subgurim.Iconos Avanzados Podemos crear un tipo de icono nuevo que sustituya al existente por defecto.aspx <cc1:GMap ID="GMap1" runat="server" /> GoogleMaps. mozPrintImage: análogo a printImage. GIcon tiene 11 propiedades. iconSize: el tamaño (del tipo GSize) de la imagen del icono (obligatorio). printImage: la imagen para mapas impresos. Debe tener el mismo tamaño que image. baseIcon: un icono base del que se copiarán todas las propiedades a este icono. al menos. Debe tener el mismo tamaño que image. pero para Mozilla/Firefox.

icon.2. icon.icon = icon.infoWindowAnchor = new GPoint(5.iconSize = new GSize(12.shadow = "http://labs.google. 20).2).Code. mOpts). icon. icon.addGMarker(marker). 20). GMap1. 5).setCenter(latlng.Subgurim. GMarker marker = new GMarker(latlng. 20). GMap1.iconAnchor = new GPoint(6. mOpts.image = "http://labs.NET – Versión: 3.0.aspx.shadowSize = new GSize(22. -3.png".google.png".com/ridefinder/images/mm_20_red. GMarkerOptions mOpts = new GMarkerOptions(). 1).com/ridefinder/images/mm_20_shadow.clickable = false. mOpts.cs GLatLng latlng = new GLatLng(41.1 – 04/12/2008 . icon. 48 GoogleMaps. GIcon icon = new GIcon(). icon.

3).Marker Manager Para poder manejar cientos de iconos a la vez y además poder asignarles un rango de zoom. A cada GMarker se le puede añadir un evento con GListener. GoogleMaps. En nuestro ejemplo.Subgurim.NET – Versión: 3.aspx.2.1 – 04/12/2008 . y luego añadir diez marcadores que sólo fueran visibles entre el nivel de zoom 6 y el 8.preBuilt. MarkerManager mManager = new MarkerManager(). se le ha asignado un evento "onclick" que alerta del orden en que ha sido creado. podríamos añadir un icono que sólo fuera visible a partir de un nivel de zoom = 2. [param3]): el primer parámetro puede ser tanto un simple GMarker. GMap1. 3). un GInfoWindow o un GInfoWindowTabs como un listado genérico de ellos.LargeMapControl)). Por ejemplo.cs GMap1. param2. Además el MarkerManager sólo tiene una función muy sencilla de usar: • 49 Add(param1.Add(new GControl(GControl.0.setCenter(new GLatLng(41. 3)). GMarker m1 = new GMarker(new GLatLng(41. Code. El segundo parámetro indica el nivel mínimo de zoom y el tercero (opcional) indica el máximo.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. no tenemos más que usar el MarkerManager. a cada uno de los diez marcadores creados aleatoriamente. Recordemos que los niveles de zoom van del 0 al 17.

point + new GLatLng(ir1.point + new GLatLng(ir1.0. mManager. 50 GoogleMaps. ir2)). i++) { ir1 = (double)r.Add(iws.Add(new GListener(mkr. for (int i = 0. 8). 8). } for (int i = 0.0 .Next(40) / 20.Add(mks. GListener.ToString()).markerManager = mManager.click. iws.Next(40) / 10. ir2)). GInfoWindow window = new GInfoWindow(mkr. List<GInfoWindow> iws = new List<GInfoWindow>(). 7.}")). ir2 = (double)r.0 . mkr = new GMarker(m1. GMarker mkr.0 . i.2.2. GMap1.0 . i < 10.Add(window). List<GMarker> mks = new List<GMarker>(). } mManager. Random r = new Random().Next(40) / 20.1. 2).Add(m1.1 – 04/12/2008 . ir2. double ir2 = (double)r. "function(){alert('" + i + "'). i++) { double ir1 = (double)r. double ir1.Add(mkr).0.Next(40) / 10.0.ID.NET – Versión: 3. mks.mManager. 6. GMap1.1.Subgurim. i < 5.2.Event. mkr = new GMarker(m1.

Usado junto con Width y Height evita usar el zoom. Width. "mobile". son exactamente iguales a las del GMap. Alt: define el Alt normal del element "img" de HTML. jpg o png) span: permite definir la anchura que abarca el mapa en grados (GLatLng). jpg o png) y sobre la que no podrá realizarse ningún tipo de interacción. puede que nos interese usar el Static Map. etc. "satellite". Code. Al Static Map le podemos añadir un un StaticMarker (el equivalente al GMarker) y un StaticPath equivalente al GPolyline usando los métodos "addStaticGMarker" y "addStaticPath". El modo de trabajar con el Static Map es muy parecido al que tenemos con el GMap normal. El resultado será una imagen con el formato que decidamos (gif. "hybrid" y "terrain". la CommercialKey.1 – 04/12/2008 .0. De hecho gran parte de propiedades con la GoogleKey. Sus propiedades diferentes más importantes son: • • • • 51 mapType: enum del tipo MapType enum que nos permetirá elegir el tipo de mapa entre "roadmap". Height.aspx <cc1:StaticGMap ID="StaticGMap1" runat="server" Width="500" Height="500" Language="en" format="png32" /> GoogleMaps.Subgurim.2.NET – Versión: 3.Static Map En caso de querer un mapa muy sencillo con iconos estáticos y poco más. format: enum del tipo FormatEnum que nos permitirá decidir el formato de la imagen (gif.

80). StaticGMarker.SizeEnum)randomSize. -5)).Add(new GLatLng(41. color.points.points.FromArgb(255. path. path. size. sizeEnumLength).2. double latStep = -1. path. c).points. lngStep * iLn g).Add(new GLatLng(39.4.Next(2. StaticPath path = new StaticPath(). path.ColorEnum color = (StaticGMarker. } GLatLng latlngAux = latLng + new GLatLng(latStep * iLat + r.addStaticGMarker(staticGMarker). StaticGMap1. 0.Next(colorEnumLength). int sizeEnumLength = 3.NET – Versión: 3.points. int colorEnumLength = 11. path.cs GLatLng latLng = new GLatLng(41.NextDouble() * 0. -7).aspx.weight = 5. -4)). StaticGMarker.SizeEnum size = (StaticGMarker.Add(new GLatLng(41.colorNet = Color.addStaticPath(path). double lngStep = 0. continue. -2)). foreach (char c in msg) { if (c == ' ') { iLat++. int randomColor = r. Random r = new Random(). 52 int iLat = 0.Add(new GLatLng(40.4. string msg = "Subgurim Google Maps".Subgurim.Code.GZoom = 5.0.ColorEnum)randomColor. path. StaticGMarker staticGMarker = new StaticGMarker(latlngAux. int randomSize = r. int iLng = 0. StaticGMap1.1 – 04/12/2008 . path. -4)).alpha = 150. iLng++. GoogleMaps. } //StaticGMap1.

pero las muestra al "modo Google Earth".aspx <cc1:GEarthMap ID="GEarthMap1" runat="server" Height="400" /> GoogleMaps. 53 Code.2. Comparte muchas de las características del Google Maps normal.Subgurim. Para su visualización requiere un plugin fácilmente instalable.NET – Versión: 3.0.1 – 04/12/2008 .GoogleEarth Map Se define como el "Google Earth" para la Web.

2.Subgurim. exceptuando el mapType que es del tipo GMarsMapType.cs GMarsMap1.MapTypeControl)).NET – Versión: 3. GoogleMaps.Mars Map Muestra el planeta Marte y se usa exactamente igual que el GMap. 54 Code.aspx.1 – 04/12/2008 .preBuilt.aspx <cc1:GMarsMap ID="GMarsMap1" runat="server" /> Code.0.addControl(new GControl(GControl.

exceptuando el mapType que es del tipo GMoonMapType.NET – Versión: 3.MapTypeControl)).Subgurim. GoogleMaps.aspx.1 – 04/12/2008 . 55 Code.preBuilt.2.addControl(new GControl(GControl.Moon Map Muestra la Luna y se usa exactamente igual que el GMap.aspx <cc1:GMoonMap ID="GMoonMap1" runat="server" /> Code.cs GMoonMap1.0.

NET – Versión: 3.2.0. exceptuando el mapType que es del tipo GSkyMapType.Sky Map Muestra el cielo y se usa exactamente igual que el GMap. 56 Code.1 – 04/12/2008 .aspx <cc1:GSkyMap ID="GSkyMap1" runat="server" /> GoogleMaps.Subgurim.

GTileLayerOptions.4419. 13). GCopyrightCollection. GCopyrightCollection myCopyright = new GCopyrightCollection("© ").aspx.0.Add(new GCopyright("Demo". longitud y zoom en la que estemos. 180)).png 57 Code.1419). new GLatLngBounds(new GLatLng(-90. Utilizaremos las clases GCopyright. Su uso es muy sencillo y vale seguir el ejemplo para entenderlo.NET – Versión: 3. GTileLayer y GCustomMapType. myCopyright.cs GMap1. -122. GTileLayerOptions tileLayerOptions = new GTileLayerOptions(). Y es la longitud y Z es el zoom.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. El elemento más importante es la correcta definición de la propiedad tileUrlTemplate del GTileLayerOptions.Subgurim.1 – 04/12/2008 . new GLatLng(90. -180).png Donde X es la latitud. Tiene la siguiente estructura: http://host/tile?x={X}&y={Y}&z={Z}. 0.2. Un ejemplo sería: http://host/tile?x=3&y=27&z=5.Custom Maps Con los CustomMaps podremos definir las imágenes que mostrará el control de Google en base a la latitud. GoogleMaps. Se trata de un template que define la URL de la imagen a la que GoogleMaps va a llamar y será la que debéis gestionar.setCenter(new GLatLng(37. "©2008 Subgurim")).

"Subgurim").NET – Versión: 3. GTileLayer tilelayer = new GTileLayer(myCopyright.Subgurim. GCustomMapType customMapType = new GCustomMapType(tilelayer. tileLayerOptions). new GMercatorProject ion(13).tileLayerOptions.png". 10. 58 GoogleMaps.0.Add(customMapType). GMap1.tileUrlTemplate = "http://code. 10.1 – 04/12/2008 .google.2.com/apis/maps/documentation/exam ples/include/tile_crosshairs.

se comparten con el GMaps. Sin embargo su uso sigue la misma filosofía del GMaps.aspx <cc1:GStreetviewPanorama ID="GStreetviewPanorama1" runat="server" /> Code. Code. yaw o pitch. 1)). que define el zoom. la CommercialKey.0.GStreetViewPanorama El GStreetViewPanorama es un control diferente al GMaps y por tanto con muchas características distintas. el yaw (ángulo respecto al norte) y el pitch (ángulo respecto a la horizontal). así como las características de la cámara.StreetviewPanoramaOptions = new GStreetviewPanoramaOptions(ne w GPov(-180.NET – Versión: 3.zoomchanged. GStreetviewListener. el Height.Event. GoogleMaps. como cambio de zoom. GStreetviewListener: con el que manejaremos los diferentes eventos.GMap_Id. Con el GStreetViewPanorama conseguimos el modo StreetView.2. el Width. GStreetviewListener zoomlistener = new GStreetviewListener( GStreetviewPanorama1. }").elemento GPov. "function(zoom) { alert('Zoom changed to ' + zoom).Subgurim.1 – 04/12/2008 . pero muchos otros son totalmente diferentes. -15. etc. Lo elementos principales del GStreetViewPanorama son: • 59 GStreetviewPanoramaOptions: con el que podremos definir las coordenadas en que se abrirá la Street View.cs GStreetviewPanorama1. Algunos elementos como la GoogleKey.aspx.

Event. GStreetviewListener. GStreetviewPanorama1.2.Add(pitchlistener).GMap_Id.NET – Versión: 3. GStreetviewListener.Subgurim. "function(yaw) { alert('Yaw changed to ' + yaw).Add(yawlistener).Add(zoomlistener).Event. GStreetviewListener pitchlistener = new GStreetviewListener( GStreetviewPanorama1. }").GStreetviewListener yawlistener = new GStreetviewListener( GStreetviewPanorama1. "function(pitch) { alert('Pitch changed to ' + pitch). GStreetviewPanorama1.pitchchanged.GMap_Id.1 – 04/12/2008 .0.yawchanged. 60 GStreetviewPanorama1. GoogleMaps. }").

} </script> GoogleMaps. pues se usan las dos opciones). "drag". Para asignar eventos se trabaja con la clase GListener. podemos usar el enumerado Event handler: podemos crear una función al vuelo o usar una función javascript que hayamos hecho previamente (ver el ejemplo. Por ejemplo "click". la versatilidad es absoluta pues mediante los Listeners podemos configurar eventos de cualquier tipo para que hagan saltar nuestras propias funciones javascript. Para no tener que saberse todos los eventos posibles de memoria. Code. un polyline o un polygon. Del mismo modo. 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.0.Eventos Hasta el momento hemos ido utilizando eventos en varios ejemplos de forma totalmente automática. etc.1 – 04/12/2008 . cuando hacemos clic sobre un marker y se muestra una ventana.aspx <script type="text/javascript">> function alertame() { alert('Quedas alertado'). my_sEvent: evento que vamos a capturar. cuando utilizamos el TextualCoordinatesControl. "moveend". Puede ser el propio mapa.2. Ésta dispone de tres propiedades: • • 61 • source: el elemento que va a producir el evento.NET – Versión: 3. Por ejemplo.NET.Subgurim.Subgurim. un icono. entra por medio el evento "click". Con GoogleMaps.

Append("if (overlay){"). sb.ID. GMarkerOptions mOpts = new GMarkerOptions(). mkr. GListener. GMap1.click. GMap1.Append(mkr. "function() {alert('I Love Elvis :9P').2.Add(latlng + new GLatLng(2.GMap_Id.2). mkr. 1)).Event.Event.}")).StringBuilder sb = new System.}"). sb. "alertame").Text. sb.Subgurim.PolygonID.Append("}").GTypes. "alertame"). GMap1. GListener listener = new GListener(marker.dragend.close(). sb. GMap1.click. GListener.Text. 5. GMarker mkr = new GMarker(). GMap1.1 – 04/12/2008 .addListener(listener3).draggable = true.Append("}").Append("}"). GMap1. GMarker marker = new GMarker(latlng.Append(listener.moveend.addListener(listener2). sb. mOpts.Event.ToString(GMap1.Satellite).setCenter(latlng.Add(polygon).javascript_GLatLng = "point".options = mOpts. GMapType. polygon.Append("alert(overlay.ToString()). polygon. 3)).dragend.addListener(listener). -3.aspx.GMap_Id)).Add(latlng + new GLatLng(4.GMap_Id.<cc1:GMap ID="GMap1" runat="server" /> Code. listener = new GListener(mkr.cs GLatLng latlng = new GLatLng(41.Append("else{"). point) {").Add(latlng + new GLatLng(1. sb. GListener listener3 = new GListener(polygon. "function(point) {alert(point)."). System.StringBuilder(). sb.0. polygon. sb.ToString()). sb.NET – Versión: 3.id).addListener(new GListener(GMap1. GListener listener2 = new GListener(GMap1.ID.Append("function(overlay.Event. 4)).addGMarker(marker). GPolygon polygon = new GPolygon(). GListener. mOpts). polygon. GListener.Event. sb. GMap1. 62 GoogleMaps. GListener.

o map: nos da SIEMPRE el identificador javascript del mapa. podrás viajar desde el mapa al servidor mediante AJAX. La utilización de los eventos de servidor es la misma que la de cualquier control Web ASP. y se lanzará cuando hagamos click sobre el mapa. DragEnd: se lanza cuando acabamos de arrastrar el mapa con el ratón. o el control "preBuilt" de movimiento. MoveStart: se lanza cuando se comienza un movimiento del mapa. Hay que activarlos explícitamente haciendo enableServerEvents = true Como se puede comprobar en el ejemplo. Por defecto están desactivados. Recordamos que un movimiento puede producirlo el ratón al coger y arrastrar. Nos indica quién ha lanzado el eventos. Algunos eventos disponen de unos argumentos especiales. MarkerClick: se lanza cuando hacemos click sobre un marker/icono. 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 bounds: devuelve el GLatLngBounds (coordenadas noreste y sudoeste) del mapa en el momento se ha producido el evento. Vemos también que hay dos parámetros en la función: • • 63 s: es la fuente (source) que ha producido el evento. El común denominador de todos los argumentos es: o who: coincide con la fuente anteriormente descrita. añadir un infoWindows. DragStart: se lanza cuando estamos empezando a arrastrar el mapa con el ratón. o point: según el evento lanzado. que a continuación indicaremos. A continuación se listan los eventos de servidor con los que podrás trabajar: • • • • • • • • Click: es el evento por defecto. de modo que podemos usarlo para ejecutar javascript. Le dedicamos un apartado especial.Eventos de Servidor Con los eventos de servidor.1 – 04/12/2008 . las funciones que responden al evento devuelven código en javascript. el teclado.2. MoveEnd: se lanza cuando se termine un movimiento del mapa. o mapType: devuelve el tipo de mapa en que se encuentra. e: son los argumentos de los que disponemos. etc).Subgurim. Será el que usemos si queremos aplicar algún cambio al mapa (añadir un icono.0. GoogleMaps. Su argumento incluye el nuevo tipo de mapa. ServerEvent: hemos de configurarlo manualmente y es capaz de recoger cualquier tipo de evento que le pidamos. MapTypeChanged: se lanza cuando se cambia la vista del mapa. Habitualmente es el identificador del mapa.NET – Versión: 3. o zoom.NET.

LargeMapControl)). GAjaxServerEventArgs e) { GMarker marker = new GMarker(e.NET – Versión: 3. Su argumento incluye el viejo zoom del que venimos y el nuevo zoom al que hemos ido.0.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.MapTypeControl)). } } protected string GMap1_Click(object s.1 – 04/12/2008 .cs protected void Page_Load(object sender.addControl(new GControl(GControl.preBuilt. GMap1. Haciendo uso de la propiedad "ajaxUpdateProgressMessage" puede definirse el mensaje que queremos que aparezca mientras si realiza el viaje cliente-servidor-cliente.• ZoomEnd: se lanza cuando acabamos de hacer un zoom.Subgurim. 64 Code.point).preBuilt. GoogleMaps.2.aspx.addControl(new GControl(GControl.IsPostBack) { GMap1. EventArgs e) { if (!Page.

e.point).Now. GAjaxServerEventZoomArgs e) { return string.ToString() + " . GAjaxServerEventArgs e) { return "document.{2}')". false).".newLevel. "DragStart . GInfoWindow window = new GInfoWindow(marker. DateTime.1 – 04/12/2008 65 .ToString() + "'.Now.Now.Format("alert('oldLevel/newLevel: {0}/{1} . } protected string GMap1_MoveEnd(object s. false). GAjaxServerEventArgs e) { GMarker marker = new GMarker(e. e. true).ToString() + " .".point.Now). "DragEnd . DateTime.ToString().0. } protected string GMap1_DragEnd(object s.Format(@" <b>GLatLngBounds</b><br /> SW = {0}<br/> NE = {1} ".bounds.point). GAjaxServerEventArgs e) { return string. e.getNorthEast().oldLevel." + DateTime.ToString().getSouthWest().ToString() + "'.map).point. return window. } protected string GMap1_ZoomEnd(object s.ToString(e." + DateTime.2. e.GInfoWindow window = new GInfoWindow(marker.map). GAjaxServerEventArgs e) { return "document.ToString(). GAjaxServerEventArgs e) { GMarker marker = new GMarker(e. string.map).ToString(e.ToString().Format("alert('MarkerClick: {0} .innerHTML= 'MoveStart at " + e." + DateTime. GInfoWindow window = new GInfoWindow(marker. e." + DateTime.innerHTML= 'MoveEnd at " + e.getElementById('messages2').Now.point. } protected string GMap1_MarkerClick(object s.Subgurim. } protected string GMap1_MoveStart(object s.{1}')".Now). } protected string GMap1_DragStart(object s. GoogleMaps.getElementById('messages1').bounds.ToString(e. return window.ToString()) .NET – Versión: 3. return window.

1 – 04/12/2008 .NET – Versión: 3.2.0.mapType. } 66 GoogleMaps.} protected string GMap1_MapTypeChanged(object s.Format("alert('{0}')". e.ToString()).Subgurim. GAjaxServerEventMapArgs e) { return string.

debemos manejar el evento ServerEvent. En cuanto a "InfoWindowClose". Es muy útil para. Por ejemplo manejar un evento no-predefinido. 2. Como vemos en el ejemplo. En el ejemplo vemos como definimos dos eventos: "Click" y "InfoWindowClose". Para hacerlo funcionar. distinguir entre varios eventos diferentes eventArgs: es un array de string que contiene todos los argumentos que hemos añadido en javascript. o redefinir un evento predefinido del que queremos unos datos diferentes.2. Vemos pues que podemos manejar cualquier evento que produzca el mapa.Subgurim. pero aquí hemos añadido un argumento que no teníamos antes: el tamaño del mapa.Javascript Debemos añadir un javascript y usar la clase javascript 'serverEvent' para mandar la información a servidor. deberemos seguir los siguientes pasos: 1. En los ejemplos vemos que usar la clase 'serverEvent' es muy sencillo. como en el ejemplo. un modo sencillo de crear el javascript es usando addListener. GoogleMaps. los markers.Eventos de Servidor 2 Si bien es cierto que los eventos de servidor predefinidos son los más comunes. Ahí dispondremos de GAjaxServerEventOtherArgs en la que podemos encontrar 2 propiedades (además de las comunes "who" y "point"): • 67 • eventName: string que contiene el nombre del evento que nosotros mismo hemos definido.NET – Versión: 3. El primero maneja el evento click del mapa.Servidor En el servidor. ya hemos visto que este evento era uno de los predefinidos. Finalmente hay que llamar a la función 'send()' y la información se envía a servidor.. puede darse el caso que queramos hacer algo diferente. tal y como se hace con el resto de eventos. pues no hay más que inicializarla con el nombre que queramos darle al evento (eventName) y el identificador del mapa (GMap_Id) en el caso de que haya más de un mapa en una misma página e ir añadiéndole tantos argumentos como queramos..0. o lo que sea.1 – 04/12/2008 . maneja un evento de los no-predefinidos. Para este caso tenemos el evento ServerEvent.

var ev = new serverEvent('Click'. point) {{ if (!point) return.cs protected void Page_Load(object sender.Format(@" function(overlay.addListener(new GListener(GMap1.1 – 04/12/2008 .click.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnServerEvent="GMap1_ServerEvent" /> Code. string.NET – Versión: 3.68 Code.2.GMap_Id.Event. GoogleMaps. EventArgs e) { if (!Page.0.IsPostBack) { GMap1.Subgurim. {0}). GListener.aspx.

addArg({0}.ev. false))). e.Globalization.addListener(new GListener(GMap1.".Event.send().1 – 04/12/2008 . js = window. } } protected string GMap1_ServerEvent(object s. new System.Subgurim.eventArgs[0].0. case "InfoWindowClose": js = string.Format ("alert('{0}: {1} .{2} .infowindowclose.GMap_Id))).lng()). GMap1.send().who).addArg(point.eventName. new System.eventArgs[0]. GMap1. }} ".getSize(). GListener.2. {0}). ev. string.point. ev. break.CultureInfo("en-US".eventName) { case "Click": GLatLng latlng = new GLatLng( Convert.Format(@" function() {{ var ev = new serverEvent('InfoWindowClose'.ToString(e. ev.Empty.getSize().addArg('My Argument').Now). GInfoWindow window = new GInfoWindow(latlng.GMap_Id. break.addArg(point. ev. DateTime. }} ".Globalization.{3}')".ToDouble(e. GMap1. Close Me. e. switch (e. false)).addArg({0}.GMap_Id))).NET – Versión: 3.{1}). e.height).eventArgs[1])). } 69 GoogleMaps. e. ev.lat()). string. Convert.eventArgs[2].ToDouble(e.eventArgs[3].CultureInfo("en-US". } return js.Format("Window Size (px): ({0}. GAjaxServerEventOtherArgs e) { string js = string. e.width). ev.

etc. enableServerEvents debe estar activado).1 – 04/12/2008 . funciona muy bien usándolo dentro de un UpdatePanel. También podemos acceder a variables de sesión. Una de las diferencias más importantes es que con los serverEvent nativos sólo puede interactuar con el mapa devolviendo un string con Javascript.aspx.setupMap().ASP. Para ello no hay más que indicarlo con serverEventsType="AspNetPostBack" (Como siempre.NET tradicional. Usando el PostBack podemos devolver ese Javascript.0. Sin embargo. los serverEvent nativos son muchísimo más rápidos y eficientes. Además.Subgurim. GoogleMaps. pero además podemos interactuar directamente con el mapa (ver ejemplo).2. 70 Code.cs protected void Page_Load(object sender.aspx <cc1:GMap ID="GMap1" runat="server" serverEventsType="AspNetPostBack" enableServerEvents="true" OnClick="GMap1_Click" OnMarkerClick="GMap2_MarkerClick" /> Code.IsPostBack) { this.NET Postback Alternativamente a los serverEvents nativos del control GMaps. podemos forzar a que estos ejecuten un PostBack ASP.NET – Versión: 3. EventArgs e) { if (!Page. Viewstate. con lo que se recomienda el uso de estos siempre que sea posible.

IsAjaxPostBack) { // GMaps Ajax PostBack } } private void setupMap() { GLatLng latLng = new GLatLng(40. GAjaxServerEventArgs e) { GLatLng latLng = new GLatLng(40. GMap2.} if (GMap2. GMarker marker = new GMarker(latLng).0. return string. 10).Subgurim.resetInfoWindows(). GMap2.point.GZoom = 6.10).GCenter = latLng. GMap2.Empty. return string. "Clicked").2.Add(window).Add(marker). } protected string GMap2_Click(object s.Empty. GAjaxServerEventArgs e) { GMap2. GMap2. GMap2. } protected string GMap2_MarkerClick(object s.1 – 04/12/2008 . GInfoWindow window = new GInfoWindow(e.NET – Versión: 3.GZoom = 1.GCenter = latLng. } 71 GoogleMaps. GMap2.

como por ejemplo el del GMarker.Text.aspx. GMap1. GLatLng center = new GLatLng(44.2.Text. En éste podemos añadir iconos al centro del mapa. Code.StringBuilder sb = new System. el javascript añadido 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 método "ToString()" de elementos de nuestro control.Subgurim.aspx <cc1:GMap ID="GMap1" runat="server" /> <input type="button" id="Button1" value="Añadir 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. GoogleMaps.NET – Versión: 3. Lo veremos mejor en el ejemplo. Es decir. Esto es. con el CustomJavascript añadiremos el javascript que se ejecutará como respuesta (por ejemplo) al click de un botón.cs System.Custom Javascript Utilizaremos el "CustomJavascript" para añadir nuestro propio javascript.setCenter(center).StringBuilder().0. El CustomJavascript sirve para manejar eventos y modificar el mapa tras los eventos.1 – 04/12/2008 . borrar el último icono añadido o borrar todos los iconos que haya. 5).

sb. sb. sb.Append("function subgurim_Remove()").").AppendFormat("{0}. sb.Append(marker.2.Append("var active. sb.".".Append("}").GMap_Id)).GMap_Id). sb. GMarker marker = new GMarker(GMap1.AppendFormat("active = {0}.1 – 04/12/2008 .0.Append("function subgurim_Delete()").Append("function subgurim_Add()"). sb.ToString()). sb. 73 GoogleMaps. sb. sb.GMap_Id). sb. sb.Append("}"). sb.Subgurim.clearOverlays().Append("active = false.Append("active = false.Append("{").sb.".GMap_Id + ". GMap1.Append("{").ToString(GMap1.").getCenter()").NET – Versión: 3.removeOverlay(active).Append("{"). GMap1.ID)."). GMap1. sb.AppendFormat("{0}.Add(sb. sb.Append("}"). marker.

Subgurim. Para eso tenemos el CustomJavascript 74 Para ello deberemos conocer el javascript que propone la API de Google o utilizar el método "ToString()" de elementos de nuestro control.Custom Inside Javascript Utilizaremos el "CustomInsideJavascript" para añadir nuestro propio javascript. El CustomInsideJavascript sirve para añadir javascript que se ejecutará en la carga del mapa. por ejemplo.1 – 04/12/2008 . Es decir.aspx <cc1:GMap ID="GMap1" runat="server" /> <input type="button" id="Button1" value="Añadir 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()" /> GoogleMaps. como por ejemplo el del GMarker. Code. y nos permitimos combinar el CustomInsideJavascript con el CustomJavascript.NET – Versión: 3. Mediante el CustomJavascript creamos una función que añadirá iconos en ubicaciones aleatorios. Como os podéis imaginar. el CustomInsideJavascript añadido no podrá ser accedido por eventos como.0. Nuestro ejemplo es muy sencillo. pero como éste no puede iniciar el evento. utilizamos el CustomInsideJavascript para llamar por primera (y única) vez al código.2. la metodología seguida en el ejemplo supone el uso típico del CustomInsideJavascript: llamar a una función CustomJavascript en el momento se carga el mapa. el click de un botón.

0.lat() + Math. 8).0. sb.Text. GMarker marker = new GMarker( string.ToString()). sb.Append(marker. GMap1.aspx.Append("function addRandom()").Add("addRandom().GMap_Id)). GMap1.5.addCustomInsideJavascript("addRandom().Format("new GLatLng({0}.0. sb.Add(sb. sb.setCenter(center.").getCenter(). true).").5)".Text.Append("setTimeout('addRandom()'.Append("if (max-.Append("}").2. 1000)").Append("var max = 10.Code.random() .> 0)"). GLatLng center = new GLatLng(44.Subgurim. {0}.ToString(GMap1. GMap1.NET – Versión: 3.lng() + Math.". 75 GoogleMaps. GMap1.random() . sb. sb.cs System.StringBuilder sb = new System.getCenter().GMap_Id)). 5).1 – 04/12/2008 . sb.StringBuilder(). //GMap1.Append("{").

Subgurim.openInfoWindowHtml('Ejemplo de <b>infoWindow</b>'). GEvent. tenemos dos opciones: Usando javascript var marker_subgurim_Id = new GMarker(new GLatLng(10. lo que conseguimos con el método ToString de cada elemento es escribir el equivalente javascript marcado por la API oficial de Google.NET como los "eventos de cliente". y su funcionalidad es siempre la misma: traducir a javascript lo que significan.openInfoWindowHtml('Ejemplo de <b>infoWindow</b>'). 76 Como a la hora de utilizar funcionalidades del GoogleMaps.2.. Por último. Como vemos.1 – 04/12/2008 .addOverlay(marker_subgurim_Id). nos ahorramos aprender el javascript correspondiente.2. GoogleMaps. GListener. evita tener que averigurar el identificador javascript de cada elemento. Absolutamente todos los elementos que se puedan encontrar en el GoogleMaps. "eventos de servidor" o "custom javascript" suele ser necesario el uso del javascript correcto.NET – Versión: 3. "mouseover".2.22)). es extremadamente importante reseñar que a los métodos ToString hay que pasarles como parámetro el identificador de la fuente a la que se asignan.ToString(GMap1. en el propio código fuente del control. Usando el método ToString GInfoWindow window = new GInfoWindow( new GMarker(new GLatLng(10. "Ejemplo de <b>infoWindow</b>". GInfoWindow.mouseover). se usa continuamente.NET disponen del método ToString. my_GMap1subgurim_Id. y esto es muy importante.}). true.0.).. Por ejemplo. suele ser GMap1.GMap_Id).addListener(marker_subgurim_Id. Además. string resultado = window. en ocasiones se usa el método ToString de varios componentes del GoogleMaps. function() {marker_subgurim_Id. En líneas generales. si quisiéramos recrear el infoWindow con icono del ejemplo "InfoWindow con icono".Subgurim. el método ToString de cada elemento evitará tener que aprender el javascript de la API de Google.ToString Como habéis visto en varios ejemplos. Como habitualmente se trata del propio mapa de Google. my_GMap1subgurim_Id.Subgurim.NET (GMarker. hacemos uso de IntelliSense (por lo que escribir código es muy rápido) y evitamos tener que ir averiguando los identificadores javascript de los objetos.Subgurim. GLatLng.GMap_Id. De hecho. minimizando a su vez la necesidad de javascript. 22)).Event. etc.

Subgurim.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="True" OnClick="GMap1_Click" /> Code.GAjaxServerEventArgs e) { GMap gmap = new GMap(e. y luego podemos añadirle todo lo que queramos: controles.Controles.center) { GoogleMaps. "Cool!!". Basta con inicializar la clase GMap con el GMap_Id.0. El ejemplo es totalmente clarificador (clickar sobre el mapa): 77 Code.Add(window). gmap. etc.addMovement(1000.map). facilitamos cosas como el javascript que vamos a devolver en un server event. // GMarker and GInfoWindow GMarker marker = new GMarker(e. Gracias a esto.2.NET – Versión: 3.point + new GLatLng(25.1 – 04/12/2008 .ToString Con el método ToString de la clase GMap se puede recoger el javascript que va a producir nuestro mapa. infowindows. e.point). e. // Movement //gmap.aspx. true).cs protected string GMap1_Click(object s. markers.addMovement(1000. 38)).GMap. GInfoWindow window = new GInfoWindow(marker. //gmap.point).Subgurim.point != e. // Polylines if (e.

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

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

getGMapElementById
getGMapElementById... mmm, suena bien, ¿no? Además, funciona tal y como suena: recoge el identificador javascript de las elementos que se han añadido al mapa (normalmente markers), de modo que el límite de su uso lo pone vuestra imaginación ;) Puede accederse tanto mediante un método estático de la clase GMap, como mediante un método 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 – Versión: 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

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

NET: • 81 • • Javascript: Creamos el objeto Store de un modo similar a éste: var store = new Store('{0}_Store'). value)" y un "Get(Key)".NET .store. string>. podemos utilizar el GAjaxServerEventArgs llamando a e. A la varible store le podemos hacer un "Set(key.0. ASP. Store es una funcionalidad muy potente que nos permitirá compartir información entre cliente.Subgurim. En el ejemplo vemos cómo se utiliza el store en javascript (un evento de cliente).store). en un serverEvent y en ASP. GoogleMaps. Suele usarse en los eventos de cliente.NET – Versión: 3.NET: cada instancia de GMaps tiene una propiedad Store. servidor y los serverEvents.1 – 04/12/2008 .Store Para trabajar con la clase Store es imprescindible activar la propiedad "enableStore". con una "key" y un "value".store es un Dictionary<string.2. que podemos utilizar siempre que queramos en lado de servidor (aunque en el serverEvent sea aconsejable usar e. string> normal de ASP. serverEvents: cuando estamos en un serverEvent. Funciona como un Dictionary<string. e.

store. GListener.Subgurim. }} ".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.NET – Versión: 3.2.GMap_Id))).addControl(new GControl(GControl.aspx.GMap_Id. GMap2. } GoogleMaps.addListener(new GListener(GMap2.cs private static int _i = 0.random().zoomend. public static int i { get { return _i++.Set(Math.Format(@" function(oldZoom. EventArgs e) { if (!Page.SmallZoomControl)). } } protected void Page_Load(object sender. GMap2.0. string.Event.82 Code. oldZoom + '-' + newZoom).IsPostBack) { GMap2.1 – 04/12/2008 . newZoom) {{ var store = new Store('{0}_Store').preBuilt.

} 83 GoogleMaps.0.ToString()).Format("alert('{0} Store items: {1}')".1 – 04/12/2008 .Store.map.ToString().Count).Subgurim. DateTime.store[i. } protected string GMap1_Click(object s. e. e.ToString()] = DateTime.Now.Add(i.Now.store.GMap1.NET – Versión: 3. GAjaxServerEventArgs e) { e.ToString(). return string.2. Store c = GMap1.Store.

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 ubicación que buscamos. buttonText: el texto del botón. usaremos la clase con ese mismo nombre: GeoCoding. o mapBlowUp: muestra un mapBlowUp. muestra su código. Encontraremos el significado de los códigos de error en http://code.com/apis/maps/documentation/reference.html#GGeoStatusCode GoogleMaps. viewport: usando GLatLngBounds marca la zona de referencia sobre la que se quiere obtener el resultado. "Gibraltar" o "Universidad Politécnica de Valencia") y GoogleMaps. que como sabéis es una ventana emergente mostrando el lugar buscado con zoom. Es la elegida por defecto. errorText: es el mensaje que aparecerá en una ventana de alerta si no se encuentra lo que se busca. Por defecto vale ":(".google. Se puede incluir HTML.. infoText: el texto previo al cuadro de texto.NET – Versión: 3. Por defecto "OK".2.1 – 04/12/2008 . showErrorCode: en caso de ocurrir un error. openedOnLoad: es aplicable si elegimos mostrar un infoWindow o un mapBlowUp.Subgurim. un ejemplo vale más que mil palabras! Para hacer uso del GeoCoding. o icon: simplemente muestra un icono en la ubicación buscada. baseCountryCode: indicando el código del país obtendremos el resultado en base a su cercanía con éste.GeoCoding ¿Qué es el GeoCoding? Con el GeoCoding buscaremos un sitio (por ejemplo "Las Ventas.. Se compone de tres elementos: o infowindow: muestra un infoWindow con la dirección completa como texto. Madrid"..Subgurim. estarán abiertos por defecto o deberemos presionar un icono para el caso. Por defecto es "GeoCode". como siempre.0. Indica si cuando se muestra el sitio.NET nos devolverá el evento que hayamos seleccionado en la ubicación que nos dé como resultado. Por defecto es true.

GMap1.2. geoCoding.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" /> Code. */ GMap1.show = GeoCoding. geoCoding.Subgurim.preBuilt.infowindow. GMap1.NET – Versión: 3. geoCoding. GeoCoding geoCoding = new GeoCoding().infoText = "Buscar GeoCode". geoCoding.errorText = "No tá".addControl(new GControl(GControl.cs /* Con esto bastaría para que funcionara!!! GMap1.LargeMapControl)).ShowEnum.buttonText = "Buscar".85 Code.aspx.addGeoCode(new GeoCoding()).addGeoCode(geoCoding).openedOnLoad = true.GZoom = 9. geoCoding.0. GoogleMaps.

Los atributos que debe tener la función (por orden) son: un GMarker. G_GOOGLE_BAR_RESULT_LIST_INLINE (por defecto) las muestra en una tabla y G_GOOGLE_BAR_RESULT_LIST_SUPPRESS muestra sólo una con los botones de "anterior . no hay más que hacer clic sobre la lupa situada al lado del icono de Google que aparece en el mapa. onGenerateMarkerHtmlCallback: Función que se ejecuta cuando se va a abrir el infowindow con los resultados.GeoCoding 2 Un modo extremadamente sencillo de ofrecer geocoding es simplemente usando la "GoogleBar" que GoogleMaps ofrece. onSearchCompleteCallback: Define una función que se ejecutará cuando la búsqueda devuelve resultados.siguiente".NET – Versión: 3. Por defecto el target es "_Blank". onMarkersSetCallback: función que será llamada cuando se termine la creación de los markers en el mapa. suppressZoomToBounds: desactiva el comportamiento por defecto de acercarse a los resultados. Se ejecuta antes de mostrar los resultados en pantalla. Por defecto está desactivado. suppressInitialResultSelection: Si está activado (y lo está por defecto) no muestra el primer resultado en el mapa. La función tendrás los atributos de la siguiente forma: {result: GlocalSearch. Una vez activado. Tan solo hay que añadir la GGoogleBarOptions al mapa y usar las propiedades que se requieran: 86 • • • • • • • • • showOnLoad: Indica si se despliega el cuadro de text de búsqueda. GoogleMaps. marker: GMarker}.2. y debe devolver un string HTML que se mostrará en el info window.1 – 04/12/2008 . linkTarget: Indica el "Target" de los enlaces mostrados al hacer la búsqueda. resultList: Indica cómo se muestran los resultados de la búsqueda. y un GlocalSearchResult. onIdleCallback: Define una función que se ejecutará cuando la búsqueda no devuelve resultados. el string HTML generado.0.Subgurim.

aspx <cc1:GMap ID="GMap1" runat="server" /> Code. GMap1.onSearchCompleteCallback = "alert('onSearchCompleteCallback'). GoogleMaps.aspx. googleBarOptions. googleBarOptions.onMarkersSetCallback = "alert('onMarkersSetCallback').resultList = GGoogleBarResultListEnum.showOnLoad = true.linkTarget = GGoogleBarLinkTargetEnum.2.Subgurim.0.".NET – Versión: 3. googleBarOptions.87 Code.cs GGoogleBarOptions googleBarOptions = new GGoogleBarOptions()._blank.supress. googleBarOptions. googleBarOptions.Add(googleBarOptions).1 – 04/12/2008 .".

La definición de los mensajes de estado las encontramos aquí: http://code. necesitaremos el Geocoding avanzado. no hay más que llamar a GMap1. kml.com/apis/maps/documentation/reference. La llamaríamos así: GMap. Podemos compararla con el ejemplo de código que proveemos y veremos que las clases y sus propiedades son análogas al XML: <kml> <Response> <name>1600 amphitheatre mtn view ca</name> <Status> <code>200</code> <request>geocode</request> </Status> GoogleMaps. json y csv). GoogleKey: sólo necesario en caso de usar los métodos estáticos.Subgurim.html#GGeoStatusCode La clase Geocode la hemos estructurado de manera idéntica al XML que nos provee Google... json y csv).1 – 04/12/2008 . Si no lo definimos nos devolverá el tipo Geocode.2. GeoCode. Veamos un ejemplo de un XML de Google si buscáramos "1600 amphitheatre mtn view ca". Por una parte está el Geocode (clase estructurada de manera idéntica al XML que Google nos provee) y por otra un string del que podemos elegir su modo (xml. viewport: usando GLatLngBounds marca la zona de referencia sobre la que se quiere obtener el resultado.code accederemos al mensaje de estado de la búsqueda.geoCodeRequest(. por ejemplo para saber qué error ha ocurrido.getGeoCodeRequest(. baseCountryCode: indicando el código del país obtendremos el resultado en base a su cercanía con éste. Lo único que hay que tener en cuenta es que deberemos pasarle como parámetro nuestro Key de la API de Google.google.NET – Versión: 3. Pero también podemos acceder a un método estático.outputEnum output: donde indicaremos el tipo de datos que queremos que nos devuelva (xml.GeoCoding Avanzado Para recoger información detallada del sitio que estamos buscando.. kml.. Hay dos modos de ejecutar esta acción: 88 • • Si tenemos un GMap instanciado en nuestra página. Accediendo al campo status. que no requiere que el GMap esté en la página. Estos son los parámetros que podemos pasarle a las funciones: • • • • • Query: lo que estamos buscando.0. Usarlo es muy sencillo. El método estático devuelve dos tipos de datos.) [geoCodeRequestes obsoleto desde la versión 3]. Básicamente consiste en pasarle un lugar como parámetro y recoger toda la información que la API de Google nos provee.).

PostalCodeNumber: GoogleMaps.Country.AddressDetails.accuracy: 4 geocode.Country.0.423021.Locality.SubAdministrativeArea .AdministrativeAreaNa me: Murcia geocode.AddressDetails.Placemark.Country.AddressDetails.AdministrativeArea. Mountain View.SubAdministrativeArea .Country.AddressDetails.SubAdministrativeAreaName: Murcia geocode.AdministrativeArea.Placemark.Placemark.Country.CountryNameCode: ES geocode.Placemark.request: geocode geocode.<Placemark> <address> 1600 Amphitheatre Pkwy.37.address: San Pedro del Pinatar.Placemark.AddressDetails.LocalityName: San Pedro del Pinatar geocode.NET – Versión: 3.Placemark.AdministrativeArea.083739.AddressDetails. 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.AdministrativeArea.SubAdministrativeArea .code: 200 geocode.1 – 04/12/2008 . CA 94043.name: San Pedro del Pinatar geocode.2. Spain geocode.Status.0</coordinates> </Point> </Placemark> </Response> </kml> 89 • • • • • • • • • • geocode.Placemark.Status.Locality.Subgurim.PostalCode.

Placemark.Subgurim.Append("</li>"). sb.7915859 Code.Configuration.StringBuilder sb = new System.0. sb.Status. sb. GoogleMaps.aspx <asp:Literal ID="Literal1" runat="server">Buscar una dirección</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. sb.AppSettings.request).request"). sb.Append("</li>"). sb. sb.Text.2.Locality.Status. sb.StringBuilder(). sb.name"). System.Append("geocode. sb.name). sb.SubAdministrativeArea . GeoCode geocode = GMap.NET – Versión: 3.Country.Get("googlemaps.Append("<ul>").Text.Append("<li>"). sb. sb. sb.Status. sb.valid) { sb.Append(geocode.code").Append("</i>: ").• • geocode.-0.net").Append(geocode.cs protected void bt_Buscar_Click(object sender. if ((null != geocode) && geocode.Thoroughfare. Key).Status.IsNullOrEmpty(tb_Buscar.Append("geocode.ConfigurationManager.AdministrativeArea.geoCodeRequest(tb_Buscar. EventArgs e) { if (!string.Text.aspx.Append("<li>"). sb.Placemark.ThoroughfareName: geocode.Append("</i>: ").8350404. sb.AddressDetails.Append("<i>").Append("<i>").Append("</i>: ").Append(geocode.Append("<i>").subgurim.Append("<li>").coordinates: 37.Text)) { string Key = System.1 – 04/12/2008 .code).Append("geocode.

Append("<li>").Append("</i>: "). sb.accuracy").AddressDetails.CountryNameCode).Append("geocode. sb. sb.Country. sb. sb.AddressDetails.Append("</i>: ").Append(geocode. sb.SubAdministrative Area. sb. sb. sb.Append("<i>"). sb.AdministrativeArea Name). sb. sb.AddressDetails.0.Append("</i>: ").AdministrativeAre aName"). sb.Append("</i>: "). sb.Append("<li>").LocalityName).Append("</i>: ").AdministrativeArea. sb.Append("geocode.Placemark. sb. sb.Append("</li>").Placemark.Append("geocode. sb.Append("<i>").Append("<li>").address).Append("</li>").Append("<i>").Country.Append("<li>").Country. sb.Append("<li>"). sb.Subgurim. sb.AdministrativeArea.Placemark.sb.Append(geocode. sb.Append("<li>").Append("<i>").AddressDetails. sb. sb.AdministrativeArea.Locality.AdministrativeArea.SubAdministrativeAreaName"). sb.NET – Versión: 3.Country. sb.SubAdministrativeAreaName). sb.Placemark.Placemark.AddressDetails.address"). GoogleMaps.Country.accuracy).Append("<i>").Country.Placemark.Append(geocode.Append("</li>"). sb. sb.AddressDetails.SubAdministrative Area. sb.Placemark.AddressDetails.Placemark.CountryNameCode").AdministrativeArea.Append(geocode.AddressDetails.Append("geocode.Locality.Placemark. sb. sb.Append("</i>: ").Append("</li>").Placemark.AdministrativeArea.Append("</li>").SubAdministrative Area.Country. sb. sb.Append("geocode.Append("geocode.1 – 04/12/2008 91 .Placemark.2.Append("<i>").Append(geocode.SubAdministrative Area.Country. sb.Append("</li>").LocalityName").AddressDetails.AddressDetails.Append(geocode.Placemark.

Append("</i>: "). 92 sb.Append("</ul>").Append("</li>").Text = sb. sb. sb.0. sb.AdministrativeArea.Append("geocode.Append("<i>").ToString()).Append("</li>").Thoroughfare.SubAdministrative Area.PostalCodeNumber"). sb.Append("</li>"). sb.Placemark.AddressDetails. sb. sb. sb.Placemark.Append(geocode.AddressDetails.Country.coordinates.Placemark. sb. lb_Buscar. sb.Placemark.Placemark.Append("geocode.Append("Ubicación no encontrada").Country.AdministrativeArea.Append("<i>").Country.coordinates").ToString(). sb.Append("</i>: ").AddressDetails. sb.Append(geocode.Append("<li>").Append("</li>"). sb.Thoroughfare. sb. sb.SubAdministrative Area.SubAdministrative Area.AddressDetails.Append("<li>").Append("</i>: ").Country.Locality.Locality.PostalCode.AdministrativeArea.2.Subgurim.sb. sb. sb.PostalCodeNumber).Placemark.AdministrativeArea.Append("geocode.Append("<li>").ThoroughfareName"). } else sb.NET – Versión: 3.Locality.1 – 04/12/2008 . sb.Locality.Append("<i>").ThoroughfareName).PostalCode. } } GoogleMaps.Append(geocode.SubAdministrative Area.

Al hacer click sobre un punto del mapa. No hay más que instanciar la clase inverseGeocodingManager. y usarlo es muy sencillo..Geocoding Inverso NOTA: En el geocoding inverso se utilizan las servicios Web de geonames. pero.Subgurim. countryName: nombre del país del punto indicado. N: cantidad máximo de lugares cercanos que queremos como respuesta. GoogleMaps. pues dispone de varios servicios Web relacionados con la geolocalización. language: idioma en que queremos la respuesta. ordenadas de más a menos cercano al punto que hemos señalado.. initialPointElevation: altura sobre el nivel del mar (en metros) del punto indicado. Manejando éste. y además hacemos el "truco" de lanzar una infowindow mientras se viaja y se vuelve del servidor.2.0. Y tras hacerlo llamaremos a inverseGeoCodeRequest. haciendo parecer que estamos esperando la respuesta. nearestPlaceElevation: altura sobre el nivel del mar (en metros) del lugar habitado más cercano al punto que hemos indicado. nearestPlacePoint: coordenadas del lugar habitado más cercano al punto que hemos indicado.NET – Versión: 3. ¿y si queremos obtener información de un lugar sólo a partir de sus coordenadas geográficas? Para ello tenemos el GeoCoding inverso. Recomendamos altamente esta página. initialPoint: el punto que hemos indicado.1 – 04/12/2008 . recogemos la información que nos da el geoCoding inverso y la mostramos en un infoWindow. bajo licencia Creative Commons. El ejemplo mostrado a continuación es un ejemplo típico del uso del geoCoding inverso. radius: radio en kilómetros sobre el que buscar lugares cercanos.org. distance: distancia en Kilómetros entre el punto indicado y el lugar habitado más cercano. se ejecuta un evento de servidor. La clase inverseGeocoding consta de las siguientes propiedades de interés: • • • • • • • • name: nombre del lugar más cercano al punto indicado. que consta de 4 parámetros: • • • • 93 point: el punto sobre el que queremos información. habilitamos la función "goTo" añadiendo un CustomJavascript que nos hará viajar al lugar más cercano. que nos devolverá un listado genérico de instancias de la clase inverseGeocoding. Adicionalmente. Hasta ahora hemos visto cómo obtener información de un lugar a partir su nombre. countryCode: código ISO del país del punto indicado.

\"><blink>Loading. GMap1.setZoom(11).preBuilt.Append("function(marker. "<div style=\"height:140px.GMap_Id. sb.94 Code. sb.Append(window.AppendFormat("{0}. sb.GMap_Id).aspx. StringBuilder sb = new StringBuilder(). } } private void arreglarMapa() { GMap1..Subgurim.1 – 04/12/2008 .addListener(new GListener(GMap1.ToString(GMap1. GMap1.</blink></div>").addControl(new GControl(GControl.LargeMapControl)).".0.GMap_Id)). GInfoWindow window = new GInfoWindow(latlng. GLatLng latlng = new GLatLng("point").Event. GMap1.2. point).click.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnClick="GMap1_Click" /> Code. GMove move = new GMove(1.ToString())).arreglarMapa().IsPostBack) { this.Append("}"). point) {"). GLatLng point = new GLatLng("point"). EventArgs e) { if (!Page.cs protected void Page_Load(object sender. GoogleMaps. sb.enableHookMouseWheelToZoom = true. sb2.. StringBuilder sb2 = new StringBuilder(). GListener. sb2.Append("function goTo(point){").NET – Versión: 3.

Append("<br />").NET – Versión: 3. sb. sb.sb2.addCustomJavascript(sb2. sb.1 – 04/12/2008 95 .Append("<div align=\"left\">").Round(geo.Append("<br />").AppendFormat("Place name: "<i>{0}"</i> ".Empty.ToString(e.Nearest Place distance (Km): "<i>{0}"</i>". sb. geo.AppendFormat("Click point .AppendFormat("Elevation: "<i>{0}"</i>".ToString()). geo. sb. sb.Append("}").countryName. geo.ToString(GMap1.AppendFormat("Elevation: "<i>{0}"</i>". inverseGeocoding iGeos = igeoManager.Append(move.Append("</div>"). Math. return window.Subgurim.AppendFormat("Country Name (Code): "<i>{0} ({1})"</i>". geo.name). } else return string.point. sb.inverseGeoCodeRequest(). GMarker marker = new GMarker(point). "es").map).Append("<br />"). sb.Append("</div>"). sb. geo.Append("<br />").ToString().initialPointElevation. sb.ToString(GMap1.AppendFormat("Point: "<i>{0}"</i>". sb. GMap1. StringBuilder sb = new StringBuilder(). sb.Append("<br />").countryCode).Append(marker.0. sb. sb2.Append("<div align=\"left\">"). } protected string GMap1_Click(object s. sb.nearestPlaceElevation > -9000 ? geo. GInfoWindow window = new GInfoWindow(e.Append("<br />").Append("<br />").2.GMap_Id)). sb.distance. sb.AppendFormat("Point: "<i>{0}"</i>".geonames. } GoogleMaps.ToString() : "No info"). sb. geo.nearestPlacePoint. sb.ToString() : "No info").point. sb.nearestPlaceElevation. GAjaxServerEventArgs e) { inverseGeocodingManager igeoManager = new inverseGeocodingManager(e.initialPointElevation > -9000 ? geo. sb.Append(""<b>Click point"</b>"). 3)). sb.Count > 0) { geo = iGeos.GMap_Id)).initialPoint. if (iGeos.Append("<br />"). geo. sb2.ToString()).Append("<br />"). sb.geonames[0]. sb. geoName geo.ToString()).Append(""<b>Nearest Place "</b>"). true).

GMap1. Esa propiedad "url" será la dirección en que se encuentra el fichero KLM o GeoRSS.NET.tao.Subgurim.0.Subgurim.addGGeoXML(new GGeoXml("http://api.com/services/feeds/groups_pool. GMap1.NET – Versión: 3.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. No hay más que usar la clase GGeoXml que contiene una única propiedad (url) y añadir una instancia de ésta al GMap. -102.2.496675.setCenter(new GLatLng(49.kml")).65625).gne?id=322338@N20&format=rss _200&georss=1")).com/blackbirds.flickr.cs GMap1. 3). GoogleMaps.googlepages. 96 Code.aspx.1 – 04/12/2008 .GGeoXml Leer archivos KLM o GeoRSS es ahora muy sencillo con el GoogleMaps.addGGeoXML(new GGeoXml("http://nigel.

setCenter(new GLatLng(42. GMap1. 3).0. GoogleMaps. pero sólo con activar enableGTrafficOverlay se puede acceder a la información de tráfico.2.aspx.GTrafficOverlay De momento sólo sirve en Estados Unidos.cs GMap1.-95).Subgurim.NET – Versión: 3. 97 Code.enableGTrafficOverlay = true.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" /> Code.

Code.2. Por defecto es "true".aspx <cc1:GMap ID="GMap1" runat="server" /> Code.1 – 04/12/2008 . GMap1.aspx. cuadros de texto y el botón. fromText: texto que describe el punto de inicio. En este ejemplo estudiaremos las propiedades más sencillas y en el siguiente las más avanzadas: 98 • • • • • • autoGenerate: añade automáticamente la funcionalidad de GDirections.NET – Versión: 3. GoogleMaps. gdirection. Por defecto vale "To: ". insertando textos. toText: texto que describe el punto de llegada.cs GDirection gdirection = new GDirection(true).errorMessage = "Ups". buttonText: texto que describe botón para ejecutar el evento.0. clearMap: Booleano que indica si se borra el mapa entre una llamada y otra.addGDirection(gdirection). Por defecto vale "From: ".Subgurim. errorMessage: Mensaje mostrado cuando ocurre un error.GDirections Basic Observa lo sencillo que es añadir soporte de GDirection en el mapa: ¡sólo se necesita una simple línea de código! Pero obviamente se puede mejorar haciendo uso de otras propiedades del GDirection. Por defecto vale "Go".

Si activamos esta opción. GoogleMaps. preserveViewport: Por defecto. Además. "fr-CA". etc. fromElementId: el ID del cuadro de texto que corresponde al punto de salida.0. No tenemos más que añadir al mapa los cuadros de texto de salida y de llegada. tratará de evitar las autopistas siempre que sea posible. "en-GB". no tenemos más que poner a false la propiedad "autoGenerate". se puede definir la propiedad "locale" para indicar la Lengua-Cultura en que estamos trabajando.2. como conducción (por defecto) o a pie.NET – Versión: 3.1 – 04/12/2008 . basta con definir las siguientes propiedades para el correcto funcionamiento: • • • • • • • • 99 buttonElementId: el ID del botón. el botón y un "div" donde irá la descripción de nuestro viaje. travelMode: el modo de viaje. de modo que queramos diseñar una interfaz más personal. Con todo y con esto. Debe ser un "<input type=button />" NO un "<asp:Button />". divElementId: el ID del div donde irá la descripción del viaje.Subgurim. avoidHighways: si le damos true. cuando al buscar una dirección el mapa se centra en el resultado. Por ejemplo "es-ES".GDirections Avanzado Si no queremos autogenerar el soporte para GDirection. Pero GMaps sigue haciendo casi todo nuestro trabajo. el mapa no se mueve de donde estemos (a no ser que nunca hayamos definido una localización inicial). locale: string que define la cultura. toElementId: el ID del cuadro de texto que corresponde al punto de salida.

direction. } } GoogleMaps. EventArgs e) { if (!Page. direction.2.ClientID.0. direction.aspx. direction.ClientID.divElementId = "div_directions".1 – 04/12/2008 .100 Code.cs protected void Page_Load(object sender.autoGenerate = false.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.IsPostBack) { GDirection direction = new GDirection().Subgurim. direction.locale = "es-ES". direction.toElementId = tb_endPoint.NET – Versión: 3.buttonElementId = "bt_Go".Add(direction). // Optional // direction.fromElementId = tb_fromPoint.clearMap = true. GMap1.

aspx.0.longitude).latitude. Para ello sólo hay que usar el código del ejemplo y descargarse la base de datos de MaxMind (descargar directa).UserHostAddress).aspx <cc1:GMap ID="GMap1" runat="server" /> Code.2. LookupService service = new LookupService(databaseFile).GeoIP Gracias a MaxMind disponemos de la Geolocalización por IP: a partir de una IP conseguiremos datos sobre su localización. 10).getLocation(Request.setCenter(latlng.Format(@" <div style=""text-align:left""> <b>GEOIP PROPERTIES</b> <br /> <b>Area Code</b>: {0} <br /> <b>City</b>: {1} <br /> GoogleMaps.MapPath("~/App_Data/GeoIP/GeoLiteCity. 101 Code. GMap1. entre otros la latitud y la longitud.Subgurim.cs string databaseFile = Server. if (location != null) { GLatLng latlng = new GLatLng(location.dat"). string infoWindowHTML = string. location.1 – 04/12/2008 . Location location = service.NET – Versión: 3.

region). location. location. } GoogleMaps.countryName. infoWindowHTML)). location.0.NET – Versión: 3. location.1 – 04/12/2008 . location.countryCode.city. GMap1.Add(new GInfoWindow(new GMarker(latlng). location.postalCode. location.Subgurim.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> ".dma_code.2.area_code.

1 – 04/12/2008 .0. 103 GoogleMaps.Subgurim. Usando el DragZoomControl podremos recuadrar una zona específica del mapa sobre la que se hará un zoom.NET – Versión: 3.2.DragZoomControl El DragZoomControl forma parte del GMaps Utility Library.

dragZoomCallbacks.backButtonHTML = "Go back".dragZoomOtherOptions = dragZoomOtherOptions.dragZoomBoxStyleOptions = dragZoomBoxStyleOptions.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.NET – Versión: 3. GMap1.cs DragZoomControl dragZoomControl = new DragZoomControl().2.0. GControl dragzoom = new GControl(dragZoomControl.aspx. DragZoomOtherOptions dragZoomOtherOptions = new DragZoomOtherOptions().dragZoomCallbacks = dragZoomCallbacks.position. dragZoomControl.Top_Left)). DragZoomCallbacks dragZoomCallbacks = new DragZoomCallbacks().104 Code. dragZoomControl. DragZoomBoxStyleOptions dragZoomBoxStyleOptions = new DragZoomBoxStyleOptions(). GoogleMaps. dragZoomOtherOptions.opacity = 0.Subgurim.5.Red. dragZoomBoxStyleOptions.buttonclick = "function(){alert('Button Click')}". dragZoomOtherOptions. new GControlPosition(GControlPosition .fillColor = Color. dragZoomOtherOptions.1 – 04/12/2008 .Add(dragzoom).backButtonEnabled = true. dragZoomBoxStyleOptions.buttonHTML = "Zoom". dragZoomControl.

GoogleMaps.span = new GLatLng(7.com/svn/trunk/markers/circular/greencirclemarker. -7). 7). icon.options.image = "http://gmapssamples.labelOffset = new GSize(-4. icon. GIcon icon = new GIcon().setCenter(latLng). labeledMarker. labeledMarker.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" /> Code. LabeledMarker labeledMarker = new LabeledMarker(latLng). labeledMarker.icon = icon. 16).LabeledMarker El LabeledMarker forma parte del GMaps Utility Library.iconSize = new GSize(32.options. icon.cs GLatLng latLng = new GLatLng(50. 5). icon.labelText = "S".png". "You can use the Labeled Marker a s any other marker").infoWindowAnchor = new GPoint(25. GInfoWindow window = new GInfoWindow(labeledMarker.2.0. El LabeledMarker nos permite añadir letras a los iconos de Google Maps. 32). GMap1.Add(window). 10).Subgurim.NET – Versión: 3. GMap1.options.aspx.iconAnchor = new GPoint(16. 105 Code.googlecode. StaticGMap1.

Top_Right)).0.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.NET – Versión: 3. -122)). El ExtMapTypeControl es una alternativa opensource a los controles que nos permiten elegir el tipo de mapa.ExtMapTypeControl El ExtMapTypeControl forma parte del GMaps Utility Library. GMap1. new GControlPosition(GControlPosition.1 – 04/12/2008 .cs GControl extMapType = new GControl(new ExtMapTypeControl(true. true).Subgurim. 106 Code. GoogleMaps.2. GMap1.addControl(extMapType).position.setCenter(new GLatLng(47.

2. "You can use the Map Icon Maker as any o ther marker"). icon).flatIconOptions 107 Una vez establecida cualquiera de estas propiedades. 10).NET – Versión: 3.Add(window). GMap1.setCenter(latLng. GoogleMaps.markerIconOptions = new MarkerIconOptions(50. 50.MapIconMaker El MapIconMaker forma parte del GMaps Utility Library.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.1 – 04/12/2008 . Para ello podemos utilizar tres propiedades diferentes: . GMarker marker = new GMarker(latLng.aspx. Consiste en crear iconos configurables.cs GLatLng latLng = new GLatLng(50. se sobreescribirá cualquier cosa que le hayamos hecho previamente al GIcon.0.Subgurim. Color.Blue). icon. Code.labelMarkerIconOptions . 4).markerIconOptions . GIcon icon = new GIcon(). GMap1. GInfoWindow window = new GInfoWindow(marker. GIcon icon2 = new GIcon().

FlatIconOptions. GMap1.Add(window2). icon2).0. -3). GMap1.icon2.Black.Gold. "You can use the Map Icon Maker as an y other marker").flatIconShapeEnum. GMarker marker3 = new GMarker(latLng + new GLatLng(-3.White.Green).NET – Versión: 3. "B".White. Color. GInfoWindow window2 = new GInfoWindow(marker2.Red. "You can use the Map Icon Maker as an y other marker"). icon3.Add(window3).2. GIcon icon3 = new GIcon(). " A".flatIconOptions = new FlatIconOptions(25. icon3). 3).roundedrect). Color. GMarker marker2 = new GMarker(latLng + new GLatLng(3. 25. GInfoWindow window3 = new GInfoWindow(marker3. Color.labeledMarkerIconOptions = new LabeledMarkerIconOptions(Color. Color.1 – 04/12/2008 . 108 GoogleMaps.Subgurim. Color. 1 5.

pues no hay más que llamar al método "AddMarkerTracker(. GoogleMaps.1 – 04/12/2008 . Lo aplicamos a un GMarker normal. Su uso es muy sencillo. marker.GCenter = latLng + new GLatLng(8..AddMarkerTracker().MarkerTracker El MarkerTracker forma parte del GMaps Utility Library.)" del marker en cuestión.Add(marker).aspx.0. GMap1. GMap1.NET – Versión: 3.cs GLatLng latLng = new GLatLng(40..aspx <cc1:GMap ID="GMap1" runat="server" /> Code. de modo que cuando este GMarker quede fuera de la vista del mapa una flecha (totalmente configurable con las MarkerTrackerOptions) apuntará a su ubicación. GMarker marker = new GMarker(latLng).2. 109 Code. 8). 0).Subgurim.

Add(new GMove(1500.crosshair. GLatLng ll2 = new GLatLng(39.0. GMap1.). para añadir llamábamos a addMovement(. GMap1.. 110 Code.2. GoogleMaps. 0). GMap1.).Add(new GCustomCursor(cursor.cs GLatLng ll1 = new GLatLng(41. sin más que llamar a Add(.NET – Versión: 3.SmallMapControl)). siendo el parámetro que le demos a la función lo único importante..preBuilt. "Hello!!")).Add Genérico Para añadir cualquier elemento al GMap.Add(new GControl(GControl.TextualOnClickCoordinatesControl. Simplemente veamos el ejemplo.. 1).help)). Por ejemplo.. hasta el momento teníamos una función específica que se encargaba de ello.Add(new GControl(GControl. ll2)). Aún manteniendo la compatibilidad con versiones previas a la v1..4.extraBuilt.position. ahora tenemos otro modo de añadir cualquier tipo de elemento.1 – 04/12/2008 .Add(new GInfoWindow(ll1.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. para añadir un control llamábamos a addControl(.aspx..Subgurim. y así con prácticamente la totalidad de elementos posibles. new GControlPosition(GControlPosition.Top_Right))). cursor. GMap1.). GMap1.

Add(new GMove(2000. 111 GoogleMaps. GMap1.0.Subgurim.Add(new GeoCoding()).1 – 04/12/2008 . ll1)).GMap1.NET – Versión: 3.2.

Define a qué latitud y longitud saltará el mapa. deltaY: Incremento en Y que sufrirá el mapa.aspx. en lugar de dar el salto de golpe.1 – 04/12/2008 .addMovement(move).NET – Versión: 3.0. Una vez definido el movimiento.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. De GMove se definen 4 propiedades: • • 112 • • deltaMiliseconds: cantidad de milisegundos que se dejarán entre la anterior animación (si existiera) y la que estamos definiendo. donde una unidad es media pantalla. donde una unidad es media pantalla. goTO: propiedad del tipo GLatLon. GMap1. 1. Un mapa puede tener tantos movimientos como queramos y se llevarán a cabo según el orden en el que los hayamos añadido al mapa. se añadirá al mapa mediante el método addMovement.cs GMove move = new GMove(500.2.Subgurim.Movimiento y Animación Para trabajar con movimiento y animaciones. NOTA: Cuando el inicio y el final de un movimiento están lo suficientemente cercanos. se ignorarán los valores dados a deltaX y deltaY. Si se define goTO. -1). GoogleMaps. Code. utilizaremos la clase GMove. el mapa se deslizará. deltaX: Incremento en X que sufrirá el mapa. tal y como se muestra en el ejemplo.

move2. GMap1.Subgurim. 44).GMove move2 = new GMove().NET – Versión: 3.0. 113 GoogleMaps. GMap1.addMovement(new GMove(2500.addMovement(move2). GMap1.addMovement(new GMove(1500.2.1 – 04/12/2008 . 3)). new GLatLng(51.goTo = new GLatLng(51. 20))). move2.deltaMiliseconds = 2500. 2.

GLatLngBounds El GLatLngBounds representa un rectángulo dentro del mapa. isFullLat: nos dice si el rectángulo se extiende desde el polo sur hasta el polo norte.0. containsBounds(GLatLngBounds): nos dice si el rectángulo pasado como parámetro contiene al rectángulo.2.1 – 04/12/2008 . toSpan: devuelve el GLatLng que representa las coordenadas del rectángulo. getNorthEast: devuelve el GLatLng corresponiente a la coordenada noreste. contains(GLatLng): nos dice si el GLatLng pasado como parámetro está dentro del actual rectángulo. Además con el método estático GMap1. isEmpty: nos dice si el rectángulo está vacío. marcado por los extremos suroeste (sw) y noreste (ne). extend(GLatLng): amplia el rectángulo de modo que el GLatLng quede contenido dentro de él. GoogleMaps. GLatLngBounds dispone de varios métodos que pueden llegar a ser extremadamente útiles para realizar algunas operaciones con nuestros mapas: 114 • • • • • • • • • • • • equals(GLatLngBounds): nos dice si el GLatLngBounds pasado como parámetro es igual al del rectángulo.getBoundsZoomLevel(latlngbounds) se obtiene el mayor zoom para el cual se visualiza toda el área definida por el latlngbounds. getSouthWest: devuelve el GLatLng corresponiente a la coordenada suroeste.Subgurim. isFullLng: nos dice si el rectángulo se extiende a lo largo de toda la longutid terrestre. intersects(GLatLngBounds): nos dice si el rectángulo pasado como parámetro intersecta al rectángulo.NET – Versión: 3. getCenter: devuelve la coordenada central del rectángulo.

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

Polylines. Si no se pone ningún nombre. PolygonsAndMarkers y PolylinesAndMarkers Como tanto el GPolygon y el GPolyline son muy configurables. valdrá "lat". Por ejemplo: 6.Subgurim. Por ejemplo 12. Éste funciona igual que el de cualquier otro elemento que soporte DataSource como un ListBox. Le podemos asignar los siguientes campos ("Fields"): 116 • • • • • • • • • DataLatField: indica el nombre del campo que contiene el "double" con la latitud del punto. debemos indicar el nombre del campo que contiene el anchor de la imagen. DataLngField: indica el nombre del campo que contiene el "double" con la longitud del punto. que corresponderá con el valor en formato html del GInfoWindow. Si no se pone ningún nombre.0. Por ejemplo: 22.20 DataGInfoWindowAnchorField: Si queremos un infowindow. De modo que. DataGIconAnchorField: Si queremos un icono debemos indicar el nombre del campo que contiene el anchor de la imagen.NET tiene soporte para DataSource.2. GoogleMaps. vale con darle un valor string. se ha creado la clase "DataSourceField". etc.20 DataGIconSizeField: Si queremos un icono debemos indicar el nombre del campo que contiene el size de la imagen.1 Con la propiedad DataSourceType podemos elegir qué mostrarán los puntos que definamos. no se abrirá ningún GInfoWindow. podemos asignar un listado genérico o un dataset como "DataSource" o SqlDataSource u ObjectDataSource como "DataSourceID". DataGInfoWindowTextField: si deseamos que en del icono definido en los dos campos anteriores salga un GInfoWindow.20 DataGIconShadowSizeField: Si queremos un icono debemos indicar el nombre del campo que contiene el size de la sombra. en el que las propiedades tienen el mismo nombre que los valores por defecto de los campos o "Fields". tenemos las propiedades DataSourceGPolygonBase y DataSourceGPolylineBase a las que le daremos un GPolygon/GPolyline que actuará como template. un GridView. DataGIconShadowField: Si queremos un icono debemos indicar el nombre del campo que contiene el path de la sombra. Para facilitar la tarea. "DataGInfoWindowTextField" indica el nombre del campo que contiene el string con el html del GInfoWindow. Por tanto. Si dicho campo no existe o está vacío. Polygons.DataSource GoogleMaps.1 – 04/12/2008 . valdrá "lng". Es un campo obligatorio.NET – Versión: 3. por ejemplo. un ChekList. Por ejemplo: 5. DataGIconImageField: Si queremos un icono debemos indicar el nombre del campo que contiene el path de la imagen.subgurim. Tenemos varias opciones: Markers (por defecto). Es un campo obligatorio.

InfoWindowText.0. IconSize.2.NET – Versión: 3.1 – 04/12/2008 . el ejemplo nos aclarará más ideas que la explicación. IconShadowSize. 117 Code. IconAnchor. IconImage. Lng.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.Subgurim. IconShadow.Como siempre. InfoWindowAnchor FROM [MapTestTable]"></asp:SqlDataSource> GoogleMaps.

5. se mantiene el tipo de mapa.addControl(new GControl(GControl.aspx.addControl(new GControl(GControl. GMap1.net soporta el PostBack a tres niveles: • • • Centro del mapa: el centro del mapa se mantiene según su última posición antes de hacer el PostBack. -1. Zoom: igualmente se mantiene el nivel de zoom. GLatLng latlng = new GLatLng(42.aspx <cc1:GMap ID="GMap1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Click Me" /> Code.Hybrid).145).preBuilt.LargeMapControl)). GMap1.addGMarker(new GMarker(latlng + new GLatLng(2.Subgurim. GoogleMaps.2.1 – 04/12/2008 .GTypes.cs GMap1.Soporte PostBack El googlemaps.NET – Versión: 3. GMapType. 1))). GMap1.preBuilt.12. 118 Code.MapTypeControl)).0. Tipo de mapa: del mismo modo.subgurim.setCenter(latlng.

Es totalmente opcional.aspx.Subgurim. "maxAdsOnMap" (número máximo de anuncios en el mapa) y el "channel" (código de seguimiento Adsense) 119 Code. GoogleMaps. 30).2. Para ello usaremos el GAdsManager.GAdsManager La API de GoogleMaps nos ofrece la posibilidad de mostrar publicidad Adsense en nuestros mapas. de publicidad impresa en el mapa corresponderá a Subgurim.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. GMap1. que se compone de tres propiedades: • • • publisherId: el Identificador de tu cuenta Adsense helpSubgurim: del tipo HelpSubgurimEnum nos permite definir qué porcentaje. GAdsManager. options: del tipo GAdsManagerOptions y sobre el que podemos definir parámetros como "minZoomLevel" (nivel mínimo a partir del cual saldrán anuncios).addAdsManager(new GAdsManager("YourPublisherID". con el único objetivo de apoyar a este proyecto.NET – Versión: 3.cs GAdsManagerOptions options = new GAdsManagerOptions(1.FullHelp.1 – 04/12/2008 .HelpSubgurimEnum. desde 0% a 100%. options)).0.

0.Subgurim. por Sely. 120 Saludos.Nota y Agradecimiento Este documento ha sido extraído de la web oficial de Googlemaps.net.2.subgurim. Sely.com GoogleMaps. sely12@gmail.NET – Versión: 3. Para agradecer a Subgurim & cia.1 – 04/12/2008 . todo el trabajo realizado para facilitarnos al resto la programación.

Sign up to vote on this title
UsefulNot useful