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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

78

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

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

79

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

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

80

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful