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

.

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

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

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

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

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

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

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

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

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

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

// GMap1.cs // Ambas propiedades están activadas por defecto.0.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). Además.enableHookMouseWheelToZoom = true.1 – 04/12/2008 . ese zoom ocurrirá de forma gradiente y continua. también contamos con enableHookMouseWheelToZoom.aspx. con el que. 11 Code.2. para desactivarlas: // GMap1. GMap1. Las propiedades encargadas de tal menester son enableDoubleClickZoom y enableContinuousZoom. Pero además. permitiremos que el usuario haga zoom con la rueda del ratón.NET – Versión: 3.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.enableContinuousZoom = false.enableDoubleClickZoom = false.Subgurim. GoogleMaps. si lo activamos.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.aspx.NET – Versión: 3. 32 Code.cs GoogleMaps.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.0.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" /> Code.Subgurim.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

List points = new List(); points.Add(e.center); points.Add(e.point); gmap.addPolyline(new GPolyline(points, Color.Yellow)); } // Controls gmap.addControl(new GControl(GControl.extraBuilt.MarkCenter)); gmap.addControl(new GControl(GControl.preBuilt.LargeMapControl)); gmap.addControl(new GControl(GControl.preBuilt.MapTypeControl)); // Maybe... anything? ;) gmap.enableScrollWheelZoom = false; gmap.mapType = GMapType.GTypes.Satellite; return gmap.ToString(); }

78

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

getGMapElementById
getGMapElementById... mmm, suena bien, ¿no? Además, funciona tal y como suena: recoge el identificador javascript de las elementos que se han añadido al mapa (normalmente markers), de modo que el límite de su uso lo pone vuestra imaginación ;) Puede accederse tanto mediante un método estático de la clase GMap, como mediante un método de vuestra instancia del control. Como siempre, este sencillo ejemplo es esclarecedor (clickar sobre el mapa y sobre el icono):

79

Code.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="True" OnClick="GMap1_Click" OnMarkerClick="GMap1_MarkerClick" /> Code.aspx.cs protected string GMap1_Click(object s, GAjaxServerEventArgs e) { return new GMarker(e.point).ToString(e.map); } protected string GMap1_MarkerClick(object s, GAjaxServerEventArgs e) { string markerID = GMap1.getGMapElementById(e.who); string js = string.Format(@" if ({0}.isHidden()) {0}.show() else GoogleMaps.Subgurim.NET – Versión: 3.2.0.1 – 04/12/2008

{0}.hide(); ", markerID); js += string.Format("alert('point: ' + {0}.getPoint() + ' - icon: ' + {0}.getIcon().image);", markerID); return js; }

80

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

googlepages.cs GMap1. -102.tao.com/blackbirds.2.kml")).aspx.Subgurim.com/services/feeds/groups_pool. 3).0.setCenter(new GLatLng(49.65625). GMap1. GoogleMaps.GGeoXml Leer archivos KLM o GeoRSS es ahora muy sencillo con el GoogleMaps.gne?id=322338@N20&format=rss _200&georss=1")).NET – Versión: 3.Subgurim.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. GMap1.496675.flickr.aspx <cc1:GMap ID="GMap1" runat="server" /> Code. Esa propiedad "url" será la dirección en que se encuentra el fichero KLM o GeoRSS.NET.1 – 04/12/2008 . 96 Code.addGGeoXML(new GGeoXml("http://nigel.

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

2. clearMap: Booleano que indica si se borra el mapa entre una llamada y otra.aspx. fromText: texto que describe el punto de inicio. Por defecto es "true".errorMessage = "Ups". GoogleMaps. buttonText: texto que describe botón para ejecutar el evento. Por defecto vale "Go". errorMessage: Mensaje mostrado cuando ocurre un error.Subgurim.0. cuadros de texto y el botón. toText: texto que describe el punto de llegada. En este ejemplo estudiaremos las propiedades más sencillas y en el siguiente las más avanzadas: 98 • • • • • • autoGenerate: añade automáticamente la funcionalidad de GDirections. insertando textos.NET – Versión: 3.1 – 04/12/2008 .aspx <cc1:GMap ID="GMap1" runat="server" /> Code.addGDirection(gdirection). gdirection. GMap1. Code. Por defecto vale "From: ".cs GDirection gdirection = new GDirection(true). Por defecto vale "To: ".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.

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

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

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

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

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

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

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

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

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

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

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

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

Subgurim.Add(new GeoCoding()). ll1)). GMap1.Add(new GMove(2000.2.GMap1.0.1 – 04/12/2008 . 111 GoogleMaps.NET – Versión: 3.

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

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

getCenter: devuelve la coordenada central del rectángulo. isEmpty: nos dice si el rectángulo está vacío. isFullLat: nos dice si el rectángulo se extiende desde el polo sur hasta el polo norte. getSouthWest: devuelve el GLatLng corresponiente a la coordenada suroeste. toSpan: devuelve el GLatLng que representa las coordenadas del rectángulo.2.GLatLngBounds El GLatLngBounds representa un rectángulo dentro del mapa. Además con el método estático GMap1. 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. containsBounds(GLatLngBounds): nos dice si el rectángulo pasado como parámetro contiene al rectángulo.NET – Versión: 3. getNorthEast: devuelve el GLatLng corresponiente a la coordenada noreste.1 – 04/12/2008 .Subgurim. GoogleMaps. contains(GLatLng): nos dice si el GLatLng pasado como parámetro está dentro del actual rectángulo.0. isFullLng: nos dice si el rectángulo se extiende a lo largo de toda la longutid terrestre. extend(GLatLng): amplia el rectángulo de modo que el GLatLng quede contenido dentro de él. marcado por los extremos suroeste (sw) y noreste (ne). 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.

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

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

el ejemplo nos aclarará más ideas que la explicación. IconImage.1 – 04/12/2008 . InfoWindowAnchor FROM [MapTestTable]"></asp:SqlDataSource> GoogleMaps. IconAnchor.aspx <cc1:GMap ID="GMap1" runat="server" DataSourceID="SqlDataSource1" DataSourceType="PolylinesAndMarkers" DataLatField="Lat" DataLngField="Lng" DataGInfoWindowTextField="InfoWindowText" DataGIconImageField="IconImage" DataGIconShadowField="IconShadow" DataGIconAnchorField="IconAnchor" DataGIconSizeField="IconSize" DataGIconShadowSizeField="IconShadowSize" DataGInfoWindowAnchorField="InfoWindowAnchor" /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MapTest %>" SelectCommand="SELECT Lat. Lng. 117 Code.NET – Versión: 3.Como siempre.Subgurim. InfoWindowText.2.0. IconShadowSize. IconSize. IconShadow.

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

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

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

Sign up to vote on this title
UsefulNot useful