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

.

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

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

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

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

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

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

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

vemos que se ejecuta ese javascript en el preciso momento en que se hace clic sobre su TabPanel correspondiente. Tenemos este problema. no mostrándose.2.Subgurim. el cual devuelve un javascript que debemos ejecutar en el momento en que se vaya a mostrar el mapa. directamente. 8 La solución es utilizar el método getChangeHiddenStateFunction() de cada mapa.NET – Versión: 3. Code.Básico 3 GoogleMaps no se lleva bien con los elementos que lo ocultan con un Hidden. En el ejemplo del TabContainer.0. pues acaba descuadrándose o.1 – 04/12/2008 . por ejemplo con los TabPanels del TabContainer del Ajax Control Toolkit o con un div con style="hidden".aspx <cc1:GMap ID="GMap1" runat="server" /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="1"> <ContentTemplate> <cc1:GMap ID="GMap1" runat="server" /> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="2"> <ContentTemplate> Empty Tab GoogleMaps.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

point).cs protected void Page_Load(object sender.preBuilt.aspx.NET – Versión: 3. GoogleMaps.IsPostBack) { GMap1.addControl(new GControl(GControl. Su argumento incluye el viejo zoom del que venimos y el nuevo zoom al que hemos ido. Haciendo uso de la propiedad "ajaxUpdateProgressMessage" puede definirse el mensaje que queremos que aparezca mientras si realiza el viaje cliente-servidor-cliente.aspx <cc1:GMap ID="GMap1" runat="server" enableServerEvents="true" OnMarkerClick="GMap1_MarkerClick" OnZoomEnd="GMap1_ZoomEnd" OnMapTypeChanged="GMap1_MapTypeChanged" OnClick="GMap1_Click" OnDragEnd="GMap1_DragEnd" OnDragStart="GMap1_DragStart" OnMoveEnd="GMap1_MoveEnd" OnMoveStart="GMap1_MoveStart" /> <div id="messages1"></div> <div id="messages2"></div> Code.MapTypeControl)).LargeMapControl)). GMap1.• ZoomEnd: se lanza cuando acabamos de hacer un zoom. } } protected string GMap1_Click(object s. GAjaxServerEventArgs e) { GMarker marker = new GMarker(e.0.addControl(new GControl(GControl.preBuilt. EventArgs e) { if (!Page.2.Subgurim.1 – 04/12/2008 . 64 Code.

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

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

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

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

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

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

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

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

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

Custom Inside Javascript Utilizaremos el "CustomInsideJavascript" para añadir nuestro propio javascript. Mediante el CustomJavascript creamos una función que añadirá iconos en ubicaciones aleatorios. el CustomInsideJavascript añadido no podrá ser accedido por eventos como. por ejemplo.1 – 04/12/2008 . pero como éste no puede iniciar el evento. El CustomInsideJavascript sirve para añadir javascript que se ejecutará en la carga del mapa. 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.NET – Versión: 3. y nos permitimos combinar el CustomInsideJavascript con el CustomJavascript.2. el click de un botón. Es decir.0. como por ejemplo el del GMarker. Code. utilizamos el CustomInsideJavascript para llamar por primera (y única) vez al código.aspx <cc1:GMap ID="GMap1" runat="server" /> <input type="button" id="Button1" value="Añadir icono" onclick="subgurim_Add()" /> <input type="button" id="Button2" value="Borrar último icono" onclick="subgurim_Delete()" /> <input type="button" id="Button3" value="Borrar todos los iconos" onclick="subgurim_Remove()" /> GoogleMaps. Como os podéis imaginar.Subgurim. Nuestro ejemplo es muy sencillo. 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful