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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

enablePostBackPersistence = false. en ocasiones no nos es necesario utilizar toda la potencia. que devuelve una simple imagen.enableGetGMapElementById = false. 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. sino que aporta funcionalidades que la API de Google Maps no posee.1 – 04/12/2008 .Subgurim.aspx.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.0. es recomendable desactivar esta opción (está activada por defecto). deberíamos estudiar la posibilidad de utilizar Static Maps. es recomendable desactivar esta opción (está activada por defecto).NET a javascript. enableServerEvents: sólo debemos activar esta opción si vamos a usar server events (desactivado por defecto). enableGetGMapElementById: Si no vamos a usar nunca la opción de getGMapElementById. pues no solo es un parseador de ASP. GMap1. 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.cs GMap1.NET es muy potente.Minimizar Código El control de Google Maps para ASP. Pero el Static Map suele quedarse corto en muchas ocasiones (el usuario no tiene opción de moverse en el mapa). Code.NET – Versión: 3. de modo que podemos aplicar algunas opciones para minimizar el código al máximo. Sin embargo. GoogleMaps. enableStore: si no vamos a usar la propiedad Store no debemos activar esta opción (desactivada por defecto).2.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

La clase GLayerID contiene todos los tipos de Layers que podemos añadirle al mapa.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.1 – 04/12/2008 .cs GLayer layerPanoramio = new GLayer(GLayerID.2.0.Add(layerWikipedia).addGLayer(layerPanoramio). GMap1.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. GoogleMaps.NET – Versión: 3.All_photos_from_panoramio_com).Geotagged_Wikipedia_articles_Spanish).Subgurim. GLayer layerWikipedia = new GLayer(GLayerID. 35 Code.aspx.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

En los ejemplos vemos que usar la clase 'serverEvent' es muy sencillo. maneja un evento de los no-predefinidos. 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. Finalmente hay que llamar a la función 'send()' y la información se envía a servidor. El primero maneja el evento click del mapa. Para hacerlo funcionar. ya hemos visto que este evento era uno de los predefinidos. Como vemos en el ejemplo. En el ejemplo vemos como definimos dos eventos: "Click" y "InfoWindowClose".0. Para este caso tenemos el evento ServerEvent.NET – Versión: 3. Vemos pues que podemos manejar cualquier evento que produzca el mapa. puede darse el caso que queramos hacer algo diferente. un modo sencillo de crear el javascript es usando addListener.Subgurim.. distinguir entre varios eventos diferentes eventArgs: es un array de string que contiene todos los argumentos que hemos añadido en javascript.Javascript Debemos añadir un javascript y usar la clase javascript 'serverEvent' para mandar la información a servidor. 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. los markers. tal y como se hace con el resto de eventos. debemos manejar el evento ServerEvent. Es muy útil para. como en el ejemplo. Por ejemplo manejar un evento no-predefinido. o lo que sea. deberemos seguir los siguientes pasos: 1.. GoogleMaps.1 – 04/12/2008 . o redefinir un evento predefinido del que queremos unos datos diferentes.Eventos de Servidor 2 Si bien es cierto que los eventos de servidor predefinidos son los más comunes.2. 2. En cuanto a "InfoWindowClose". pero aquí hemos añadido un argumento que no teníamos antes: el tamaño del mapa.Servidor En el servidor.

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

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

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

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

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

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

el click de un botón. Code. pero como éste no puede iniciar el evento. Mediante el CustomJavascript creamos una función que añadirá iconos en ubicaciones aleatorios. como por ejemplo el del GMarker.0. Es decir. Como os podéis imaginar.Subgurim.2. El CustomInsideJavascript sirve para añadir javascript que se ejecutará en la carga del mapa.Custom Inside Javascript Utilizaremos el "CustomInsideJavascript" para añadir nuestro propio javascript. y nos permitimos combinar el CustomInsideJavascript con el CustomJavascript.NET – Versión: 3.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. el CustomInsideJavascript añadido no podrá ser accedido por eventos como. por ejemplo. utilizamos el CustomInsideJavascript para llamar por primera (y única) vez al código. Nuestro ejemplo es muy sencillo.1 – 04/12/2008 . 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. 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.

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

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

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

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

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

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

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

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

onIdleCallback: Define una función que se ejecutará cuando la búsqueda no devuelve resultados. Por defecto el target es "_Blank". no hay más que hacer clic sobre la lupa situada al lado del icono de Google que aparece en el mapa. La función tendrás los atributos de la siguiente forma: {result: GlocalSearch.NET – Versión: 3. suppressZoomToBounds: desactiva el comportamiento por defecto de acercarse a los resultados. onSearchCompleteCallback: Define una función que se ejecutará cuando la búsqueda devuelve resultados. linkTarget: Indica el "Target" de los enlaces mostrados al hacer la búsqueda. Los atributos que debe tener la función (por orden) son: un GMarker. y debe devolver un string HTML que se mostrará en el info window. Se ejecuta antes de mostrar los resultados en pantalla.siguiente". y un GlocalSearchResult.2. marker: GMarker}. el string HTML generado. 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. onMarkersSetCallback: función que será llamada cuando se termine la creación de los markers en el mapa. resultList: Indica cómo se muestran los resultados de la búsqueda. suppressInitialResultSelection: Si está activado (y lo está por defecto) no muestra el primer resultado en el mapa.1 – 04/12/2008 . GoogleMaps. 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.0. Una vez activado. Por defecto está desactivado. 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 .Subgurim.

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

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

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

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

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

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

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

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

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

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

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

GMap1. Por defecto es "true".aspx <cc1:GMap ID="GMap1" runat="server" /> Code. 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. Code.2.aspx. buttonText: texto que describe botón para ejecutar el evento. fromText: texto que describe el punto de inicio.1 – 04/12/2008 . Por defecto vale "From: ".cs GDirection gdirection = new GDirection(true).Subgurim. GoogleMaps. Por defecto vale "To: ". Por defecto vale "Go".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.errorMessage = "Ups".NET – Versión: 3. toText: texto que describe el punto de llegada.addGDirection(gdirection). gdirection.0. cuadros de texto y el botón. errorMessage: Mensaje mostrado cuando ocurre un error. clearMap: Booleano que indica si se borra el mapa entre una llamada y otra. insertando textos.

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

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

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

countryCode. location. location. location.Add(new GInfoWindow(new GMarker(latlng). location.postalCode.area_code.2.102 <b>Country Code</b>: {2} <br /> <b>Country Name</b>: {3} <br /> <b>DMA Code</b>: {4} <br /> <b>Postal Code</b>: {5} <br /> <b>Region</b>: {6} </div> ". location.city.dma_code. infoWindowHTML)). location.0.countryName.NET – Versión: 3.1 – 04/12/2008 .Subgurim. location.region). GMap1. } GoogleMaps.

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

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

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

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

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

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

cs GLatLng latLng = new GLatLng(40. GMap1. GoogleMaps.. GMap1.0. Su uso es muy sencillo.GCenter = latLng + new GLatLng(8. 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.Subgurim..)" del marker en cuestión. marker. 8). pues no hay más que llamar al método "AddMarkerTracker(. Lo aplicamos a un GMarker normal.NET – Versión: 3.Add(marker).MarkerTracker El MarkerTracker forma parte del GMaps Utility Library. 109 Code.AddMarkerTracker().2. 0).aspx.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.1 – 04/12/2008 . GMarker marker = new GMarker(latLng).

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

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

Si se define goTO. deltaX: Incremento en X que sufrirá el mapa.Subgurim. tal y como se muestra en el ejemplo. Un mapa puede tener tantos movimientos como queramos y se llevarán a cabo según el orden en el que los hayamos añadido al mapa. Define a qué latitud y longitud saltará el mapa. GoogleMaps.aspx.1 – 04/12/2008 .NET – Versión: 3. GMap1. 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. 1.2. el mapa se deslizará.Movimiento y Animación Para trabajar con movimiento y animaciones. donde una unidad es media pantalla.addMovement(move). donde una unidad es media pantalla. deltaY: Incremento en Y que sufrirá el mapa. se añadirá al mapa mediante el método addMovement. -1). en lugar de dar el salto de golpe.0. Una vez definido el movimiento. 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.cs GMove move = new GMove(500. goTO: propiedad del tipo GLatLon. utilizaremos la clase GMove.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Code.

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

isFullLat: nos dice si el rectángulo se extiende desde el polo sur hasta el polo norte. 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. getCenter: devuelve la coordenada central del rectángulo. isEmpty: nos dice si el rectángulo está vacío.GLatLngBounds El GLatLngBounds representa un rectángulo dentro del mapa. getSouthWest: devuelve el GLatLng corresponiente a la coordenada suroeste. toSpan: devuelve el GLatLng que representa las coordenadas del rectángulo.Subgurim. getNorthEast: devuelve el GLatLng corresponiente a la coordenada noreste.1 – 04/12/2008 .2. 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.0. contains(GLatLng): nos dice si el GLatLng pasado como parámetro está dentro del actual rectángulo.NET – Versión: 3. isFullLng: nos dice si el rectángulo se extiende a lo largo de toda la longutid terrestre. containsBounds(GLatLngBounds): nos dice si el rectángulo pasado como parámetro contiene al rectángulo. GoogleMaps. intersects(GLatLngBounds): nos dice si el rectángulo pasado como parámetro intersecta al rectángulo.getBoundsZoomLevel(latlngbounds) se obtiene el mayor zoom para el cual se visualiza toda el área definida por el latlngbounds. Además con el método estático GMap1.

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

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

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

0.addGMarker(new GMarker(latlng + new GLatLng(2.subgurim.145).1 – 04/12/2008 .MapTypeControl)). 5. -1.Soporte PostBack El googlemaps. 118 Code. 1))). GMap1. GLatLng latlng = new GLatLng(42.aspx.2.NET – Versión: 3.preBuilt.setCenter(latlng.aspx <cc1:GMap ID="GMap1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Click Me" /> Code. Zoom: igualmente se mantiene el nivel de zoom. GMapType.cs 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.12. GoogleMaps. Tipo de mapa: del mismo modo.Hybrid). se mantiene el tipo de mapa. GMap1.preBuilt.LargeMapControl)).GTypes.Subgurim.addControl(new GControl(GControl.addControl(new GControl(GControl. GMap1.

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

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

Sign up to vote on this title
UsefulNot useful