Versión. 3.2.0.

1 -04/12/2008

DOCUMENTACION EN ESPAÑOL

Indice
Iniciación Cómo empezas a utilizar GoogleMaps.Subgurim.NET ................................................................1 Clave de Google o Key ...............................................................................................................2 Comercial Key ...........................................................................................................................3 Basico .......................................................................................................................................5 Basico 2.....................................................................................................................................6 Basico 3.....................................................................................................................................8 Zoom ...................................................................................................................................... 10 Zoom 2.................................................................................................................................... 11 Tipo de Mapa .......................................................................................................................... 12 GKeyboardHandler .................................................................................................................. 13 Asignar Centro ........................................................................................................................ 14 Custom Mouse Cursors ........................................................................................................... 15 Minimizar Código .................................................................................................................... 16 Controles y overlays Controles Prefabricados. ......................................................................................................... 17 Controles Extra........................................................................................................................ 19 GOverViewMap....................................................................................................................... 21 Líneas...................................................................................................................................... 23 Polígonos ................................................................................................................................ 25 TileLayers ................................................................................................................................ 27 GGroundOverlay ..................................................................................................................... 29 GScreenOverlay ...................................................................................................................... 30 Custom Overlays ..................................................................................................................... 31 GStreetViewOverlay ................................................................................................................ 32 Hierarchical Map Type Control ................................................................................................ 33 GLayer .................................................................................................................................... 35 InfoWindows InfoWindow ............................................................................................................................ 36 InfoWindow con Icon .............................................................................................................. 37 InfoWindow con Pestañas ....................................................................................................... 38 ShowMapBlowUp.................................................................................................................... 40 GInfoWindowOptions.............................................................................................................. 41 Iconos Iconos ..................................................................................................................................... 45 Iconos Avanzados .................................................................................................................... 47 Marker Manager ..................................................................................................................... 49 Otros Mapas Static Map ............................................................................................................................... 51 GoogleEarth Map .................................................................................................................... 53 Mars Map ............................................................................................................................... 54

Moon Map .............................................................................................................................. 55 Sky Map .................................................................................................................................. 56 Custom Maps .......................................................................................................................... 57 GStreetViewPanorama ............................................................................................................ 59 Eventos Y JavaScript Eventos ................................................................................................................................... 61 Eventos de Servidor ................................................................................................................ 63 Eventos de Servidor2............................................................................................................... 67 ASP.NET Postback ................................................................................................................... 70 Custom Javascript ................................................................................................................... 72 Custom Inside Javascript ......................................................................................................... 74 ToString .................................................................................................................................. 76 GMap.ToString ........................................................................................................................ 77 getGMapElementById ............................................................................................................. 79 Store ....................................................................................................................................... 81 Geo GeoCoding .............................................................................................................................. 84 GeoCoding 2 ........................................................................................................................... 86 GeoCoding Avanzado .............................................................................................................. 88 Geocoding Inverso .................................................................................................................. 93 GGeoXml................................................................................................................................. 96 GTrafficOverlay ....................................................................................................................... 97 GDirections Basic .................................................................................................................... 98 GDirections Avanzado ............................................................................................................. 99 GeoIP .................................................................................................................................... 101 Gmaps Utility Library DragZoomControl.................................................................................................................. 103 LabeledMarker ...................................................................................................................... 105 ExtMapTypeControl .............................................................................................................. 106 MapIconMaker...................................................................................................................... 107 MarkerTracker ...................................................................................................................... 109 Otros Add Genérico ........................................................................................................................ 110 Movimiento y Animación ...................................................................................................... 112 GLatLngBounds ..................................................................................................................... 114 DataSource ........................................................................................................................... 116 Soporte PostBack .................................................................................................................. 118 GAdsManager ....................................................................................................................... 119 Nota y Agradecimiento Nota y Agradecimiento.......................................................................................................... 120

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tileLayerOptions.tileUrlTemplate = "http://code.google.com/apis/maps/documentation/exam ples/include/tile_crosshairs.png"; GTileLayer tilelayer = new GTileLayer(myCopyright, 10, 10, tileLayerOptions); GTileLayerOverlay myTileLayer = new GTileLayerOverlay(tilelayer); GMap1.Add(myTileLayer);

28

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

GGroundOverlay
Con el GGroundOverlay se pueden insertar imágenes a los mapas de forma muy sencilla. Basta con definir la imageUrl y el GLatLngBounds y... ¡ya está!

29

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng sw = new GLatLng(64,20); GLatLng ne = new GLatLng(65,29); GMap1.setCenter((sw / 2) + (ne / 2)); GGroundOverlay groundOverlay = new GGroundOverlay("http://googlemaps.subgurim.net/images/logo.jpg", new GLatLngBounds(sw, ne)); GMap1.addGroundOverlay(groundOverlay);

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

GScreenOverlay
Es muy similar al GGroundOverlay, con la diferencia que usando el GScreenOverlay la imagen que se muestra es estática (no cambia de posición absoluta cuando se mueve el mapa.

30

Code.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.aspx.cs GLatLng sw = new GLatLng(64, 20); GLatLng ne = new GLatLng(65, 29); GMap1.setCenter((sw / 2) + (ne / 2)); GScreenOverlay screenOverlay = new GScreenOverlay("http://googlemaps.subgurim.net/imag es/logo.jpg", new GScreenPoint(0, 21, unitEnum.pixels, unitEnum.pixels), new GScreenPoint(0, 0), new GScreenSize(0, 0)); GMap1.Add(screenOverlay);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ll1)).Add(new GMove(2000.1 – 04/12/2008 .Subgurim. 111 GoogleMaps.NET – Versión: 3.0.GMap1.Add(new GeoCoding()).2. GMap1.

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful