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

.

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

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

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

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

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

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

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

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.NET – Versión: 3. no mostrándose. En el ejemplo del TabContainer. directamente. por ejemplo con los TabPanels del TabContainer del Ajax Control Toolkit o con un div con style="hidden".2.aspx <cc1:GMap ID="GMap1" runat="server" /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="1"> <ContentTemplate> <cc1:GMap ID="GMap1" runat="server" /> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="2"> <ContentTemplate> Empty Tab GoogleMaps. Code. Tenemos este problema. el cual devuelve un javascript que debemos ejecutar en el momento en que se vaya a mostrar el mapa. pues acaba descuadrándose o.Subgurim.0.1 – 04/12/2008 . vemos que se ejecuta ese javascript en el preciso momento en que se hace clic sobre su TabPanel correspondiente.

GMap2.2. GMap2.extraBuilt. GMap1.MarkCenter)).getChangeHiddenStateFunction().addControl(new GControl(GControl. GMap1.cs GMap1.extraBuilt. 1)).TextualCoordinatesControl)).addControl(new GControl(GControl.TextualCoordinatesControl)).1 – 04/12/2008 .extraBuilt. TabPanel3.OnClientClick = GMap2.OnClientClick = GMap1.setCenter(new GLatLng(40.</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="3"> <ContentTemplate> <cc1:GMap ID="GMap2" runat="server" /> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel4" runat="server" HeaderText="4"> <ContentTemplate> Empty Tab </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> Code.NET – Versión: 3. 2)).setCenter(new GLatLng(39. GMap2. TabPanel1.aspx.addControl(new GControl(GControl.Subgurim. 9 GoogleMaps.getChangeHiddenStateFunction().addControl(new GControl(GControl.MarkCenter)).0.extraBuilt.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.Overlay.1 – 04/12/2008 .cs GMap1. 31 Code.0.Custom Overlays Del mismo modo que hay controles extra. Se va a trabajar mucho en este campo para las futuras versiones.NET – Versión: 3. GoogleMaps.aspx.Rectangle)).Add(new GCustomOverlay(GCustomOverlay. 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.Subgurim.

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

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

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

All_photos_from_panoramio_com).0. La clase GLayerID contiene todos los tipos de Layers que podemos añadirle al mapa.aspx.Add(layerWikipedia). GLayer layerWikipedia = new GLayer(GLayerID. GMap1.NET – Versión: 3.GLayer Con el nuevo objeto GLayer podemos añadir a nuestros mapas fotos de Panoramio o artículos geolocalizados de la Wikipedia de forma muy sencilla. 35 Code.Geotagged_Wikipedia_articles_Spanish).Subgurim. GMap1. GoogleMaps.aspx <cc1:GMap ID="GMap1" runat="server" /> Code.addGLayer(layerPanoramio).2.cs GLayer layerPanoramio = new GLayer(GLayerID.1 – 04/12/2008 .

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

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

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

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

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

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

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

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

options).Subgurim.2.addInfoWindow(window2).addShowMapBlowUp(mbUp). GMap1.GMap1. GInfoWindow window2 = new GInfoWindow(marker3. GInfoWindowOptions options = new GInfoWindowOptions("Max Title". GMap1.1 – 04/12/2008 .addInfoWindowTabs(wTabs). GMapType. "Max Content"). false. GInfoWindowOptions options3 = new GInfoWindowOptions(12. "infoWindow example".onOpenFn = "abiertoSMBU()".GTypes.NET – Versión: 3. 44 GoogleMaps. options3. options3).Normal). GShowMapBlowUp mbUp = new GShowMapBlowUp(marker2.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). Cuando arrastramos un icono aparece un cruz bajo éste que indica donde queremos que se ubique. Por defecto NO lo es.1 – 04/12/2008 .Subgurim.2..NET – Versión: 3.0.aspx <cc1:GMap ID="GMap1" runat="server" /> GoogleMaps. Obviamente. Por defecto vale 1. dragCrossMove: Es una propiedad poco importante. options: del tipo GMarkerOptions. title: el html tooltip del icono. sobretodo asociándolos con InfoWindow y similares. Dando un valor de true la cruz se desplaza un poco hacia abajo en el momento cogemos el icono.Iconos Ya hemos utilizado los iconos en varias ocasiones. Son los GMarker. bouncy: indica si queremos que el icono pegue unos botes cuando lo soltamos. en caso contrario (por defecto) es el icono el que se desplaza mínimamente hacia arriba. 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. imageMap: Array de entenros representando las coordenadas x/y que indicaran la zona en que es clicable un icono para navegadores diferentes a Internet Explorer. Tenemos dos propiedades que definen al GMarker: • • point: la coordenada (del tipo GLatLng) en que se ubicará el icono. podemos utilizarlos sin asociarlos a nada. Code. draggable: define si el icono puede ser arrastrado en el mapa.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0).1 – 04/12/2008 .Subgurim. GMap1. GoogleMaps.Add(marker).aspx <cc1:GMap ID="GMap1" runat="server" /> Code.)" del marker en cuestión. GMap1. marker. GMarker marker = new GMarker(latLng).aspx.MarkerTracker El MarkerTracker forma parte del GMaps Utility Library.. Su uso es muy sencillo. Lo aplicamos a un GMarker normal.GCenter = latLng + new GLatLng(8. de modo que cuando este GMarker quede fuera de la vista del mapa una flecha (totalmente configurable con las MarkerTrackerOptions) apuntará a su ubicación.AddMarkerTracker().0.2.. 109 Code. 8).cs GLatLng latLng = new GLatLng(40. pues no hay más que llamar al método "AddMarkerTracker(.NET – Versión: 3.

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful