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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• • •

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

17

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

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

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

18

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GControl control = new GControl(GControl.preBuilt.GOverviewMapControl); GControl control2 = new GControl(GControl.preBuilt.MenuMapTypeControl, new GControlPosition(GControlPosition.position.Top_Left)); GMap1.addControl(control); GMap1.addControl(control2); GMap1.addControl(new GControl(GControl.preBuilt.SmallMapControl, new GControlPosition(GControlPosition.position.Top_Right)));

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

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

19

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Locality.AdministrativeArea.AdministrativeArea.LocalityName: San Pedro del Pinatar geocode.083739. Spain geocode.PostalCodeNumber: GoogleMaps.1 – 04/12/2008 .SubAdministrativeArea .0</coordinates> </Point> </Placemark> </Response> </kml> 89 • • • • • • • • • • geocode.Placemark. CA 94043.Country.AddressDetails.37.2.Subgurim.AddressDetails.Country.423021.address: San Pedro del Pinatar.Status.AddressDetails.accuracy: 4 geocode.request: geocode geocode.Placemark. USA </address> <AddressDetails Accuracy="8"> <Country> <CountryNameCode>US</CountryNameCode> <AdministrativeArea> <AdministrativeAreaName>CA</AdministrativeAreaName> <SubAdministrativeArea> <SubAdministrativeAreaName>Santa Clara</SubAdministrativeAreaName> <Locality> <LocalityName>Mountain View</LocalityName> <Thoroughfare> <ThoroughfareName>1600 Amphitheatre Pkwy</ThoroughfareName> </Thoroughfare> <PostalCode> <PostalCodeNumber>94043</PostalCodeNumber> </PostalCode> </Locality> </SubAdministrativeArea> </AdministrativeArea> </Country> </AddressDetails> <Point> <coordinates>-122.AdministrativeArea.Placemark.Placemark.Status.Placemark.AdministrativeAreaNa me: Murcia geocode.SubAdministrativeArea .Locality.name: San Pedro del Pinatar geocode.Country.code: 200 geocode. Mountain View.PostalCode.AddressDetails.AddressDetails.SubAdministrativeAreaName: Murcia geocode.Country.<Placemark> <address> 1600 Amphitheatre Pkwy.Country.CountryNameCode: ES geocode.0.AddressDetails.AdministrativeArea.Placemark.NET – Versión: 3.SubAdministrativeArea .Placemark.

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

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

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

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

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

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

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

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

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

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

direction.1 – 04/12/2008 . direction. EventArgs e) { if (!Page. direction.buttonElementId = "bt_Go".2.100 Code. direction.aspx Start Location: <asp:TextBox ID="tb_fromPoint" runat="server"></asp:TextBox> End Location: <asp:TextBox ID="tb_endPoint" runat="server"></asp:TextBox> <input type="button" id="bt_Go" value="Come on!" /> <cc1:GMap ID="GMap1" runat="server" /> <div id="div1"></div> Code.fromElementId = tb_fromPoint. GMap1. direction.cs protected void Page_Load(object sender. direction. } } GoogleMaps.divElementId = "div_directions".toElementId = tb_endPoint.IsPostBack) { GDirection direction = new GDirection().0.NET – Versión: 3.ClientID.locale = "es-ES".aspx.clearMap = true.Add(direction).autoGenerate = false. // Optional // direction.ClientID.Subgurim.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful